开发者

jQuery build gallery from array

开发者 https://www.devze.com 2023-01-26 09:31 出处:网络
I have an array filled with image links and I\'d like to write a script that would, using javascript (with jQuery library), would format the html output like so:

I have an array filled with image links and I'd like to write a script that would, using javascript (with jQuery library), would format the html output like so:

<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>

After every 5 image links it processes, it will add another div container inside the items class. So if the array contained 15 image links then the end result would be something like:

<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>

and so on until the end of the array. Any ideas?

Edit: Sorry about the code identation, it screwed up when posting.

Edit2: Clarification.


*Edit - I fixed the code up so that it would dynamically create more images, in sets of five. I believe that's everything you asked.

How about this?

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

Try the demo

0

精彩评论

暂无评论...
验证码 换一张
取 消