0

カルーセル スタイルのポートフォリオを作成するために、ポートフォリオjs プラグインを選択しました。しかし、プラグインにズーム機能が組み込まれていないことがわかりました。jquery コードが比較的複雑なため、手動でズーム (より正確にはファンシーボックス) 機能をギャラリーに追加する方法がわかりません。「lightbox=true」初期化オプションは、ギャラリー内の他の画像を暗くするだけで、選択した画像をズームしません。

理想的には、fancybox 機能をギャラリーに追加したいと考えています。たとえば、html は次のようになります。

    <div id="gallery">
        <a href="someimage.jpg" class="fancybox"> <img src="someimage.jpg></img> </a>              
        <a href="someimage2.jpg" class="fancybox"> <img src="someimage2.jpg></img> </a>
    </div>

ただし、portfoliojs のギャラリーは、(間にレベルがない) の子要素である場合にのみ機能します。

   <div id="gallery">
         <img src="someimage.jpg></img>               
         <img src="someimage2.jpg></img>
    </div>

<img>要素をラップしようとしまし<a>たが、うまくいきませんでした。

コードを大幅に書き直すことなく、2 つのプラグイン (portfoliojs と fancybox) の機能を組み合わせる方法はありますか? 代替案は何ですか？

4

1 に答える 1

1

これが私がすることです。

このようなhtmlを持つ：

<div id="gallery">
    <img src="images/01.jpg" alt=""/>
    <img src="images/02.jpg" alt=""/>
</div>

属性がsrcfancyboxに表示される画像を指している場合、次のコードを使用します：

var images = [];
$("#gallery").find("img").each(function(i){
    images[i] = $(this).attr("src");
    $(this).bind("click", function(){
        $.fancybox(images,{
            index: i
        });
    })
});

JSFIDDLEを参照してください

注.on()：代わりに（推奨）を使用できます.bind()：

$(this).on("click", function(){ ...

ただし、jQuery 1.7+ が必要です。更新されたJSFIDDLEを参照してください

于 2013-09-07T21:24:30.110 に答える