javascript - Display different sizes image in mobile tablet and desktop resolution using jquery -
i using vegas slide full-width banner image shuffle function on page reload/refresh.
how set cropped image 3 different sizes desktop, tablet, , mobile single variable.?
below code, have achieved using below code. calling function simultaneously, guess it's not practice achieve. suggest me better solution.
// shuffle function function shuffle(o) { (var j, x, = o.length; i; j = math.floor(math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o; }; // define backgrounds array var bgimages = [{ src: "images/dbg1.jpg" }, { src: "images/dbg2.jpg" }, { src: "images/dbg3.jpg" }, ] var tabimages = [{ src: "images/tablet/tbg1.jpg" }, { src: "images/tablet/tbg2.jpg" }, { src: "images/tablet/tbg3.jpg" }, ] var mobimages = [{ src: "images/mobile/mbg1.jpg" }, { src: "images/mobile/mbg2.jpg" }, { src: "images/mobile/mbg3.jpg" }, ] var windowwidth = $(window).width(); if ($(window).width() >= 1024) { // suffle array randombgs = shuffle(bgimages); $("body").vegas({ delay: 10000, cover: true, timer: false, slides: randombgs }); } if ($(window).width() >= 768) { // suffle array randomtbg = shuffle(tabimages); $("body").vegas({ delay: 10000, cover: true, timer: false, slides: randomtbg }); } if ($(window).width() <= 767) { // suffle array randommbg = shuffle(mobimages); $("body").vegas({ delay: 10000, cover: true, timer: false, slides: randommbg }); }
$(window).resize(function() { var windowwidth = $(window).width(); if ($(window).width() >= 1024) { randombgs = shuffle(bgimages); } else if($(window).width() >= 768) { randomtbg = shuffle(tabimages); } else { randommbg = shuffle(mobimages); } $("body").vegas({ delay: 10000, cover: true, timer: false, slides: randombgs }); })
Comments
Post a Comment