Shuffle Images

Ashwin M. Hegde

1.00/5 (1 vote)

Oct 12, 2012

CPOL

14763

This script helps you understand basic shuffling of images.

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.