Introduction
There are different images which will appear on each card randomly. The count of each image on the cards will display below as
sample.png. A new image will appear once again on the card with same random mechanism when the Refresh button is clicked and the image count will change in the page.
Background
You need to be familiar with jQuery, DOM, and HTML.
Using the code
<script>
var Cat=0;
var c***=0;
var Dog=0;
var Parrot=0;
var Penguin=0;
var Rabbit=0;
var imageArray=["assets/images/Cat.png", "assets/images/c***.png",
"assets/images/Dog.png", "assets/images/Parrot.png",
"assets/images/Penguin.png","assets/images/Rabbit.png"];
var i;
var j;
var k;
function buttonClick()
{
Cat=0; c***=0; Dog=0; Parrot=0; Penguin=0; Rabbit=0;
for(i=0;i<=Math.random() * imageArray.length;i++) {
$("#oldDiv1").html("<img src='"+imageArray[i]+"'>");
}
if(imageArray[i-1] == "assets/images/Cat.png") { Cat = Cat + 1;}
if(imageArray[i-1] == "assets/images/c***.png") { c*** = c*** + 1;}
if(imageArray[i-1] == "assets/images/Dog.png") { Dog = Dog + 1;}
if(imageArray[i-1] == "assets/images/Parrot.png") { Parrot = Parrot + 1;}
if(imageArray[i-1] == "assets/images/Penguin.png") { Penguin = Penguin + 1;}
if(imageArray[i-1] == "assets/images/Rabbit.png") { Rabbit = Rabbit + 1;}
for(j=0;j<=Math.random() * imageArray.length;j++) {
$("#oldDiv2").html("<img src='"+imageArray[j]+"'>");
}
if(imageArray[j-1] == "assets/images/Cat.png") { Cat = Cat + 1;}
if(imageArray[j-1] == "assets/images/c***.png") { c*** = c*** + 1;}
if(imageArray[j-1] == "assets/images/Dog.png") { Dog = Dog + 1;}
if(imageArray[j-1] == "assets/images/Parrot.png") { Parrot = Parrot + 1;}
if(imageArray[j-1] == "assets/images/Penguin.png") { Penguin = Penguin + 1;}
if(imageArray[j-1] == "assets/images/Rabbit.png") { Rabbit = Rabbit + 1;}
for(k=0;k<=Math.random() * imageArray.length;k++) {
$("#oldDiv3").html("<img src='"+imageArray[k]+"'>");
}
if(imageArray[k-1] == "assets/images/Cat.png") { Cat = Cat + 1;}
if(imageArray[k-1] == "assets/images/c***.png") { c*** = c*** + 1;}
if(imageArray[k-1] == "assets/images/Dog.png") { Dog = Dog + 1;}
if(imageArray[k-1] == "assets/images/Parrot.png") { Parrot = Parrot + 1;}
if(imageArray[k-1] == "assets/images/Penguin.png") { Penguin = Penguin + 1;}
if(imageArray[k-1] == "assets/images/Rabbit.png") { Rabbit = Rabbit + 1;}
$("#cat").attr('value',Cat);
$("#c***").attr('value',c***);
$("#dog").attr('value',Dog);
$("#parrot").attr('value',Parrot);
$("#penguin").attr('value',Penguin);
$("#rabbit").attr('value',Rabbit);
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
Cat=0;
c***=0;
Dog=0;
Parrot=0;
Penguin=0;
Rabbit=0;
});
</script>
</head>
<body>
<div id="oldDiv0" class="divAlign"></div>
<div id="oldDiv1" class="divAlign"></div>
<div id="oldDiv2" class="divAlign"></div>
<div id="oldDiv3" class="divAlign"></div>
<br>
<div class="newline">
<form>
Cat: <input type="text" id="cat">
c***: <input type="text" id="c***">
Dog: <input type="text" id="dog">
Parrot: <input type="text" id="parrot">
Penguin: <input type="text" id="penguin">
Rabbit: <input type="text" id="rabbit">
</form>
</div>
<br><br>
<div id="submitButtonContainer">
<button id="btnSubmit" class="primaryButton" type="button"
onClick="buttonClick()">Shuffle Images</button>
</div>
Points of Interest
This code has not been optimized. My interest is to show how to shuffle images in a gallery.
History
Version: 1.0.