1

複数のアルバムで画像ギャラリーを作成しました。各アルバムには異なる数の写真が含まれています。2つのファンシーボックスの動作を取得しようとしています

要件 1 - アルバムの主要な画像をクリックすると、豪華なボックスが開き、すべてのアルバムの主要な画像をナビゲートします。私はこの部分を機能させました

Req 2 - すべてのアルバムの下に、アルバム内の写真の数を表示するアンカー タグがあります。このアンカー タグをクリックすると、ファンシー ボックスはその特定のアルバムの写真のみをナビゲートする必要があります。このアンカー タグをトリガー ファンシー ボックスにバインドし、アルバム内の画像をナビゲートする方法がわかりません。静的 json ファイルがあり、2 つの属性primaryPhotoとimagesContained(array).

誰かがこれを乗り越える方法を教えてくれませんか?

$.each(data.gallery,function(i,item) {
 $.each(item.albums, function(i,photos) {
        imageFolder = sec.mediumUrl;
        imgInsert += '<a href="' + photos + '" class="grouped_elements" rel="Gallery' + count + '" class="big_img"'  +'">';
    });
    '<a href="' + imgThumb + '" class="description2" title="Hello world">' + count + '</a></div>'; 
    count++;
});

このようにアクセスしようとしています

$("a.description2").click(function() {
 $("a.grouped_elements").fancybox({
                'transitionIn': 'none',
                'transitionOut': 'none',
                'titlePosition': 'over',
                'titleFormat': function (title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

});
4

2 に答える 2

0

あなたの要求のために 2

私は自分のプロジェクトでこの問題に一日中取り組んできましたが、解決策を思いつきました。

これがあなたのページのギャラリーだとしましょう:

<a id="Gallery_1" rel="gallery1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a rel="gallery1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>

*ギャラリー 1 の最初のリンクに「Gallery_1」という ID を追加したことに注意してください*

次に、ギャラリーの下にあるテキストには、次の JavaScript を使用します。

<a style="cursor: pointer;" onclick='$("a#Gallery_1").trigger ("click");'>Your Link Text</a>

これは私にとって完璧に機能しました。それが役に立てば幸い！

于 2012-06-25T23:03:11.140 に答える
0

基本的に、HTML でレンダリングされたコードは次のようになります。

アルバム 1:

<a class="grouped_elements" rel="gallery1" href="image01.jpg" title="title01"><img src="thumb01.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery1" href="image02.jpg" title="title02"><img src="thumb02.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery1" href="image03.jpg" title="title03"><img src="thumb03.jpg" alt="" /></a>

等

アルバム 2:

<a class="grouped_elements" rel="gallery2" href="image10.jpg" title="title10"><img src="thumb10.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery2" href="image11.jpg" title="title11"><img src="thumb11.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery2" href="image12.jpg" title="title12"><img src="thumb12.jpg" alt="" /></a>

等

アルバム 3:

<a class="grouped_elements" rel="gallery3" href="image20.jpg" title="title20"><img src="thumb20.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery3" href="image21.jpg" title="title21"><img src="thumb21.jpg" alt="" /></a>
<a class="grouped_elements" rel="gallery3" href="image22.jpg" title="title22"><img src="thumb21.jpg" alt="" /></a>

等

relすべてのアルバムが同じ属性を共有しているにもかかわらず、各アルバムには異なる属性classが設定されていることに注意$("a.grouped_elements").fancybox({// options here})してください。

ここで、異なるリンク（例のようにアルバム内の写真の数を表示するアンカータグ）から各アルバムを起動するために、同じclassものを共有するが異なるアルバムごとにアンカーを設定しますID（@RevCocneptの提案）悪い考えではありませんでした。）

<a id="gallery1" class="description2" href="javascript:;">open album 1</a>
<a id="gallery2" class="description2" href="javascript:;">open album 2</a>
<a id="gallery3" class="description2" href="javascript:;">open album 3</a>

それぞれの値が、対応するアルバムの値IDとまったく同じであることに注意してください。rel

これで、これら 3 つのアンカーに単一のスクリプトを使用して、それらの shared をターゲットにすることができますclass。

$(".description2").click(function(){
 $('.grouped_elements[rel="'+this.id+'"]').eq(0).trigger("click");
});

最初の要素からギャラリーを開始していたことに注意してください.eq(0)。そうしないと、DOM に追加された最後の要素から開始されます。

于 2012-06-26T16:58:06.803 に答える