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() appendTo('#FBalbum');

編輯 ：由於您遇到了麻煩，讓我讓它變得更加容易。

將此作為您的slimbox.js ： http : slimbox.js 。 我已經從該文件中刪除了函數聲明，將其添加到主頁上的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時都必須使用Function聲明並調用。 （或只是將functon聲明移至slimbox.js文件，然后在該文件本身中調用一次。）