web-dev-qa-db-ja.com

jqueryライトボックスに1つのリンクから複数の画像を開かせるにはどうすればよいですか？

ColorBox または jQuery Lightbox Plugin のようなライトボックスを使用すると、ギャラリー/画像の配列を開く単一のリンクを作成できますか？

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

私の考えでは、通常の1つの画像への1つのリンクを実行してから、jqueryを使用して最初のリンクを除くすべてを非表示にします。より良い方法があるに違いありませんか？

ありがとう。

javascriptjqueryhtmllightbox
10
Ritchie

これが適切な（そしてより効率的な）ソリューションです：

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ライトボックスは自動的に残りの画像を非表示にしてからそれぞれを表示します適切なタイミングで。

33
Jake Wilson

JQueryライトボックスプラグインを使用すると、サンプルコードは次のことを行うように指示します。

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

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

（例はここにあります： http://leandrovieira.com/projects/jquery/lightbox/#example ）

3
JJ Geewax
<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

そう：

rel="lightbox[renovation]"
1
tina martin

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

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

0
Alexis Abril