Question

玩得很开心

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

抓住了flickr的示例 http://www.jacklmoore.com/demo/flickr.html

尝试了一些路由，我已经将代码半工作了

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传递给colorbox以便解析成一个库，那就好奇了吗？

Answer 1

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

如果你仔细观察这个例子，你会发现正在发生的事情是链接上添加了一个缩略图，然后这些链接被添加到数组中。然后该阵列被彩色框。 Colorbox拦截链接点击，而不是加载图像（在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应如下所示：

<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。你包含的图像路径是假的（我相信你知道）所以我只使用了随机图像，但是如果用实际图像路径替换小提琴，你可以看到它的实际效果。

使用JSON的Colorbox库

1 个答案: