-2

私は自分のウェブサイトでこのスクリプトhttps://stackoverflow.com/a/8855410/1055987を使用していますが、これを編集したいのですが、方法がわかりません。データベースから画像を取得するスクリプトを作成したいのですが、このように書きたくないのですが、可能ですか? 通常の fancybox は rel="group" を追加するだけですが、機能しません。解決策はありますか？

[
{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}
]
4

1 に答える 1

0

すでに ajax を介して一連の画像を呼び出しているため、たとえば返された場合

{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}

...そして、一連のサムネイルがあり、それぞれがajax呼び出しの各画像に対応しているとします

<div class="thumbs">
    <img src="images/01_thumb.jpg" alt="" />
    <img src="images/02_thumb.jpg" alt="" />
    <img src="images/03_thumb.jpg" alt="" />
</div>

...サムネイルを で囲んでいることに注意してください...次に、クリックされた親指（）をキャッチし、対応する画像から始まるファンシーボックスを開く必要があります。divclass="thumbs"index

$('.thumbs img').click(function () {
    var startWith = $(".thumbs img").index(this)
    $.fancybox(myAjaxCall, {
        type: "image",
        index: startWith
    }); // fancybox
}); // click

...メソッドを使用してクリックされた親指を取得したことに注意してくださいindex()

var startWith = $(".thumbs img").index(this);

...そしてAPIオプションindexを使用して、ギャラリーを起動する画像をfancyboxに伝えました。

JSFIDDLEを参照してください

于 2013-01-21T00:43:35.787 に答える