如何将标题添加到一个jQuery画廊

Question

我使用的是基于本教程一个手工制作的jQuery画廊：http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

我做了这个画廊的一个插件来使用它几次在同一个页面。

从这里，没有真正的问题。我的问题是，如何添加一个文本标题与这个插件。我已经尝试了很多东西而没有找到解决方案。

这里是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" 
    }); 
}); 

}）;

这里是相关的HTML的一部分：

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

我想使用的标题或alt属性，但我不知道如何：/

任何提示或想法会很棒。

谢谢你们！

Answer 1

你应该使用标题的alt属性把它放到一个变量中，并从你的图库的标题元素中调用该变量。例如类似这样的东西

caption = $('img').attr("alt").text(); 
$('.whatever you call your caption element').text(caption);