Shuffle Between Images Using JQuery

January 22nd, 2011 by aditia rahman / 2 Comments  

     

Shuffle mean changing the position between each items position, I continue this shuffling images feature so that can be added to my previous post about creating collage image gallery using jquery, and better can be added with rotating feature too. I’m using the same layout and images position like before.

Shuffle Between Images Using JQuery

View Demo | Download Source
The HTML

Actually I’m using 15 images in this example but I just showing two images in this code

<div id="top">
    <button id="btshuffle" class="button" onclick="shuffle();">
        Shuffle
    </button>

    <button id="btresetShuffle" class="button">
        Reset
    </button>
</div>
<div id="container">
    <div id="box1" class="box">
        <img id="img1" src="img/thumbs/01.jpg"/>
    </div>
    <div id="box2" class="box">
        <img id="img2" src="img/thumbs/02.jpg"/>
    </div>
</div>
The JQuery

The idea is when the page loaded, I store all the image source as a string in array, each tag have a unique id so it will make me easier to reset to the current position, and for the shuffling I just changing each image source by randomizing index in array

$(document).ready(function() {
	var array_img = new Array();

	var children = $("#container").children();
	var child = $("#container div:first-child");

	for (i=0; i<children.length; i++) {
		array_img[i] = $("#"+child.attr("id")+" img").attr("src");
		child = child.next();
	}

	$("#btresetShuffle").click(function() {
		var children = $("#container").children();
		var child = $("#container div:first-child");

		for (i=0; i<children.length; i++) {
			$("#img"+parseInt(i+1)).attr("src", array_img[i]);

			child = child.next();
		}
	});
});

/* this function from:
 * http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
 */
function randomFromTo(from, to){
    return Math.floor(Math.random() * (to - from + 1) + from);
}

function shuffle() {
	var children = $("#container").children();
	var child = $("#container div:first-child");

	var array_img = new Array();

	for (i=0; i<children.length; i++) {
		array_img[i] = $("#"+child.attr("id")+" img").attr("src");
		child = child.next();
	}

	var child = $("#container div:first-child");

	for (z=0; z<children.length; z++) {
		randIndex = randomFromTo(0, array_img.length - 1);

		// set new image
		$("#"+child.attr("id")+" img").attr("src", array_img[randIndex]);
		array_img.splice(randIndex, 1);

		child = child.next();
	}
}
The CSS
* {
    font-family: Arial, "Free Sans";
}

body {
    background:#ffffff url('../img/back.jpg') repeat right top;
}

#top {
    margin: 0 auto;
    text-align: center;
    padding: 10px;
    width: 785px;
    margin-bottom: 10px;
	background: #999;
	opacity: 0.9;
	filter: alpha(opacity9=80);
	-webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    border-radius: 1.5em;
}
#container {
    margin: 0 auto;
    width: 785px;
    height: 470px;
    padding: 10px;
	-webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    border-radius: 1.5em;
	background: #d3d3d3;
	opacity: 0.9;
	filter: alpha(opacity=90);
}

.box {
    padding: 5px;
    background: #fff;
    width: 125px;
    height: 125px;
    background: #f3f3f3;
    float: left;
    margin: 10px;
    border:1px solid #d3d3d3;
    -moz-box-shadow: 2px 2px 5px #333;
    -webkit-box-shadow: 2px 2px 5px #333;
    box-shadow: 2px 2px 5px #333;
}

/* this CSS3 button get from this
 * http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
 */

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

Not much changes in the CSS code I just change the background html image and the background div container, here is the result

jQuery Shuffling Images

View Demo | Download Source
        submit to reddit Delicious

2 Comments Leave a Comment Subscribe RSS

Leave a Comment