0

我正在使用基于本教程的手工制作的 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>

我正在考虑使用 title 或 alt 属性，但我不知道如何：/

任何提示或想法都会很棒。

多谢你们 ！

4

1 回答 1

0

您应该使用标题的 alt 属性将其放入一个变量中，然后在您的图库中的标题元素中调用该变量。例如像这样

 caption = $('img').attr("alt").text();
 $('.whatever you call your caption element').text(caption);
于 2013-11-04T19:59:53.037 回答