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