Discussion :

[special sauce]

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

[nadox]

Bonjour,

La réponse à la question est oui.

Comme le tuto le dit à la fin :

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!

[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

[nadox]

Oui oui c'est quelque chose dans ce genre !

[special sauce]

bon

tu ne m'aideras pas, je le sens

[special sauce]

peut-être qu'en remplaçant

Code :

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

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

[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...
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.

[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

[nadox]

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

Donc tu n'as pas besoin d'aide ?

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 ?

[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

[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/

[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.

[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

[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 ?

[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é

[nadox]

Bon bon,

Ce code devrais faire l'affaire :

Code javascript :

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
 
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)

[special sauce]

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

[ezhox]

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 html :

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

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 !