0

ファンシーボックスギャラリーテンプレートを使用しています。ヘッダーの nav 要素をクリックすると、rel="value" に一致するサムネイルが点灯します。複数のタグで同じサムネイルを点灯させるにはどうすればよいですか? 基本的には、次のようなものです: rel="value1 value2" 以下にリストしたコードは機能していません。rel="" に複数の値を持つ要素は、ナビゲーション ボタンが押されるたびに点灯します。私は何をすべきか？助けていただければ幸いです。

HTML:

<!-- .nav -->
  <ul class="nav">
    <li><a href="#" class="produce">Producing</a></li>
    <li><a href="#" class="design">Design</a></li>
    <li><a href="#" class="puppet">Puppetry</a></li>
    <li><a href="#" class="multimedia">Multimedia</a></li>
  </ul>
  <!-- /.nav -->
</div>
<!-- content -->
<div id="content">
    <!-- .thumbs -->
    <ul class="thumbs">
    <li class="first"><a href="images/images/h-slide4.jpg" rel="empty"><img src="images/images/h-thumb4.jpg" alt="description" /></a></li>
    <li></li>
    <li><a href="images/images/standin-slide1.jpg" rel="produce"><img src="images/images/sus-thumb7.jpg" alt="description" /></a></li>
    <li><a href="images/images/sus-slide1.jpg" rel="produce puppet"><img src="images/images/sus-thumb1.jpg" alt="description" /></a></li>
    <li><a href="images/images/sus-slide2.jpg" rel="puppet design"><img src="images/images/sus-thumb2.jpg" alt="description" /></a></li>
    <li><a href="images/images/sus-slide4.jpg" rel="multimedia"><img src="images/images/sus-thumb4.jpg" alt="description" /></a></li>
    <li><a href="images/images/sus-slide6.jpg" rel="produce multimedia puppet"><img src="images/images/sus-thumb6.jpg" alt="description" /></a></li>
    <li></li>

*** rel="empty" の最初のリスト要素については、そのサムネイルを点灯させたくありません。rel="" のままにしてみましたが、クリックするとサムネイルが点灯しました。他のリスト要素は、複数のタグで試みた例を示しています。

gallery.js:

$(".nav li a.produce").click(function(){

$("ul.thumbs").find("span").hide();
$(".nav li a").removeClass("current");
$("ul.thumbs a").css("opacity", "1");
$(this).addClass("current");
$("ul.thumbs a[rel=design], ul.thumbs a[rel=puppet], ul.thumbs a[rel=multimedia]").animate({opacity: ".2"}, "slow").parent().append("<span></span>");
        return false;
    });
4

2 に答える 2

3

なぜこれを使用relしているのか理解できません。属性を使用するclassと、より一致するように思えます。を使用する必要がある理由はありますrelか? あなたがそれを使用している方法が有効であるかどうかさえわかりません。

代わりにクラスを使用する場合は、前述と同じ方法で倍数を追加できます（機能しますclass = "puppet design"）。

于 2012-11-20T00:46:45.880 に答える
1

@Chrissiは正しいです（+1）。代わりにクラスを使用して、のどのクラスが選択contentした項目の と一致するかを比較できるようにする必要があります。classnav

基本的に 2 つの関数が必要です。

最初の1つ ：

  • navアイテムのクリックをキャッチ
  • から一致するクラスを検証しますcontent
  • それらのアイテムに属性を設定して、アイテムrelによって選択された同じギャラリーに属するようにしますnav

... それで ：

$('.nav a').on("click", function() {
    var className = $(this).attr("class"); // get class name of nav item
    var thisClass = "." + className; // builds a class selector from class name
    // get content items that matches the selector class and set the same rel attribute
    $(".thumbs a").filter(thisClass).attr({
        "rel": className,
        "title": className // optional
    }).first().trigger("click"); // fires gallery from first item
}); // on

2番目のもの：

  • content から fancybox へのすべてのセレクターをバインドします
  • ファンシーボックスで開かないようにフィルタリングしclass="empty"ます（何もしません）
  • relクローズ後に属性 (最初の関数で設定) を削除します

... それで ：

$(".thumbs a").fancybox({
    beforeLoad: function() {
        if ($(this.element).hasClass("empty")) {
            return false; // ignores item with class="empty"
        }
    },
    afterClose: function() {
        $(this.element).removeAttr("rel title"); // remove rel after close
    }
});​

最後の関数はすべてのコンテンツのアイテムを fancybox にバインドするため、それらが個別にクリックされた場合、どのギャラリーからも fancybox で開かれます。class="empty"

JSFIDDLEを参照してください

注:

  • .on()jQuery v1.7 以降が必要
  • このデモは fancybox v2.1.3+ を使用しています
于 2012-11-21T03:50:08.523 に答える