Sujet Précédent Sujet Suivant

Installation de Galleryview en JQuery

Fermé
El - 8 juin 2010 à 11:04
 The prince - 23 juil. 2010 à 12:43
Bonjour à tous,

Je tente d'installer la Galleryview sur mon site, mais je ne suis pas une pro en JQuery/Javascript.

Pour ceux qui ne connaissent pas, il s'agit de ce module : http://spaceforaname.com/galleryview

Il est expliqué d'ajouter simplement les paramètres suvants (dans le <head> j'imagine ?) : 

$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100,
});


Donc j'ai quelque chose dans <head> qui ressemble à ceci : 

<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1-pack.js"></script>
<script type="text/javascript" src="galleryview/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
<script type="text/javascript" src="galleryview/jquery.timers-1.2.js"></script>

<script type="text/javascript">
	$('#gallery').galleryView({
		gallery_width: 800,
		gallery_height: 600,
		frame_width: 120,
		frame_height: 90,
		pause_on_hover: true
	});	
	</script>


Simplement je ne comprends pas comment l'intégrer dans mon html ? Où se fait l'appel aux images ?

Faut-il que j'insère le code suivant dans mon html ? : 

<div id="photos">
<div class="panel"><img src="galleryview/img/camp_1.jpg" alt="image1" /></div>
<div class="panel"><img src="galleryview/img/camp_2.jpg" alt="image2" /></div>
<div class="panel"><img src="galleryview/img/camp_3.jpg" alt="image3" /></div>
<div class="panel"><img src="galleryview/img/camp_4.jpg" alt="image4" /></div>

<div class="strip_wrapper">
<ul class="filmstrip">
<li class="frame"><div class="img_wrap"><img src="galleryview/img/camp_1.jpg" alt="image1" /></div></li>
<li class="frame"><div class="img_wrap"><img src="galleryview/img/camp_2.jpg" alt="image2" /></div></li>
<li class="frame"><div class="img_wrap"><img src="galleryview/img/camp_3.jpg" alt="image3" /></div></li>
<li class="frame"><div class="img_wrap"><img src="galleryview/img/camp_4.jpg" alt="image4" /></div></li>
</ul>
</div>
</div>


Parceque là ça ne marche pas : les images prennent "la place qu'elles doivent prendre" mais ne sont pas affichées :/

Quelqu'un peut-il m'aider ? Merci d'avance !
A voir également:

4 réponses

Réponse 1 / 4
Foiesgras Messages postés 21 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 10 juin 2010 5
8 juin 2010 à 11:30
Je n'ai pas une réponse précise à te donner, mais peut-être une piste.

Le code suivant que tu as placé dans ton head, permet d'initialiser une galerie.
Je te propose de remplacer ton code part : 

$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100,
});


et pour l'html : 
<div id="photos" class="galleryview">
<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>


Mais c'est sans garantie.
0
Réponse 2 / 4
El
8 juin 2010 à 11:36
Merci de ta réponse, mais malheureusement cela ne fonctionne pas :/

Les fonctions semblent bonnes ?

Serait-ce un problème de CSS ? :/
0
Réponse 3 / 4
Foiesgras Messages postés 21 Date d'inscription lundi 7 juin 2010 Statut Membre Dernière intervention 10 juin 2010 5
8 juin 2010 à 11:43
Utilise Firefox et l'outil Firebug pour visionner ta page, tu pourras déjà identifier s'il y a un problème javascript.

Essai aussi de prendre un exemple de la personne qui édite cette galerie, le plus simple possible et essai de partir de là pour créer ta propre galerie.

Je ne pense pas que ça soit des CSS.

Vérifie également que tes chemins d'accès à tes fichiers et tes images sont justes et qu'ils sont bien chargés.
0
Réponse 4 / 4
The prince
23 juil. 2010 à 12:43
Bon, voici ce que tu dois faire pour que çà marche:

1- télécharger le script Jquery sur le site https://jquery.com/
après téléchargement, il existe un fichier js dedans, il faut que tu l'appelle dans ta page (ex: <script type="text/javascript" src="tu indique ici la source"></script>
) dans la balise <head></head>

2- tu relie ta page html avec le css que tu trouve dans le plugin galleryview que tu as téléchargé sur http://spaceforaname.com/galleryview :
<link href="galleryview-2.1.1/galleryview.css" rel="stylesheet" type="text/css" />

3- tu appelle le plugin dans ta page (dans la balise <head>):
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1-pack.js"></script>
<script type="text/javascript" src="galleryview/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
<script type="text/javascript" src="galleryview/jquery.timers-1.2.js"></script>

...
4- tu effectue ensuite le paramètrage (toujours dans head):
<script type="text/javascript">
$(document).ready( function() {
$('#photos').galleryView({
gallery_width: 800,
gallery_height: 600,
frame_width: 120,
frame_height: 90,
pause_on_hover: true
})
})
</script>

5- dans <body>, tu appelles sous forme de liste tes images
ex:
<div id="photos" class="galleryview">
<ul>
<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>


Si tu suis bien ces étapes, c'est sûre que çà va marcher!!!
Alors amuse-toi bien!!!
0

Discussions similaires

Mode d'utilisation de la caméra V380 en français
delacree -
Gigi -

14 réponses
Comment faire une installation FIBRE/RJ45 par FREE
Nad9475 -
Pierrecastor -

36 réponses
Fibre et raccordement de mes prises RJ45
Bdam76 -
Bdam76 -

6 réponses
Fibre et câblage ethernet dans un logement ancien
Xelette -
brupala -

14 réponses
installer imprimante canon pixma MG2550 sans le CD
Tolo -
glg29 -

2 réponses