Slimbox 从 javascript 帮助加载图像？

Question

我确实在网上查找了所有内容，但没有成功，所以现在我转向那些确切知道自己在做什么的人。

我正在从 facebook 加载图像，使用一个很好的小工具，它使用 jQuery 从粉丝页面上的某个专辑加载图像。

这是我目前正在处理的页面：http://www.sfssc.ca/houstonwehaveaproblem.html

我的问题是，我无法让页面底部的图像与 slimbox 一起使用。

这个脚本是

<script>
jQuery(document).ready(function() {
var AlbumID = "163187497033669";
var graph = "https://graph.facebook.com/" + AlbumID + "/photos?callback=?";
jQuery.getJSON(graph, function(data) {
var albumItem = [];
for(var key in data){
for(var key2 in data[key]){
val2=data[key][key2];
if(typeof(val2.source)!="undefined"){
albumItem.push(
'<li><a class="imageLink" rel="lightbox" href="' + val2.source + '" ><img src="' + val2.picture + '"/></a></li>'
);
};
};
};
jQuery('<ul />', {
'class': 'album',
html: albumItem.join('')
}).appendTo('#FBalbum');
});
});

</script>

我对该脚本所做的唯一更改是在第 12 行添加了 rel="lightbox"。当我进行研究时，我最有根据的猜测是它是一个名为 Ajax 的命令，需要重新加载 Slimbox。虽然这可能是 100% 错误的。

如果有人可以帮助我，将不胜感激。我所需要的只是能够在加载这些图像的情况下使用 slimbox。

谢谢你， 西蒙

Answer 1

我假设您刚刚包含了 slimbox JS 文件。它不起作用，因为加载 slimbox 时 DOM 没有图像，因为它们是在之后添加的，并且 slimbox 仅适用于调用函数时已经存在的链接。

只需对 slimbox.js 稍作修改即可轻松实现您所说的。你会在 slimbox.js 的底部找到这个：

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    jQuery(function($) {
        $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
    });
}  

将它包装在一个函数中，并在动态更改 DOM 时调用它（在附加图像之后）。把上面的代码改成这样：

function loadsb(){
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
            $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
} }

在appendTo('#FBalbum');之后调用loadsb()

编辑：既然你遇到了麻烦，让我让它变得更容易。

将此用作您的 slimbox.js: http://pastebin.com/8iye0PEB 。我已经从该文件中删除了函数声明，将其添加到主页上的 JS 中。

现在我从您包含的 JS 中看到，Jquery 对象没有被 $ 引用，它被 jQuery 引用。所以现在你的主页 JS 将是：

<script>
//Function to load SlimBox. PS: I'm refrencing the jQuery object by "jQuery" and not $ sign because of your markup
function loadsb(){
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
            jQuery("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
} }

jQuery(document).ready(function() {
var AlbumID = "163187497033669";
var graph = "https://graph.facebook.com/" + AlbumID + "/photos?callback=?";
jQuery.getJSON(graph, function(data) {
var albumItem = [];
for(var key in data){
for(var key2 in data[key]){
val2=data[key][key2];
if(typeof(val2.source)!="undefined"){
albumItem.push(
'<li><a class="imageLink" rel="lightbox" href="' + val2.source + '" ><img src="' + val2.picture + '"/></a></li>'
);
};
};
};
jQuery('<ul />', {
'class': 'album',
html: albumItem.join('')
}).appendTo('#FBalbum');
//Let's now call the function we created above
loadsb();
//Slimbox is now loaded.
});
});

</script>

另外，请注意：现在我们必须手动加载 slimbox，仅将 JS 文件包含在页面中是行不通的。每当您想加载 SB 时，您都必须使用函数声明和调用。 （或者只是将函数声明移动到 slimbox.js 文件并在该文件本身中调用一次。）