Click here to Skip to main content
Click here to Skip to main content
Go to top

Shuffle Images

, 12 Oct 2012
Rate this:
Please Sign up or sign in to vote.
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.

License

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

Share

About the Author

Ashwin M. Hegde

United States United States
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 PinmemberSelvin15-Oct-12 2:15 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 12 Oct 2012
Article Copyright 2012 by Ashwin M. Hegde
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid