I have a code that is quite lengthy to share here, so I've created a demo on JSFiddle: http://jsfiddle.net/Emily92/5b72k225/
This particular code takes a random image and divides it into multiple sections based on the class applied to the div containing the image.
Upon loading the page, a random image is chosen from an array and assigned a class. My goal is to create a separate div that, when clicked, will refresh the div housing the image. The desired outcome is to replace the current image with a new random one bearing the same class.
Currently, the only way to display a new image in the div is by refreshing the entire page. Ideally, this action should only reload the specified div without affecting other elements on the page.
I've attempted to achieve this with the help received on this platform. Specifically, lines 980-1018 of the JavaScript code in the JSFiddle represent my current endeavor. However, solving this issue appears to be more intricate due to the manipulation of the image by the JavaScript code. It might be necessary to reload both the image and the JavaScript manipulation simultaneously.
The following snippet depicts my ongoing efforts:
$(function() {
var imageArray = [
'http://www.webdesignhot.com/wp-content/uploads/2009/10/CatsVectorImage.jpg',
'http://www.costume-works.com/images/halloween_cat_in_witch_hat.jpg',
'http://onthewight.com/wp-content/2013/04/sooty-ryde.jpg'];
reloadImages(imageArray);
$('#reload').on('click',function(){
$( "#masterdiv img[id^='div']" ).each(function(index){
$(this).removeClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeOut( "slow", function() {
if(index==0) {
reloadImages(imageArray);
}
$(this).addClass("jqPuzzle jqp-r"+(index+3)+"-c"+(index+3)+"-SCN");
$(this).fadeIn();
});
});
});
});
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
function reloadImages(array){
shuffleArray(array);
for(var i=0;i<3;i++){
document.getElementById('div'+(i+1)+'id').src=array[0];
}
}
You can find additional details regarding this issue in the HTML section of the JSFiddle. Any assistance provided in resolving this matter would be greatly appreciated. Thank you in advance for your help!