Динамически добавляйте изображения для слайд-шоу из HTML (jQuery map/get)

Question

Я использую удивительный плагин jQuery BackStretch для моего фонового слайд-шоу. Это самый распространенный способ передачи изображений.

$.backstretch([
    "http://dl.dropbox.com/u/515046/www/outside.jpg", 
    "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg", 
    "http://dl.dropbox.com/u/515046/www/cheers.jpg"
], {duration: 3000, fade: 750});

Я не хочу предоставлять изображения для него путем жесткого кодирования, хотя я хочу, чтобы функция получала то, что мой PHP генерирует внутри этого контейнера. Вот что у меня так далеко.

var images = $('#background img').map(function() { return this.src; }).get();
$.backstretch([$images], {duration: 3000, fade: 750});

И это, очевидно, не работает - согласно FireBug переменные изображения не определены (?) . хотя, если я "предупреждаю" переменную, она показывает разделенные запятыми URL-адреса изображений.

Есть идеи, что я делаю не так? Спасибо!

Answer 1

Этого должно быть достаточно. backstretch ожидает, что первый аргумент будет массивом строк, которые являются ссылками на изображения.

$(document).ready(function () {
    var images = [];

    // iterate over your selection
    $('#background img').each(function () {
        // save source to list
        images.push(this.src);
    });

    // use plugin
    $.backstretch(images, {duration: 3000, fade: 750});
});

Также я предполагаю, что ваш HTML выглядит примерно так...

<div id="background">
    <img src="http://dl.dropbox.com/u/515046/www/outside.jpg" />
    <img src="http://dl.dropbox.com/u/515046/www/garfield-interior.jpg" />
</div>