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.

random images button

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -