CODEWITHSUNDEEP
javascriptjquery-uijqueryjquery-plugins
subho das
subho das

Reputation: 391

Displaying 2sets of different images randomly in sequential divs

I have 2 sets of different images.

first set is: img1.jpg, img2.jpg, img3,jpg

second set is: imga.jpg, imgb.jpg, imgc.jpg

Also I have three different divs #one, #two, #three.

The every set of images must follow the sequence. img1.jpg must embed into div #one, img2.jpg must embed into div #two & img3.jpg must embed into div #three.

Same thing must happen for 2nd set of images too. But image sets will change randomly.

I want to show image sets randomly. Means, when user will login, they might see 1st set of images, after refresh they might see 2nd set of images.

Till now I am able to randomized the array of images. But images are not embedding in sequence of divs. All images are getting embedded in a single div

See my code, correct me where I am wrong:

$(function () {
    var arr1 = ["map_slice_1.jpg", "map_slice_2.jpg", "map_slice_3.jpg", "map_slice_4.jpg", "map_slice_5.jpg", "map_slice_6.jpg",
        "map_slice_7.jpg", "map_slice_8.jpg"];
    var arr2 = ["kolkata_1.jpg", "kolkata_2.jpg", "kolkata_3.jpg", "kolkata_4.jpg", "kolkata_5.jpg", "kolkata_6.jpg", "kolkata_7.jpg",
        "kolkata_8.jpg"];
    var currentArr = Math.random() < 0.5 ? arr1 : arr2;
    $.each(currentArr, function (i, val) {
        var i = 0;
        while (i++ < 8) {
            $('#map_slice_' + i).append('<img src="map/' + val + '"/>');
        }
        //$('#yourContainer').append('<img src="'+val+'"/>');
    });
});

Upvotes: 0

Views: 69

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Try

fiddle Demo

$.each(currentArr, function (i, val) {
    $('#map_slice_' + ++i).append('<img src="map/' + val + '"/>');
});

Upvotes: 1

Related Questions