Question

Been having fun with this one

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

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
});
*/

the JSON looks like

[
   {
      "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)"
   }
]

which builds the hidden div

into

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

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

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?

Answer 1

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).

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);

The HTML should look like this:

​<div id="gallery-holder"></div>​​​​​​​​​​​​​​​​​​​​​​​​​​​

And should turn out like this:

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

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.