Slimbox從JavaScript的幫助下載圖片？

Question

我從字面上看待了網上的一切，沒有成功，所以現在我正轉向那些確切知道他們在做什麼的人。

我從Facebook加載圖像，用一個漂亮的小工具，utulises 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> 

只有我已經做了該腳本的變化，是我添加了rel =「收藏夾」的第12行。當我做了研究的時候，我受過最好教育的猜測是，這是一個叫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)); 
     }); 
} } 

調用Editloadsb()後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時調用。 （或者只是移動functon聲明slimbox.js文件，並在文件本身調用它一次。）