11499 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

J'utilise un plugin jquery basé sur le tuto d'alsacreation : http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

J'essaye en vain d'ajouter une caption aux images en cours de visualisation, en essayant de récupérer le champs alt.

Mon plugin jquery :
jQuery(function($){
	// définition du plugin
	$.fn.ben_galerie = 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: "/ben/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"), //référence toutes les vignettes cliquables dans un tableau
			  firstThumbLink = thumbLinks.eq(0), //et extrait le premier élément
			  //listeLinks = $(this).find("li"),
			  highlight = function(elt){
				thumbLinks.removeClass(settings.activeClass).removeAttr("title"); //supression de l'attribut title
				elt.addClass(settings.activeClass).attr("title",settings.activeTitle); //ajout du nouvel attribut title pour l'image en cours de visualisation
			  },
			  loader = $(document.createElement("img")).attr({ //chargement des parametres du loader
				alt: settings.loaderTitle,
				title: settings.loaderTitle,
				src: settings.loaderImage
			  });
 
		  highlight(firstThumbLink);
			var imgViewer = $(document.createElement("p")).attr("class","viewer") //creation d'un paragraphe qui fera office de récepteur pour les images grand format
				.append(
				$(document.createElement("img")).attr({ //extraire le contenu de l'attribut href de la première vignette photo
				  alt: "",
				  src: firstThumbLink.attr("href") //et le renseigner en tant que valeur de l'attribut src d'un nouvel objet image créé
				})
			  );
			$(this).after(imgViewer);
 
			var bigPic = imgViewer.children("img");
 
		  thumbLinks //fonction qui sera déclenchée au clic sur chaque élément ciblé
			.click(function(e){
			  e.preventDefault(); //annule l'événement par défaut lors du clic sur le lien 
			  var $this = $(this), //$(this) = vignette cliquée et stocké dans $this pour ne pas parcourir pls fois le DOM
				  target = $this.attr("href");
			  if (bigPic.attr("src") == target) return;
			  highlight($this);
			  imgViewer.html(loader);
			  bigPic
				.load(function(){
				  imgViewer.html($(this).fadeIn(250));
				  alert(caption);
				})
				.attr("src",target);
			});
		}
 
		$(this).each(initGallery);
 
        // interface fluide
        return $(this);
	};
 
	// utilisation du plugin
	$(document).ready(function() {
		$(".thumbs").ben_galerie({
			activeClass: "ssg_active",
			activeTitle: "ben galerie : Photo en cours de visualisation",
			loaderTitle: "ben galerie : Chargement en cours",
			loaderImage: "images/loader.gif"
		});
	});
});

//////////////
// Onglets //
////////////

$(function() {
	$('#onglets').css('display', 'block');
	$('#onglets').click(function(event) {
	var actuel = event.target;
	//if (!/li/i.test(actuel.nodeName) || actuel.className.indexOf('actif') > -1) {
	//	alert(actuel.nodeName)
	//	return;
	//}
	$(actuel).addClass('actif').siblings().removeClass('actif');
	setDisplay();
	});
function setDisplay() {
	var modeAffichage;
	$('#onglets li').each(function(rang) {
	modeAffichage = $(this).hasClass('actif') ? '' : 'none';
	$('.item').eq(rang).css('display', modeAffichage);
	});
}
setDisplay();
});


Et la une partie du html correspondant :
<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>
</div></div></div></div></div>


Est ce que quelqu'un à déjà fait l'ajout de cette fonctionnalité a cette galerie ? Ou une idée de comment procéder ?

Merci !