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 に答える