plugin GalleryView, comment dois-je l'insérer dans mon site ?

Version imprimable

Bonjour tout le monde,

J'aimerais mettre en place ce plugin jquery sur mon site :

http://spaceforaname.com/galleryview

Quand je teste ma page online, rien n'apparaît (en local).

Voici ce que j'ai mis dans le head :

Code:

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
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>
		Gabarit 02: conteneur global aligné à gauche, largeur fixe 750px
	</title>
	<!-- La feuille de styles "base.css" doit être appelée en premier. -->
	<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
	<link rel="stylesheet" type="text/css" href="styles/modele02.css" media="screen" />
	<link type="text/css" rel="stylesheet" href="jquery/galleryview-2.0/jquery-galleryview-2.0/galleryview.css" />
	<script type="text/javascript" src="jquery/jquery-1.4.1.min.js"></script>
	<script type="text/javascript" src="jquery/galleryview-2.0/jquery-galleryview-2.0/jquery.galleryview-2.0-pack.js"></script>
	<script type="text/javascript" src="jquery/galleryview-2.0/jquery-galleryview-2.0/jquery.galleryview-2.0.js"></script>
	<script type="text/javascript" src="jquery/galleryview-2.0/jquery-galleryview-2.0/jquery.timers-1.1.2.js"></script>
 
 
	<script type="text/javascript">
		$('#photos').galleryView({
		panel_width: 800,
		panel_height: 300,
		frame_width: 100,
		frame_height: 100,
		});
	</script>
 
</head>

Voici ce que j'ai mis dans le body :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="photos" class="galleryview">
		<div class="panel">
			<img src="img/gallery/02.jpg" />
		<div class="panel-overlay">
			<h2>Eden</h2>
			<p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.
			View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
		</div>
 
	</div>
 
	</div>

Je ne sais par contre pas où mettre ce code :

Code:

1
2
3
4
5
6
7
8
9
10
<ul class="filmstrip">
	<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
	<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
	<li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
	<li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
	<li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
	<li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>
	<li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
	<li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
</ul>

Merci d'avance pour votre aide précieuse et bon WE.

beegees

Bonsoir.

Il suffit de prendre exemple sur le code de la page : http://spaceforaname.com/gallery-light.html

Code:

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
108
109
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- InstanceBeginEditable name="doctitle" --> 
<title>jQuery GalleryView - by Jack Anderson</title> 
<!-- InstanceEndEditable --> 
<link type="text/css" rel="stylesheet" href="style.css" /> 
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script> 
<script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script> 
<!-- InstanceBeginEditable name="head" --> 
<script type="text/javascript"> 
	$(document).ready(function(){
		$('#photos').galleryView({
			panel_width: 800,
			panel_height: 300,
			frame_width: 100,
			frame_height: 100
		});
	});
</script> 
<!-- InstanceEndEditable --> 
</head> 
 
<body> 
<!-- InstanceBeginEditable name="ContentRegion" --> 
<h1>Photo Gallery - Light Theme</h1> 
<p>This example shows how GalleryView can be used to display a photo gallery with slideshow functionality.  Clicking on a frame will jump to that photo, and the overlay caption for each photo contains links to the full image.</p> 
<p>This gallery utilizes all default plugin options, setting only the dimensions of the panel and filmstrip frame.</p> 
<div id="photos" class="galleryview"> 
  <div class="panel"> 
     <img src="img/gallery/01.jpg" /> 
    <div class="panel-overlay"> 
      <h2>Effet du soleil sur le paysage</h2> 
      <p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>.  View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p> 
    </div> 
  </div> 
  <div class="panel"> 
     <img src="img/gallery/02.jpg" /> 
    <div class="panel-overlay"> 
      <h2>Eden</h2> 
      <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.  View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p> 
    </div> 
  </div> 
  <div class="panel"> 
     <img src="img/gallery/03.jpg" /> 
    <div class="panel-overlay"> 
      <h2>Snail on the Corn</h2> 
      <p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>.  View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p> 
    </div> 
  </div> 
  <div class="panel"> 
     <img src="img/gallery/04.jpg" /> 
    <div class="panel-overlay"> 
      <h2>Flowers</h2> 
      <p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>.  View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p> 
    </div> 
  </div> 
  <div class="panel"> 
     <img src="img/gallery/06.jpg" /> 
    <div class="panel-overlay"> 
      <h2>Alone Beach 2B</h2> 
      <p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>.  View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p> 
    </div> 
  </div> 
  <div class="panel"> 
     <img src="img/gallery/05.jpg" /> 
    <div class="panel-overlay"> 
      <h2>Sunrise Trees</h2> 
      <p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>.  View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p> 
    </div> 
  </div> 
  <div class="panel"> 
     <img src="img/gallery/07.jpg" /> 
    <div class="panel-overlay"> 
      <h2>Waterfall</h2> 
      <p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>.  View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p> 
    </div> 
  </div> 
  <div class="panel"> 
     <img src="img/gallery/08.jpg" /> 
    <div class="panel-overlay"> 
      <h2>Death Valley</h2> 
      <p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>.  View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p> 
    </div> 
  </div> 
  <ul class="filmstrip"> 
    <li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li> 
    <li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li> 
    <li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li> 
    <li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li> 
    <li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li> 
    <li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li> 
    <li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li> 
    <li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li> 
  </ul> 
</div> 
<h3>Function Call and Options</h3> 
<pre>$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100
});</pre> 
<!-- InstanceEndEditable --> 
</body> 
<!-- InstanceEnd --></html>

14/03/2010, 13h48
beegees

Bonjour,

Merci pour ta réponse.

J'ai suivi le code de la page que tu as mentionné et un début de résultat apparaît.

Merci encore.

beegees
14/03/2010, 21h23
danielhagnoul

Bonsoir.

Citation:

Envoyé par beegees

[...] J'ai suivi le code de la page que tu as mentionné et un début de résultat apparaît. [...]

8O :koi:

Je viens de tester les deux versions 1.1 et 2.0 de ce plug-in. J'ai pris soin de télécharger tous les éléments, css, js et photos comprises, et de tester à l'identique, mais chez moi rien ne fonctionne correctement sous jQuery 1.4.2.

Utilisez une ancienne version, complètement dépassée de jQuery, n'étant pas envisageable pour moi, je classe provisoirement ce plug-in dans ma liste « les choses à oublier. » :aie: