0

一直玩这个

尝试使用 Colorbox 加载通过 JSON 调用加载 URL 的图像库，而不在主页上显示图像

在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>

但是，当我在控制台中运行代码时，它会显示一个颜色框，当我尝试将对象作为内联 HTML 传递时，它会将容器 div 作为隐藏元素保存，它什么也不显示

好奇是否有人知道如何将隐藏 div 的内部 HTML 传递到颜色框以解析为画廊？

4

1 回答 1

1

您不希望隐藏 div 中的链接。您希望显示链接，然后颜色框将显示 href 值（图像）。

如果您仔细查看示例，您会发现正在发生的事情是链接添加了缩略图，然后将这些链接添加到数组中。然后对数组进行颜色框处理。Colorbox 拦截链接点击，而不是加载图像（在 href 中），图像显示在 colorbox 中。

有几种方法可以解决这个问题，但图片链接是最简单的。为了实现你想要的，代码应该是这样的：

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 回答