Une galerie utilisable plusieurs fois

Version imprimable

20/03/2011, 16h37
special sauce

Une galerie utilisable plusieurs fois

salut, graphiste de formation, je crée actuellement mon site perso, j'ai trouvé cette galerie Jquery .

peut-on modifier le .js pour exploiter cette galerie x fois sur une seule page ?

par avance, merci pour votre aide
20/03/2011, 16h59
nadox

Bonjour,

La réponse à la question est oui.

Comme le tuto le dit à la fin :

Citation:

Pour aller plus loin, nous pourrions faire de ce script un plugin jQuery, proposer des options de configuration, implémenter un système de navigation suivant/précédent et bien d'autres choses encore. N'hésitez pas à améliorer ce script et, pourquoi pas, poursuivre votre découverte de jQuery!
20/03/2011, 18h02
special sauce

je ne peux pas aller plus loin (je suis graphiste, autant dire, un idiot intégral...)

j'imagine qu'il faut remplacer l'id unique spécifié dans le code, par une variable...quelque chose dans le genre
20/03/2011, 18h05
nadox

Oui oui c'est quelque chose dans ce genre !
20/03/2011, 18h09
special sauce

bon

tu ne m'aideras pas, je le sens

peut-être qu'en remplaçant

Code:

1
2
3
4
5
6
7
8
 
$("#"+settings.thumbListId)
 
par 
 
$('.galerie')
 
...

20/03/2011, 18h18
nadox

Si tu me dit que tu veux faire un plugin jQuery à partir de cette exemple, je peux t'aider.
Mais si tu veux juste que je te donne le code...:lol:
En fin de compte, il "suffit" d'en faire un objet que tu pourra instancier plusieurs fois avec des 'settings' différents.

Ou sinon une méthode qui marchera tout de même : copier-coller le script autant de fois que tu auras de galleries, en donnant des settings différents.
20/03/2011, 18h29
special sauce

je ne pensais pas réaliser un plugin Jquery, j'en serai incapable...j'aimerai simplement modifier un peu ce code existant, qui n'est pas très long (gallery.js), pour afficher x galeries d'images dans une div class "galerie" utilisable à l'infini

c'est ce qu'on appelle "instancier" dans le jargon du développement, je crois l'avoir compris...inutile de modifier les settings, c'est plutot le target qu'il faut changer

enfin voila
20/03/2011, 19h43
nadox

Citation:

Envoyé par special sauce

inutile de modifier les settings, c'est plutot le target qu'il faut changer

Donc tu n'as pas besoin d'aide ?:roll:

Ton idée est plutôt bonne sur le principe.
Sauf que si tu peux facilement faire en sorte que la cible ne soit pas un élément mais plusieurs (en utilisant une classe plutôt que des id), tu auras un problème avec imgViewerId: "viewer" qui sera relatif à un diaporama et non aux autres.(pas possible d'utiliser une classe, puisqu'on ne sait pas quel élément doit servir à afficher le détail de ce diaporama)

C'est la raison pour laquelle je parlais des 'settings'(tableau) qui sont utilisés pour savoir quelles sont les éléments HTML utilisés sur un diaporama.

Mais sinon pourquoi ne pas utiliser un plugin existant ?
20/03/2011, 21h16
special sauce

Je me sens un peu stupide quand je lis ton message et cette façon un brin professorale de souligner certains mots...je plaisante

Je n'ai pas trouvé de galerie jquery (avec miniatures) autorisant plusieurs instances sur une seule page, je cherche encore (je dois mal chercher)

Pour l'instant j'utilise lightbox, mais le résultat n'est pas satisfaisant, l'ouverture des images sur un mode "popup" peut agacer l'utilisateur

Mais si je ne trouve pas une solution, je me contenterai de ça...

Bref, bonne soirée à toi, et merci
20/03/2011, 22h12
danielhagnoul

Bonsoir

Avant de réinventer la roue, je vous signale que des plugins "Image Gallery/Slider" incluant démonstrations, documentation et API, il en existe déjà pour tout les goûts ! Vous trouverez sûrement votre bonheur dans les listes suivantes :

http://webdesignledger.com/tutorials...-and-tutorials

http://vandelaydesign.com/blog/web-d...age-galleries/
20/03/2011, 22h30
nadox

Je te présente mes excuses si je t'ai paru un peu trop professoral, mais il y a surement un malentendu sur l'utilité de ce forum ?
Si tu rencontre des problèmes de développement et/ou d'utilisation de javascript, je peux essayer de t'aider. :ccool:
20/03/2011, 23h39
special sauce

Je peux te t'aider...
Tu peux de m'aider ?
Tu peux m'aider ?
Je sais qu'il existe un tas de slideshow jquery ou mootols, celui ci me semblait assez simple à mettre en oeuvre, le .js est plutôt concis, l'effet de transition est joli etc., je cherche simplement un moyen rapide pour exploiter cette galerie sur mon site, mes compétences en développement étant quasi nulles, je sollicite ici l'expertise de personnes compétentes en programmation, voila tout

Donc voila, je pensais que quelqu'un parmi vous m'aurait simplement conseillé de faire ceci et cela, mettre un b à la place du a, un $ ici, un ; là et hop

Mais c'est surement plus compliqué

Je vais tester gallerific
21/03/2011, 10h32
nadox

Assez simple à mettre en oeuvre, oui.
Sauf que tu ne veux pas simplement le mettre en oeuvre !

J'ai répondu à ta question initiale, non ?

Je n'ai vu nulle part écrit ici "service sur mesure", j'ai raté quelque chose ?
22/03/2011, 17h47
special sauce

oui, je dois le customiser un peu, c'est tout le problème
J'utilise la plupart du temps, du javascript, tel quel, sans bouleverser tout le code pour le rendre utilisable selon mes besoins, je change le plus souvent un ou deux paramètres, rien de très difficile

Mais ici, je suis tout bonnement incapable de modifier ce code pour mon projet de site web, c'est rageant...d'autant que je ne rencontre personne ici qui me propose spontanément une solution

nadox par exemple, qui reste très sybillin quant à la solution, j'évoque une piste, j'attends fébrilement qu'il complète mon idée, l'illustrant d'un exemple précis, clair et compréhensible, en vain...

nadox, pourrais-tu me proposer une solution contre une rémunération ?
via paypal

je ne plaisante pas

je vais me faire un café

Bon bon,

Ce code devrais faire l'affaire :

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
 
jQuery(function($){
	// définition du plugin
	$.fn.special_sauce_gallery = function(options) {
 
	  // définition des paramètres par défaut
	  var defaults = {
		activeClass: "active",
		activeTitle: "Photo en cours de visualisation",
		loaderTitle: "Chargement en cours",
		loaderImage: "images/loader.gif"
	  };
 
	  // mélange des paramètres fournis et des paramètres par défaut
      var settings = $.extend(defaults, options);
 
 
		function initGallery(ul)
		{
		  var thumbLinks = $(this).find("a"),
			  firstThumbLink = thumbLinks.eq(0),
			  highlight = function(elt){
				thumbLinks.removeClass(settings.activeClass).removeAttr("title");
				elt.addClass(settings.activeClass).attr("title",settings.activeTitle);
			  },
			  loader = $(document.createElement("img")).attr({
				alt: settings.loaderTitle,
				title: settings.loaderTitle,
				src: settings.loaderImage
			  });
 
		  highlight(firstThumbLink);
			var imgViewer = $(document.createElement("p")).attr("class","viewer")
				.append(
				$(document.createElement("img")).attr({
				  alt: "",
				  src: firstThumbLink.attr("href")
				})
			  );
			$(this).after(imgViewer);
 
			var bigPic = imgViewer.children("img");
 
		  thumbLinks
			.click(function(e){
			  e.preventDefault();
			  var $this = $(this),
				  target = $this.attr("href");
			  if (bigPic.attr("src") == target) return;
			  highlight($this);
			  imgViewer.html(loader);
			  bigPic
				.load(function(){
				  imgViewer.html($(this).fadeIn(250));
				})
				.attr("src",target);
			});
		}
 
		$(this).each(initGallery);
 
        // interface fluide
        return $(this);
	};
 
	// utilisation du plugin
	$(document).ready(function() {
		$(".thumbs").special_sauce_gallery({
			activeClass: "ssg_active",
			activeTitle: "special sauce galery : Photo en cours de visualisation",
			loaderTitle: "special sauce galery : Chargement en cours",
			loaderImage: "images/ssg_loader.gif"
		});
	});
});

Edit : Au final, si je restais sibyllin dans mes réponses, c'est que je cherchais à t'aiguiller, mais qu'il s'agit de mon premier plugin jQuery ;).
(certains reconnaîtront peut-être dans les commentaires du code un vilain copier/coller provenant de ce tutoriel Javascript : tuto)

24/03/2011, 19h21
special sauce

Salut, je n'ai pas encore eu l'occasion d'essayer ton code, demain surement, je te remercie pour ton aide

caption

Salut !

Premièrement, merci à nadox pour ce plugin qui m'a été fort utile. Deuxièmement, j'aimerais demander un coup de main pour y ajouter une caption pour chaque images.

L'idée est de récupérer le champ alt de l'image en cour de visualisation et de l'afficher au clic sur la miniature en même temps que sa grande image correspondante. Ou d'ajouter une balise span à l'image ou au lien, je ne sais pas ce qui serait le plus pratique.

J'ai bien compris qu'il faut récupérer tous les alt (ou span) des images sous forme d'une liste, créer un conteneur pour ensuite l'afficher mais je n'y parviens pas. :?

La structure simplifié de mon html :
Code:

1 2 3 4 5 6 7 8 <div id="bloc_page"> <div id="contenu"> <div class="item"> <div class="galerie"> <div class="thumbs"> <div class="mini"> <li><a href="images/galerie/illus/big/illus1.jpg" title="titre illus 1"> <img alt="Description illus 1" src="images/galerie/illus/small/mini1.jpg" /></a></li> <li><a href="images/galerie/illus/big/illus2.jpg" title="titre illus 2"> <img alt="Description illus 2" src="images/galerie/illus/small/mini2.jpg" /></a></li>
Et le js correspondant est à quelque chose près celui suggéré par nadox. ;)

Merci du coup de pouce !