Question

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.

Answer 1

*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