Dynamic HTML list multiple of x number of images with javascript

Question

I need to create a dynamic HTML list with images ordered in groups of three. Number of images is variable and they need to be multiple of 3 and the initial number of images

For example, I have this html list (in this case with eight images at first)

<ul>
        <li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/womanNew1.jpg"><div class="sl-price2 productPrice_7">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew2.jpg"><div class="sl-price3 productPrice_8">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew3.jpg"><div class="sl-price1 productPrice_1">9,99€</div></a>
            </div>
        </li><li>

            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/womanNew4.jpg"><div class="sl-price2 productPrice_2">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew5.jpg"><div class="sl-price3 productPrice_3">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew6.jpg"><div class="sl-price1 productPrice_4">9,99€</div></a>
            </div>
        </li>
        <li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/womanNew7.jpg"><div class="sl-price2 productPrice_5">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew8.jpg"><div class="sl-price3 productPrice_6">9,99€</div></a>

            </div>
        </li>
    </ul>

and I want this result:

<li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/womanNew1.jpg"><div class="sl-price2 productPrice_7">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew2.jpg"><div class="sl-price3 productPrice_8">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew3.jpg"><div class="sl-price1 productPrice_1">9,99€</div></a>
            </div>
        </li><li>

            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/womanNew4.jpg"><div class="sl-price2 productPrice_2">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew5.jpg"><div class="sl-price3 productPrice_3">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew6.jpg"><div class="sl-price1 productPrice_4">9,99€</div></a>
            </div>
        </li>
        <li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/womanNew7.jpg"><div class="sl-price2 productPrice_5">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew8.jpg"><div class="sl-price3 productPrice_6">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/womanNew1.jpg"><div class="sl-price3 productPrice_6">9,99€</div></a>
            </div>
        </li>
        <li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/manNew2.jpg"><div class="sl-price2 productPrice_8">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew3.jpg"><div class="sl-price3 productPrice_1">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew4.jpg"><div class="sl-price1 productPrice_2">9,99€</div></a>

            </div>
        </li>
        <li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/manNew5.jpg"><div class="sl-price2 productPrice_3">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew6.jpg"><div class="sl-price3 productPrice_4">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew7.jpg"><div class="sl-price1 productPrice_5">9,99€</div></a>
            </div>
        </li>
        <li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/manNew8.jpg"><div class="sl-price2 productPrice_6">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew1.jpg"><div class="sl-price3 productPrice_7">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew2.jpg"><div class="sl-price1 productPrice_8">9,99€</div></a>
            </div>
        </li>
        <li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/manNew3.jpg"><div class="sl-price2 productPrice_1">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew4.jpg"><div class="sl-price3 productPrice_2">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew5.jpg"><div class="sl-price1 productPrice_3">9,99€</div></a>
            </div>
        </li>
        <li>
            <div class="sl3-big-image-div">
                    <a href="#"><img class="sl4-big-image" src="images/manNew6.jpg"><div class="sl-price2 productPrice_4">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew7.jpg"><div class="sl-price3 productPrice_5">9,99€</div></a>
                    <a href="#"><img class="sl4-big-image" src="images/manNew8.jpg"><div class="sl-price1 productPrice_6">9,99€</div></a>
            </div>
        </li>
    </ul>

As you can see now every li element has three images. Number of images are a multiple of 8 and 3(so there are 24 images ordered in group of three images now).

any ideas please?

"so there are 24 images ordered in group of three images now", But there are only 14 images and the third `li` has 2 images. — Abraar Arique Diganto, Jul 24 '15 at 11:50
That is an example of the 'initial' html. There are 8 images and the third li has 2 images. I want to change that html dinamically with js. — Abel Abad, Jul 24 '15 at 11:54
"As you can see now every li element has three images", even in your last example (what you want to be the result) the third `li` has 2 images. — Abraar Arique Diganto, Jul 24 '15 at 11:58
Ok, so what you want is no matter how much images are there initially, you want 8 `
Initial number of images (x) is important because final number of images need to be multiple of 3 and x. — Abel Abad, Jul 24 '15 at 12:09
So, we start with 8 images. You need JS to dynamically change them to 24 because 24 is a multiple of 3 and 8? — Abraar Arique Diganto, Jul 24 '15 at 12:16
If you want to fix the HTML because when it is downloaded from the server it isn't valid, why don't you just stop the server sending bad data? — glend, Jul 24 '15 at 12:20
yes, but number of images is variable. The code is just an example. — Abel Abad, Jul 24 '15 at 12:20
@AbelAbad Ok, I'll try to find a solution and post an answer. — Abraar Arique Diganto, Jul 24 '15 at 12:21

score 0 · Answer 1 · edited May 23 '17 at 12:06

There's a couple pieces to this. First would be pulling in the images from the desired directory. You'll need to use AJAX to accomplish this. After looking at this Stack Overflow question you'd probably want to start with:

var dir = "imageDirectory/";
var fileextension = ".jpg";
$.ajax({
    url: dir,
    success: function (data) {
        var foundFiles = $(data).find("a:contains(" + fileextension + ")");
        if (foundFiles && foundFiles.length) {
            var fileArr = new Array();
            foundFiles.each(function() {
               var filename = this.href.replace(window.location.host, "").replace("http:///", "");
               var imgEl = "<img src=" + dir + filename + " />";
               fileArr.push(imgEl);
            });
        }
    }
});

From there you'll just need to loop through the array and build the html, inserting the div and li tags every 3:

var htmlArr = new Array();
htmlArr.push("<ul>");
for (var z = 0; z < fileArr.length; z++) {
    if (z == 0) {
        htmlArr.push("<li>");
        htmlArr.push("<div>");        
    }
    if (z !==0 && z % 3 === 0) {
        htmlArr.push("</div>");
        htmlArr.push("</li>");
        htmlArr.push("<li>");
        htmlArr.push("<div>");
    }
    htmlArr.push(fileArr[z]);
    if (z == fileArr.length-1) {
        htmlArr.push("</div>");
        htmlArr.push("</li>");
    }
}
htmlArr.push("</ul>");
var htmlOut = htmlArr.join("");
$("body").append(htmlOut);

http://jsfiddle.net/uxgqy9y8/1/

Dynamic HTML list multiple of x number of images with javascript

1 Answers1