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 at 12:52 am
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 at 10:38 pm
@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 at 10:39 pm
Hey-Is there someway to make the java script automatically load the first image?
April 7th, 2008 at 9:19 am
@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 at 9:21 am
@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 at 9:22 am
…nope, can’t post code examples here I guess. Basically, just load an image in the div id “large”.
April 18th, 2008 at 10:06 pm
how did you get it to work in IE? I have the same code but doesn not work in IE.
May 9th, 2008 at 3:03 am
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 at 3:14 pm
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 at 4:02 pm
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 at 1:38 pm
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 at 2:18 am
@Ryan I fixed Part 2 to work in IE.
July 17th, 2008 at 10:35 pm
I am trying to get this to work in firefox but it is not working. Any ideas?
August 11th, 2008 at 1:15 am
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 at 8:55 am
[...] 9. Javascript Image Gallery [...]
October 11th, 2008 at 9:41 pm
very good… Thanks you very much
October 24th, 2008 at 11:18 am
great job man u did a fabulous job………..
November 25th, 2008 at 1:33 pm
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 at 8:30 pm
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 at 4:01 pm
Hi, implement a simple click to view full resolution of image and I will call it great gallery :)
May 9th, 2009 at 6:42 am
Great Post.Thank you
May 16th, 2009 at 10:49 am
Thanks a lot for this, it is very helpful for me…
May 28th, 2009 at 9:20 pm
maravillosa libreriá y aplicacion….
June 6th, 2009 at 4:50 am
Good one, galleries can be useful at times especially for projects etc
Thanks for posting them :)
June 7th, 2009 at 8:33 pm
[...] 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 at 8:50 am
Thanks, there is more reason to comment than ever before!
June 13th, 2009 at 8:55 am
Great javascript image gallery. Thank u for sharing.
June 22nd, 2009 at 10:44 am
Your scrip good and nice collection gallery.
Thanks
August 7th, 2009 at 5:01 am
Hi Friends,
The script is really amazing. I have developed a imagegallery using the same. Now i want to create a video gallery in the same manner. Is there any script to do the same.If anybody can help would be highly appreciated
August 20th, 2009 at 8:50 am
[...] Mootools Image Gallery http://tutorialdog.com/javascript-image-gallery-using-mootools/ [...]
August 27th, 2009 at 4:33 am
very kool…more useful!!
August 31st, 2009 at 6:50 am
wow its amazing i was looking for that kind of brilliant designs…Thanks
September 2nd, 2009 at 2:22 pm
[...] TutorialDog Image Gallery | Demo [...]
September 3rd, 2009 at 5:45 am
[...] TutorialDog Image Gallery | Demo [...]
September 30th, 2009 at 7:58 am
[...] 8. Javascript Image Gallery [...]
October 3rd, 2009 at 3:27 am
[...] 15. Javascript Image Gallery Using Mootools [...]
October 16th, 2009 at 12:24 pm
This Image Gallery is very very best in viewing and Imagination point of view. I have never think with Jscript this will be done….
Thanx a lot for tutorial…….
November 23rd, 2009 at 7:52 am
The Jscript is more useful for us to make up the image gallery using the mootools….. Very nice job…… Learned a lot from this….. Thanks for sharing….
December 17th, 2009 at 12:29 pm
wow its amazing i was looking for that kind of brilliant designs…Thanks
December 17th, 2009 at 12:32 pm
very cool script …more useful!!
December 21st, 2009 at 5:24 pm
[...] Javascript Image Gallery Using Mootools – This is a very simple image gallery, great for when you need something up right now. It doesn’t require you to know very much JavaScript to get it to work. [...]
December 26th, 2009 at 7:59 am
Nice collections….thanks for sharing….
March 18th, 2010 at 10:03 am
[...] TutorialDog Image Gallery | Demo [...]
March 22nd, 2010 at 1:38 pm
hi! have been trying to add this photo gallery to my website using dreamweaver but it doesn’t work.
i have the code just need to know wat to do step by step would be much appreciated
many thanks
sean tarrant
May 18th, 2010 at 9:20 am
Hi, just wonder if I can actually load the image automatically from specified browser without manually putting the picture path and name, using PHP maybe?
May 26th, 2010 at 11:34 am
very useful
May 26th, 2010 at 11:35 am
useful post
May 26th, 2010 at 11:36 am
really good
May 26th, 2010 at 11:39 am
Nice collections….thanks for sharing….
May 26th, 2010 at 11:40 am
wow its amazing. Thanks for sharing
May 26th, 2010 at 11:41 am
good list. Thanks for posting
May 26th, 2010 at 11:42 am
useful list. It is useful for me
May 26th, 2010 at 11:44 am
It is useful for me. View it
May 26th, 2010 at 11:45 am
it is really good
May 26th, 2010 at 11:45 am
Thanks for the list
May 26th, 2010 at 11:46 am
amazing list. . . very useful
May 26th, 2010 at 11:47 am
useful article. . . thanks for info
June 7th, 2010 at 3:11 am
[...] [...]
June 7th, 2010 at 3:11 am
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks.
June 30th, 2010 at 7:03 am
Its very good article… Thanks for posting it
June 30th, 2010 at 7:14 am
Amazing articles….Thanks for posting it