jQuery построить галерею из массива - PullRequest
1 голос
/ 24 ноября 2010

У меня есть массив, заполненный ссылками на изображения, и я хотел бы написать скрипт, который с использованием javascript (с библиотекой jQuery) форматировал бы вывод html следующим образом:

<div id="gallery">
<div class="scrollable">   
    <div class="items">
        <div>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
        </div> 
    </div>
</div>  
</div>

После каждых 5 ссылок на изображения, которые он обрабатывает, он добавляет еще один контейнер div внутри класса items Так что, если массив содержит 15 ссылок на изображения, конечный результат будет примерно таким:

<div id="gallery">
<div class="scrollable">   
    <div class="items">
        <div>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
        </div> 
        <div>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
        </div>
        <div>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
            <img src="URL_from_array"/>
        </div> 
    </div>
</div>  
</div>

и так до конца массива. Есть идеи?

Редактировать: Извините за код код, он облажался при публикации.

Правка2: Разъяснение.

1 Ответ

0 голосов
/ 24 ноября 2010

* Редактировать - я исправил код так, чтобы он динамически создавал больше изображений, по пять наборов. Я верю, что это все, что вы просили.

Как насчет этого?

$('div#gallery img').each(function(){
    var i = $('div#gallery img').index(this);
   $(this).attr('src',images[i]); 
});

Попробуйте демоверсию

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...