从javascript帮助加载图片的Slimbox？

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需要重新加载。虽然这可能是百分之百的错误。

如果有人能在这方面帮助我，我们将不胜感激。我所需要的是能够使用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));
        });
} }

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

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

将此用作您的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文件，并在该文件本身中调用它一次。)