Demo 8 :: Image Scroller

JQuery is able to do a bunch of fancy things with images. This demo shows you how you can scroll through a bunch of images with a click of the mouse. Included is a game that you must click on the individual squares to find the correct piece. The final image should match what is shown on the right.

Click the squares to complete the picture!

Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece]
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece\
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley PieceSmiley Piece
Smiley Preview

View the HTML code

<div class="pieces" id="piece1">
    <div class="pieceSet">
        <img src="../lib/img/smiley/Smiley05.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley02.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley03.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley04.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley01.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley06.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley07.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley08.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley09.png" width="80" height="80" alt="Smiley Piece" /><img src="../lib/img/smiley/Smiley10.png" width="80" height="80" alt="Smiley Piece" />
    </div>
</div>

View the jQuery code

$(document).ready(function(){
	$('.pieceSet').click(function(){//When we click on the image with the class of pieceSet
		var scrollAmount = $(this).width() - $(this).parent().width();// create variable to hold the width of the pieceSet div(this) subtracted by the width of the parent div(pieces)
		var currentPos = Math.abs(parseInt($(this).css('left')));//grabs the left position of the pieceSet div and turns it into an absolute number
		var remainingScroll = scrollAmount - currentPos;//subtracts the two variables and puts it into its own variable
	
		var nextScroll = Math.floor($(this).parent().width());//creates a variable that rounds down the width of the parent div
	
		if(remainingScroll < nextScroll) {
		nextScroll = remainingScroll;//if the variable remainingScroll is less than the amount of var nextScroll then we set nextScroll's value equal to remainingScroll's value
		}
	
		if(currentPos < scrollAmount) {
			$(this).animate({'left':'-=' + nextScroll}, 'slow');//if the currentPos is less than the scrollAmount we will animate the left position's movement to however much our nextScroll's value is
		}else{
			$(this).animate({'left':'0'}, 'fast'); //if the currentPos is not less than the scrollAmount, then we set the pieceSet div's left position back to 0
		}
	});
});