Still remember jQuery plugin named SpaceGallery? Now I wanna combine it with another interesting jQuery plugin, MouseWheel. SpaceGallery is a jQuery plugin helping you make image stack. For complete review, please read previous posting about SpaceGallery.

MouseWheel is a jQuery plugin made by Brandon Aaron for reading direction and velocity from your mouse scrolling movement. With MouseWheel, you can make an application which is able to interact with your application user’s scrolling mouse.

Ok, now let’s talk about the implementation concept I wanna make. I want to have an image gallery in stack just like Time Machine from Apple. For the movement between images I want to use scroll down from mouse. Moreover, every image should show the information text of it.

Implementation

SpaceGallery reads the click action from image stack to do the transition of each image. In order to make the transition not only by clicking, we have to inject the click function of MouseWheel we use. So, everytime the user scrolls the mouse, MouseWheel will click the image gallery.

To show the information of each image, we will fetch the alt attribute of the image and then put it with a function we have made and inject it to “after” parameter from SpaceGallery. The use of this parameter is to run a callback function after next image is showed. Take a look at this script:

HTML

<div id="container">
	<div id="myGallery" class="spacegallery">
		<img src="images/webstuffshare.jpg" alt="Webstuffshare.com | Worth Sharing Bookmarked Webstuff" />
		<img src="images/gauge.jpg" alt="Implement Password Strength Meter and Gauge.js" />
		<img src="images/jcart.jpg" alt="Implement jCart : AJAX/PHP Shopping Cart" />
		<img src="images/tiptip.jpg" alt="Implement TipTip a Beautiful Tooltip" />
		<img src="images/spacegallery.jpg" alt="Implement SpaceGallery and Mousewheel" />
	</div>
	<p class="info">info</p>
	<span class="back">
		<a href="http://www.webstuffshare.com/2010/01/implement-spacegallery-mousewheel/">&laquo Back to article</a>
	</span>
</div>

JavaScript

$(document).ready(function() {
 
 
	$('.info').text($('#myGallery img:last').attr('alt'));
 
	showInfo = 	function() {
				$('.info').text($('#myGallery img:last').attr('alt'));
			}
 
	$('#myGallery').spacegallery({minScale: .3, after: showInfo})
						.mousewheel(function(event, delta) {
							if(delta < 0)
								$('#myGallery a[href=#]').click();
						});
});

$('.info').text($('#myGallery img:last').attr('alt'));

The first stack image showed will be the last in our html element, everytime transition happens, the element position will change. The earlier your image order, the later its element position will be. The function above is to read the image info from the last image element on our html.

showInfo =	function() {
			$('.info').text($('#myGallery img:last').attr('alt'));
		}

Creating function titled showInfo that will be used on the next script whose objective is to read information from the top image of the stack showed.

$('#myGallery').spacegallery({minScale: .3, after: showInfo})

Running the SpaceGallery function to make an image list become image stack with a parameter minScale .3 and then running the showInfo funtion after the transition finished.

.mousewheel(function(event, delta) {

Injecting the mousewheel funtion on image stack we made before.

if(delta < 0)
	$('#myGallery a[href=#]').click();

delta is a variable reading direction and velocity of the mouse scroll. If the value of delta is negative, scrolling mouse will move downward. If the value is positive, scrolling mouse will move upward. In this case, we only want to run the transition if the scrolling mouse move downward, it means that we won’t run the transition unless its value is negative. In other words, if the delta < 0, our image stack will automatically get a click event to run its transition.

So far, our image stack has run appropriately. You can try this demo by clicking the following button and try to scroll down your mouse on the image stack. See what will happen

You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed. If you like this post, your sharing and feedback would be very appreciated

Tags :   Free Stuff    Gallery    jQuery  

Share :           Implement SpaceGallery & MouseWheel (via @hdytsgt)

  Similar Stuffs  

• Spacegallery a Time Machine-alike gallery
• Create Groovershark-like Widget Slider
• [Code Snippet] jQuery : Checkbox & Table
• TipTip a Beautiful Tooltip
• Picbox : Lightweight Image Viewer