SO-22682657

by Tushar Gupta

HTML

<div class="img-wrap"></div>

CSS

* {
    margin:0;
    padding:0;
}
img {
    border:1px solid red;
    display:block;
    margin:5px;
    width:93px;
    height:93px;
    float:left;
}
.img-wrap {
    height:110px;
    background:green;
}

JavaScript

//img  adding
function imgAdding() {
    for (var i = 0; i < ($(window).width() / 100) - 1; i++) {
        var $wrap = $('<img src="" width="100px" alt="" />');
        $('.img-wrap').append($wrap);
    }
}
var maxImg = 10;
function hexImgName() {
    var imgSRC = '';
    $("img").each(function (i) {
        if (i <= maxImg) { //check images count here if it's less than equal to 10
            imgSRC = 'http://toobler.com/staging/design/plicks-landing/testpath/pic-' + i + '.gif';
        } else {
            var randomImg = Math.floor(Math.random() * maxImg) + 1;
            imgSRC = 'http://toobler.com/staging/design/plicks-landing/testpath/pic-' + randomImg + '.gif';
        }
        $(this).attr('src', imgSRC);
    });
}

imgAdding()
hexImgName()