html5 - jQuery – Loading random images from directory -
jquery noob here, apologies question!
i'm writing static site client , they've given me rather interesting challenge i'm not sure how approach.
they'd have button on page takes random images directory , places them in grid. i'm great html , styling, have no idea started on jquery.
this demo of i'd implement, assuming button pressed every second or so.
is feasible and/or possible using jquery (i.e. having static site)?
answers accompanied explanations appreciated, i'm still learner in web dev!
thanks!
try utilizing $.map()
, .remove()
, settimeout
, .appendto()
, .on()
var updateimages = function updateimages() { // remove images `#container` element having images child nodes $("#container img").remove(); // append 8 "random" images `#container` $.map($.makearray(array(8)), function(val, key) { settimeout(function() { $("<img />", // image files named "image-0.jpg" - "image-7.jpg" , // `key` : `0` - `7` {"src": "/path/to/images/image-" + key + ".jpg"}) .appendto("#container"); }, 1 + math.floor(math.random() * 25)) }); }; // call `updateimages` $("button").on("click", updateimages); // set reference `interval` // var interval = 0; // call `updateimages` every `1000` ms // interval = setinterval(function() { // updateimages() // }, 1000);
Comments
Post a Comment