10

ColorBoxやjQuery Lightbox Pluginなどのライトボックスを使用して、ギャラリーや画像の配列を開く単一のリンクを作成するにはどうすればよいですか?

たとえば、サムネイルが1つあり、ユーザーがそれをクリックすると、ライトボックスに複数の画像が開き、ユーザーが次または前をクリックしてそのギャラリー内のすべての画像を表示できるようになります。

私の考えでは、通常の 1 つのリンクから 1 つの画像へのリンクとしてそれを行い、jquery を使用して最初のリンク以外をすべて非表示にします。もっと良い方法があるはずですか？

ありがとう。

4

5 に答える 5

34

適切な（そしてより効率的な）ソリューションは次のとおりです。

HTML:

<div id='gallery'>
    <a href="images/big-image1.jpg">
        <img src="images/thumbnail-image1.jpg"/>
    </a>
    <a href="images/big-image2.jpg" ></a>
    <a href="images/big-image3.jpg" ></a>
    <a href="images/big-image4.jpg" ></a>
</div>

jQuery/JS:

$(document).ready(function() {
    $('#gallery a').lightBox();
});

注:ご覧のとおり、ギャラリーに追加したい他の画像へのアンカー リンクをリストするだけです。マークアップに画像を追加して、JS で非表示にする必要はありません。上記のマークアップの例で表示される唯一の画像は、images/thumbnail-image1.jpgライトボックスは残りの画像を自動的に非表示にし、適切なタイミングでそれぞれを表示します。

于 2009-09-30T21:50:21.940 に答える
3

jQuery Lightbox プラグインを使用して、サンプル コードは次のことを行うように指示します。

$(document).ready(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
    $('#gallery a:gt(0)').hide();
});

これにより、すべてのリンクがライトボックスを開き、ギャラリーを閲覧するための [次へ/戻る] リンクが表示されます。それはあなたが探しているものですか？

(例はここにあります: http://leandrovieira.com/projects/jquery/lightbox/#example )

于 2009-09-15T17:09:36.743 に答える
1 
<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

そう：

rel="lightbox[renovation]"
于 2011-07-31T03:08:46.963 に答える
0

別のプラグインを使用することをお勧めします。PrettyPhotoはギャラリーに最適です。

于 2009-09-30T21:57:29.340 に答える
0

誤解かもしれませんが、ColorBox が提供する「集合写真」スタイルのギャラリー以上のことをしたいという印象を受けました。あなたが説明している次/前の機能についてはよくわかりませんが、最初は ColorBox なしでこの機能を作成することを考えています。

表示ギャラリーをページ内の通常の div に追加します。ギャラリーとその動作を好みに合わせてセットアップしたら、div でインラインで ColorBox を呼び出すことができます (ポップアップ内に新しく作成したコントロールを表示します)。

于 2009-09-15T17:09:14.467 に答える