Implement SpaceGallery & MouseWheel
Posted on January 8, 2010 and got 22 shouts so farStill 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
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 
What They Shouts
Shout Something
The Artist
Hidayat Sagita is an ambush artist living in Jakarta, Indonesia, he manages to gain some codejutsu like JavaScript, CSS, Ruby and PHP. Though he's not such a strong ninja, he keeps trying to do his best somehow. Need a help for the jutsu? Just drop him a scroll.
Popular Post
Stuff & Community News
Tags Collection
Sweet well done!
… Wonder if there would be a way to automate the time to move to the next slide… no click needed? hhhmmmm….
Thank you
To implement that, you just need using setInterval function when running spaceGallery function, here is the code :
setInterval( function() {
$(‘#myGallery’).spacegallery({minScale: .3, after: showInfo})
.mousewheel(function(event, delta) {
if(delta < 0)
$(‘#myGallery a[href=#]‘).click();
});}
, 1000);
where should the setInterval function be placed??
@eric You can put setInterval before spacegallery function as i wrote above, here is the full code :
$(document).ready(function() {
$(‘.info’).text($(‘#myGallery img:last’).attr(‘alt’));
showInfo = function() {
$(‘.info’).text($(‘#myGallery img:last’).attr(‘alt’));
}
setInterval( function() {
$(’#myGallery’).spacegallery({minScale: .3, after: showInfo})
.mousewheel(function(event, delta) {
if(delta < 0)
$(’#myGallery a[href=#]‘).click();
});}
, 1000);
});
ThanksHidayat but it’s still not working on any of the browsers i tested.
what i see is that only the first image appears, static for the number of seconds specified in the setInterval function,after which it the others appear in the proper manner.
Can you please set (or display the link to) another space gallery implementation this time without any mouse click or mouse wheel but for the images to be displayed in a specified time interval automatically…
Thank you.
@Eric check your inbox
WORKS PERFECTLY.
THANKS FOR HELPING ME LOCATE THE BUG IN MINE.
I have had no success adding this. Everything is in place that I can see and nothing… I do not see anywhere that this function gets called.
I can’t get spacegallery to work in IE at all. Do you know a trick to make it work there?
http://outermotions.com then click on portfolio then click business cards.
I appreciate any help with tracking down the errors in IE. It work perfect in all other browsers. A little shakey visually in Firefox.
I changed the file I am using with this implementation…
http://outermotions.com then click on portfolio then click business cards.
(refers to my previous shout)
I like that you cleaned up the original code a bit. Thanks for this useful addition. Are there others?
Can you think of any reason that .pngs won’t work in IE? I’ve never had an issue with png’s before anywhere but SpaceGallery. Any thoughts anyone?
sucks to be me i guess.
Shame the script is so reliant on JS, what about users who turn off Javascript?
I like navigate into the gallery, NEXT and PREV buttons, like apple’s Time Machine. It’s possible? How? Thanks.
Hi,
I got your jquery pluggin . I am facing hard time to implement space gallery. I downloaded it from http://eyecon.ro/spacegallery/#implement and thus am not able to figure out how do I write code. I attached all the files required in the page. Can you show me the steps to use this right from scratch . I mean it would be great if you can give me screen shots of your Visual Web Developer.
Will wait for your help.
Rahul
First of all let me give thanks to you for this article, it gave me the solution that I was looking for during my converting my flash web site into that of html5.
It works beautifully. thanks shukran.
I have six photo slide shows of the Canadian Rocky Mountains and I am using the spacegallery/mousewheel with them.
Now this may be a bit far fetched.
1. how to apply the reflection to the spacegallery/mousewheel gallery which OI am sure would add an added dimension to the gallery itself.
If oyu can shed light, help on this I would appreciate this very much.
Willie
To add a reflection on your image you can use this plugin http://www.digitalia.be/software/reflectionjs-for-jquery
I am experiencing an issue with Opera that doesnt appear in any of the other browsers. AND locally there isnt a problem.
The images appear to be slightly to the right and when one clicks on the image they all disappear no images are seen BUT the alt text is working. Yet when I check the example here with Opera it seems to work great.
I am not sure what is the issue here, I only use Opera to test my web pages I am a FF person.
Are you able to shed any light to this.
thanks
I´m having an issue with the mousewheel on jquery 1.7.1… It doesn´t work at all, the image changes only when it is clicked. Can you help me finding the problem?
Solved download the mousewheel 3.0.6!
Hi, is there any way to change the angle of the spacegallery effect? I´m trying to make the angle be like the following image:
http://s18.postimage.org/z32vjjw4p/angle.jpg