Javascript Image Gallery Using Mootools
Be sure to check out the second iteration of the image gallery.
This free image gallery based on javascript is a quick & easy solution. Implementing the demo doesn’t requre knowledge of any javascript. In this article, I’ll explain and breakdown the javascript that runs the image gallery using the javascript framework Mootools.
Demo:
Image 1
Image 2
Image 3
Image 4
Image 5
The Javascript image gallery is built from Mootools, an open-source object-oriented Javascript framework. If you’ve seen some cool graphical interactions you wouldn’t expect on a web page, chances are they are Mootools or another similiar framework like jQuery.The Javascript:
window.addEvent('domready', function() {
var drop = $('large');
var dropFx = drop.effect('background-color', {wait: false});
$$('.item').each(function(item){
item.addEvent('click', function(e) {
drop.removeEvents();
drop.empty();
var a = item.clone();
a.inject(drop);
dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
});
});
});
The HTML:
<div id="imagegallery"> <div id="items"> <div class="item"> <img src="images/167461515_05807d9fdc.jpg" alt="image" /> <p>Image 1</p> </div> <div class="item" > <img src="images/229805603_e84bcf23bf.jpg" alt="image" /> <p>Image 2</p> </div> <div class="item"> <img src="images/248397811_0e7f1991be.jpg" alt="image" width="373" height="500" /> <p>Image 3</p> </div> <div class="item" > <img src="images/1058831139_3dbe9e47b9.jpg" alt="image" width="500" height="333" /> <p>Image 4</p> </div> <div class="item" > <img src="images/860213842_62e9bc4bcc.jpg" alt="image" width="500" height="333" /> <p>Image 5</p> </div> </div> <div id="large"> <div class="info">Click A Thumbnail on the Left</div> </div> <!– Image Gallery by http://tutorialdog.com –> </div>
How the Javascript Works
The javascript you see above was the only part I needed to create- the rest is provided by the mootools framework. The first line, “window.addEvent(’domready’, function() {” and the closing brackets at the end is require of all (almost all) mootools scripts. The two variables at the beginning (var drop & var dropFX) govern the element with id=”large” in the html and the background color of that element.
The next part is just a function to get the image from the ‘items’ part of the html to the ‘large’ part of the html. “$$(’.item’).each(function(item){” basically says that for each html element identified under the class ‘item’, apply the following conditions to element. Now there is only one condition which would be “item.addEvent(’click’, function(e) {”. This line of code says that when the item is clicked, apply the follow instructions in the functions brackets. If you wanted to, you could change the word ‘click’ to ‘moueover’ and instead of needing to click on each photo, you would simply need put the mouse over the thumbnail image to get the large image to appear and essential get the function to trigger.
The code inside that ‘click’ function essential clears the items in the ‘large’ element and creates a clone of that ‘item’ class that was clicked and puts (injects) it into the ‘large’ element in the html.
Conclusion
If you’re just looking for a quick yet cool javascript image gallery, then download the included zip file and tweak the css to your liking. If you want to find out more about Mootools and creating really cool web apps, then check out the mootool demos which shows a variety of cool uses and a lot more functionality.
February 5th, 2008
Hey — how can this be modified to show thumbnails (separate files) and load the full images? Looks like right now it’s using the full image as thumbs, and just cloning that image in the viewer area..
February 18th, 2008
@Rob You could do that, but then you would have to hardwire into the javascript where each full size image file is located. I didn’t want to do that because when you wanted to add another image, you not only have to add to the html, but also the javascript. My preference was to make it simpler and quicker to set up.
March 12th, 2008
Hey-Is there someway to make the java script automatically load the first image?
April 7th, 2008
@Stephen:
You can load the first image by simply doing this:
I’m wondering, is there a way fade the images in & out instead of flashing a background color? How would that be done?
I’ve tried to do it like this, but the image starts at 100% opacity, fades out and then back in when clicking the thumbnails instead of simply starting at 0 opacity and then up to full opacity:
window.addEvent(’domready’, function()
{
var drop = $(’large’);
//var dropFx = drop.effect(drop {’opacity’:0, wait: false}); // wait is needed so that to toggle the effect,
var fx = new Fx.Styles(drop, {duration:200, wait:false});
$$(’.item’).each(function(item)
{
item.addEvent(’click’, function(e)
{
drop.removeEvents();
drop.empty();
var a = item.clone();
a.inject(drop);
fx.start({
‘color’: ‘#000000′,
opacity: ‘0.5′
}).chain(function() {
// executes 1 seconds after completion of above effect
fx.start.delay(0, this, {
‘opacity’: 1
});
});
});
});
});
This approach doesn’t work as well as I’d hoped. Any idea which part needs tweaking?
Thanks!
April 7th, 2008
@Stephen:
Sorry, looks like I can’t put html in here. Let’s try it this way… You can load the first image by simply doing this:
April 7th, 2008
…nope, can’t post code examples here I guess. Basically, just load an image in the div id “large”.
April 18th, 2008
how did you get it to work in IE? I have the same code but doesn not work in IE.
May 9th, 2008
Im loving this script, it does exactly what I wanted to do, and is easy for me to use. I have no java exerience, but I do know enough CSS.
However Ive got one question. So far, you click on the thumbnail, and it shows the larger versn. How can I have that larger version link to an even larger version (full resolution) in a separate window?
May 17th, 2008
Really cool script. But my thumbnails really bother me, because the size of the thumbnails can just be really small and I can’t really change it ;S
May 17th, 2008
Anderson, check out the second part of the tutorial. I made a better version!
http://tutorialdog.com/javascript-image-gallery-using-mootools-part-2/
May 21st, 2008
Hi, This script is brilliant just wont work in IE7. Throws an error at me saying ‘Object doesn’t support property or method. Has anyone got any ideas on how to solve this problem? Any replies would be much appreciated.
May 22nd, 2008
@Ryan I fixed Part 2 to work in IE.
July 17th, 2008
I am trying to get this to work in firefox but it is not working. Any ideas?
August 11th, 2008
I thought others might be interested in how I used this for a gallery implementation, with modifications for displaying different images in the large div, and also for linking again to a large version of the image.
See my post about it:
http://www.uncharteddesign.com/blog/?p=10
Thanks Devin!
August 19th, 2008
[...] 9. Javascript Image Gallery [...]
October 11th, 2008
very good… Thanks you very much
October 24th, 2008
great job man u did a fabulous job………..
November 25th, 2008
its a great tool but please let me know how it can be use for dynamic images??????plz i am in urgency plz let me know
November 25th, 2008
Hi, Thanks for the nice and useful script. Is it any way to pass the another image path to display? I mean thumbnail and display picture should be different? Is it possible?
April 10th, 2009
Hi, implement a simple click to view full resolution of image and I will call it great gallery :)
May 9th, 2009
Great Post.Thank you
May 16th, 2009
Thanks a lot for this, it is very helpful for me…
May 28th, 2009
maravillosa libreriá y aplicacion….
June 6th, 2009
Good one, galleries can be useful at times especially for projects etc
Thanks for posting them :)
June 7th, 2009
[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Monday, June 8th, 2009 at 2:02 am and is filed under Javascript Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
June 13th, 2009
Thanks, there is more reason to comment than ever before!
June 13th, 2009
Great javascript image gallery. Thank u for sharing.