使用JSON的Colorbox库
一直在玩这个
尝试使用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 = $('', { href: photo.url ,title: photo.name }); 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
成
但是，当我在控制台中运行代码时，它显示一个颜色框，当我尝试将对象作为内联HTML传递时，它将容器div作为隐藏元素保存，它不显示任何内容
好奇，如果有人知道如何将隐藏div的内部HTML传递给colorbox进行解析？
您不希望隐藏div中的链接。 您想要显示的链接然后颜色框将显示href值（图像）。
如果仔细观察该示例，您将看到发生的情况是链接添加了缩略图，然后将这些链接添加到数组中。 然后该数组被彩色。 Colorbox截取链接点击，而不是加载图像（在href中），图像显示在颜色框中。
有几种方法可以解决这个问题，但最简单的方法是链接到图像。 要实现您想要的，代码应该如下所示：
var links = $(), link; $.getJSON('http://URL/json.json', function(data) { $.each(data, function(index, photo) { link = $('', { 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应该如下所示：
应该是这样的：
如果您有缩略图，则可以使用这些缩略图而不是文本。
为了向您展示它是如何工作的，我创建了一个jsfiddle 。 你包含的图像路径是假的（我相信你知道）所以我只是使用了随机图像，但是如果用实际图像路径替换小提琴，你可以看到它的实际效果。