Блог

Я буквально все просмотрел в Интернете, но безуспешно, поэтому теперь я обращаюсь к тем, кто точно знает, что они делают.

Я загружаю изображения с 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>
  

Единственные изменения, которые я внес в этот скрипт, это то, что я добавил rel=»lightbox» в 12-ю строку. Когда я проводил исследование, моим лучшим обоснованным предположением было то, что это была команда, называемая Ajax, и Slimbox нужно было перезагрузить. Хотя это может быть на 100% неверно.

Если кто-нибудь может мне помочь с этим, я был бы очень признателен. Все, что мне нужно, это иметь возможность использовать slimbox с загруженными этими изображениями.

Спасибо, Саймон

Я предполагаю, что вы только что включили файл slimbox JS. Это не будет работать, поскольку в DOM нет изображений при загрузке slimbox, потому что они добавляются впоследствии, а 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) amp;amp; (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) amp;amp; (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) amp;amp; (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 файл и вызовите его один раз в самом этом файле.)