[Galleria + Flickr] Photo ne se charge pas

**messier79** · 21/09/2010, 18h11

Bonjour

Voila le probleme sur lequel je me casse la tete depuis 3 jours...
J'ai un site qui utilise Galleria associea un compte Flickr pour afficher un diaporama en fond d'ecrans.
http://www.karavaniers.com/voyages/r...ers/index.html

Le code utilise pour charger la gallerie est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
    <div id="galleria"></div> 
    <script>
    Galleria.loadTheme('src/themes/fullscreen/galleria.fullscreen.js');
 
	Galleria.flickr.setOptions({
		use_original: true,
    }).search('ma cle_flickr', {
	   photoset_id:'le_photoset_id',
    }, function(data) {
        $('#galleria').galleria({
            data_source: data,
			preload: 3,
			transition: 'fade',
			image_crop: false,
			max_scale_ratio: 0,
			thumb_margin: 0
        });
    });	
    </script>

Au 1er chargement de la page, cela reste noir, mais si je redimensionne la fenetre, la photo apparait.
J'ai essaye de jouer avec l'API Flickr, avec JavaScript, mais rien n'y fait...
En dernier recours, j'ai opte pour un redimensionnement en fullscreen de la fenetre - mauvaise solution, mais pas le choix...

NB : Si vous souhaitez tester, essayer avec Chrome ou Opera qui ne semblent pas prendre en compte le redimensionnement.

Quelqu'un a-t-il deja rencontre ce probleme ?
Si oui, comment le resoudre ?

Merci

**danielhagnoul** · 24/09/2010, 21h16

Bonsoir

Je n'ai pas les moyens de tester, mais il y a des erreurs dans la structure du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
    <title>Les Inoubliables Karavaniers</title>        
    <link type="text/css" rel="stylesheet" href="src/font/stylesheet.css">
 
    <!-- galleria.fullscreen.css en triple ! voir ci dessous -->
    <!-- <link id="galleria-styles" rel="stylesheet" media="screen" href="src/themes/fullscreen/galleria.fullscreen.css"> -->
 
    <style type="text/css">
        h2, h3, p									{margin:0;}
        h3											{font-size:16px;}
        h2											{margin:5px 0; font-size:20px}
 
        #container_instructions 					{z-index:10000; position:absolute; top:75px; width:100%; }
        #a_propos	 								{margin:0 auto; background:transparent url(src/images/bg_boite_instructions.png); display:block; min-height:50px; width:300px; 
                                                     padding:10px 15px 15px 15px; position:relative; color:white;}
        #instructions 								{margin:0 auto; background:transparent url(src/images/bg_boite_instructions.png); display:block; min-height:50px; width:300px; 
                                                     padding:10px 15px 15px 15px; position:relative; color:white;}
        p											{font-family:verdana !important; font-size:12px; line-height:16px;}
        #container_instructions span#fermer			{background:url(src/images/close.gif); position:absolute; right:5px; top:5px; height:14px; width:16px;}
        #container_instructions span#fermer:hover 	{background:url(src/images/close_over.png); cursor:hand; cursor:pointer; color:red;}
        a#btn_a_propos								{position:absolute; top:5px; left:5px; z-index:10000; display:block; 
                                                     background:url(src/images/btn_a_propos.png); text-decoration:none; height:33px; width:83px;}
        a:hover#btn_a_propos	 					{color:red; text-decoration:none;}
        a#btn_retour								{position:absolute; top:5px; left:88px; z-index:10000; display:block; 
                                                     background:url(src/images/btn_retour.png); text-decoration:none; height:33px; width:126px;}
        a:hover#btn_retour		 					{color:red; text-decoration:none;}
        a#btn_retour span, a#btn_a_propos span		{visibility:hidden;}
        .MasonSansRegular 							{font-weight: normal; font-style: normal; line-height:normal; font-family: 'MasonSansRegular', sans-serif;}
        span.bout									{position:absolute; top:5px; left:214px; z-index:10000; display:block; text-decoration:none;}
 
    </style>
    <script src="/js/jquery/jquery.js"></script>
    <script src="/js/jquery/galleria.js"></script>
 
    <!-- galleria.fullscreen.css en triple ! voir ci dessous -->
    <!--<script src="src/themes/fullscreen/galleria.fullscreen.js"></script>-->
 
    <script>
 
        jQuery.fn.fadeToggle = function(speed, easing, callback) {
           return this.animate({opacity: 'toggle'}, speed, easing, callback);
        };	
 
        $(document).ready(function() {
            $('#fermer').click( function() {
                $('div#container_instructions').fadeOut("fast");
            });				
 
            $("#btn_a_propos").click(function () {
                $("div#container_instructions").fadeToggle("fast");
            });
        });
 
    </script>
</head>
<body>
	<a onfocus="if(this.blur)this.blur()" href="#" id="btn_a_propos"><span>ï¿½ Propos</span></a>
    <a onfocus="if(this.blur)this.blur()" href="javascript:history.back()" id="btn_retour"><span>Retour ï¿½ la carte</span></a>
    <span class="bout"><img width="491" height="33" src="src/images/btn_bout.png"></span>
 
	<div class="MasonSansRegular" id="container_instructions">
      <div id="a_propos">
        	<span id="fermer">&nbsp;</span>
            <h3>À Propos</h3>
        	<p>On pourrait tout vous dire: où vous mangerez, l'altitude du camp...
			presque la température! Mais non, on préfère le romantisme:
			évoquez les belles choses et vous laisser les imaginer.
            <br>
             Allez partez!</p>
        </div>
        <div id="instructions">
          <h3>Instructions</h3>
        	<p style="margin-bottom:9px;">
            Fermez cette fenêtre puis
            cliquez sur la flèche à droite et à gauche de l'image pour passer d'une
			image à l'autre.<br><br>
            Pour voir tout l'album de photos, placez votre souris en bas de votre écran.
            </p>
        </div>
    </div>
 
    <div id="galleria"></div>
 
    <script>
        // galleria.fullscreen.css en triple !
        Galleria.loadTheme('src/themes/fullscreen/galleria.fullscreen.js');
 
        Galleria.flickr.setOptions({
            use_original: true,
        }).search('...', {
           photoset_id:'...',
        }, function(data) {
            $('#galleria').galleria({
                data_source: data,
                preload: 3,
                transition: 'fade',
                image_crop: false,
                max_scale_ratio: 0,
                thumb_margin: 0
            });
        });	
    </script>
</body>
</html>

**messier79** · 30/09/2010, 18h59

Bon, j'ai finalement pu resoudre le probleme.
Pour cela, j'ai utilise un des exemples donnes sur le site de Galleria :
http://galleria.aino.se/
http://galleria.aino.se/media/galler...screen-01.html

Je ne saurais pas dire pourquoi ca ne marchait pas avant, mais la methode etait differente.

En tout cas, ca fonctionne, maintenant.

[Galleria + Flickr] Photo ne se charge pas

jQuery

Vue hybride

Discussions similaires

Partager

Partager