0

これで楽しんでいます

Colorbox を使用して、メイン ページに画像を表示せずに URL が JSON 呼び出しを介して読み込まれる画像のギャラリーを読み込もうとしています

http://www.jacklmoore.com/demo/flickr.htmlで flickr の例をクロールしました 。

いくつかのルートを試してみたところ、コードは半機能しています

var links = $()
    ,link
    ,img
;

$.getJSON('http://URL/json.json', function(data) {

    $.each(data, function(index, photo) {
        link = $('<a/>', {
            href: photo.url
            ,title: photo.name
        });

        img = $('<img/>').attr({
            src: photo.url
            ,alt: photo.name
        }).appendTo(link);

        links = links.add(link);
    });

    $('#gallery-holder').html(links);
});

$.colorbox({
    rel: 'gallery'
    ,inline: true
    ,href: '#gallery-holder'
});

/*
$.colorbox({
    html:links
    ,rel: 'gallery'
    ,inline: true
});
*/

JSONは次のようになります

[
   {
      "url":"http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-1_large.jpg",
      "name":"1420 Magnolia (1)"
   },
   {
      "url":"http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-10_large.jpg",
      "name":"1420 Magnolia (10)"
   },
   {
      "url":"http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-11_large.jpg",
      "name":"1420 Magnolia (11)"
   }
]

非表示の div を構築する

の中へ

<div style="display: none;" id="gallery-holder">
    <a href="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-1_large.jpg" title="1420 Magnolia (1)">
        <img src="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-1_large.jpg" alt="1420 Magnolia (1)">
    </a>
    <a href="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-10_large.jpg" title="1420 Magnolia (10)">
        <img src="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-10_large.jpg" alt="1420 Magnolia (10)">
    </a>
    <a href="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-11_large.jpg" title="1420 Magnolia (11)">
        <img src="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-11_large.jpg" alt="1420 Magnolia (11)">
    </a>
</div>

ただし、コンソールでコードを実行すると、コンテナ div を隠し要素として保持しているカラーボックスが表示されます。オブジェクトをインライン HTML として渡そうとすると、何も表示されません。

非表示の div の内部 HTML をカラーボックスに渡してギャラリーに解析する方法を知っている人がいたら、興味がありますか?

4

1 に答える 1

1

非表示の div 内のリンクは必要ありません。リンクを表示すると、colorbox に href 値 (画像) が表示されます。

例を詳しく見ると、リンクにサムネイルが追加され、それらのリンクが配列に追加されていることがわかります。次に、配列がカラーボックス化されます。カラーボックスはリンクのクリックをインターセプトし、(href で) 画像をロードするのではなく、画像をカラーボックスに表示します。

これにはいくつかの方法がありますが、画像へのリンクが最も簡単です。目的を達成するには、コードは次のようになります。

var links = $(), link;

$.getJSON('http://URL/json.json', function(data) {

    $.each(data, function(index, photo) {
        link = $('<a/>', {
            href: photo.url,
            title: photo.name,
            text: photo.name
        });

        links = links.add(link);
    });
});

links.colorbox({rel:'gallery', speed:0});

$('#gallery-holder a').append(links);

HTML は次のようになります。

​&lt;div id="gallery-holder"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​

そして、次のようになります。

<div id="gallery-holder">
    <a href="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-1_large.jpg" title="1420 Magnolia (1)" class="cboxElement">1420 Magnolia (1)</a>
    <a href="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-10_large.jpg" title="1420 Magnolia (10)" class="cboxElement">1420 Magnolia (10)</a>
    <a href="http://s3.amazonaws.com/ACCOUNT/media/photos/1420-magnolia-11_large.jpg" title="1420 Magnolia (11)" class="cboxElement">1420 Magnolia (11)</a>
</div>

サムネイルがある場合は、テキストの代わりにそれらを使用できます。

それがどのように機能するかを示すために、私はjsfiddleを作成しました。あなたが含めた画像パスは偽物です（あなたが知っていると確信しています）ので、ランダムな画像を使用しましたが、フィドルを実際の画像パスに置き換えると、実際にそれを見ることができます.

于 2012-05-25T04:54:14.103 に答える