Slimbox загрузка изображений из JavaScript поможет? - PullRequest
Новая
       45

Slimbox загрузка изображений из JavaScript поможет?

0 голосов
/ 03 ноября 2011

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

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

Спасибо, Simon

1 Ответ

1 голос
/ 03 ноября 2011

Полагаю, вы только что включили JS-файл Slimbox. Он не будет работать, так как 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) && (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 на страницу. вам придется использовать объявление Function и вызывать всякий раз, когда вы хотите загрузить SB. (или просто переместите объявление functon в файл slimbox.js и вызовите его один раз в самом файле.)

...