Click here to Skip to main content
15,867,330 members
Articles / Web Development / HTML
Tip/Trick

Shuffle Images

Rate me:
Please Sign up or sign in to vote.
1.00/5 (1 vote)
12 Oct 2012CPOL 14.3K   1   1
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

XML
<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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralMy vote of 1 Pin
Selvin15-Oct-12 2:15
Selvin15-Oct-12 2:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.