使用JSON的Colorbox画廊 [英] Colorbox gallery using JSON

问题描述

曾经很喜欢这个

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

Trying to use Colorbox to load a gallery of images where the URL's are loaded via JSON call without displaying the images on the main page

在以下位置查看了flickr的示例 http://www.jacklmoore.com/demo/flickr.html

crawled over the example for flickr at http://www.jacklmoore.com/demo/flickr.html

尝试了许多路线，使我的代码可以半工作

having tried a number of routes I've got the code semi-working with

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

which builds the hidden 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传递时，它什么也不显示

However when I run the code in console it displays a colorbox that is holding the container div as a hidden element when I try passing the object as the inline HTML it displays nothing

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

Curious if anyone has an idea how I can pass the inner HTML of the hidden div to colorbox to be parsed into a gallery?

推荐答案

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

You don't want the links within a hidden div. You want the links shown and then colorbox will display the href value (the image).

如果您仔细查看该示例，将会看到发生的情况是链接上添加了缩略图，然后将这些链接添加到了数组中.然后将数组进行颜色盒化. Colorbox会拦截链接点击，而不是加载图像(在href中)，而是将图像显示在colorbox中.

If you look closer at the example, you will see that what is happening is the links have a thumbnail added to them, then those links are added to the array. The array is then colorbox'd. Colorbox intercepts the link clicks and rather than loading the image (in the href) the image is shown in the colorbox.

有两种方法可以解决此问题，但是链接到图像是最简单的.要实现所需的代码，代码应如下所示:

There are a couple ways you could go about this, but links to images is the easiest. To achieve what you want, the code should look something like this:

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应该如下所示:

The HTML should look like this:

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

如果您有缩略图，则可以使用缩略图代替文本.

If you have thumbnails you could use those instead of the text.

只是为了向您展示它是如何工作的，我创建了一个 jsfiddle .您所包含的图像路径是伪造的(我确定您知道)，因此我只是使用随机图像，但是如果您将小提琴替换为真实的图像路径，则可以看到它的作用.

Just to show you how it would work, I created a jsfiddle. The image paths you included are fake (I am sure you know) so I just used random images, but if you replace the fiddle with real image paths you can see it in action.

这篇关于使用JSON的Colorbox画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！