Javascript Image Gallery Using Mootools

Javascript Tutorial written on January 10th, 2008 Leave a comment

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:

Doggie Image 1   

Image 1

 

Image 2   

Image 2

 

Dog in Window   

Image 3

 

Two Dogs   

Image 4

 

Dog on Leash   

Image 5

 

 

Click A Thumbnail Above

 

Download Image Gallery

Mootools LogoThe 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.
Image

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.

Image

This entry was posted on Thursday, January 10th, 2008 at 5:05 am and is filed under Javascript Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

15 Comments

  1. 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..

  2. @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.

  3. Hey-Is there someway to make the java script automatically load the first image?

  4. @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!

  5. @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:

  6. …nope, can’t post code examples here I guess. Basically, just load an image in the div id “large”.

  7. how did you get it to work in IE? I have the same code but doesn not work in IE.

  8. 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?

  9. Anderson
    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

  10. Anderson, check out the second part of the tutorial. I made a better version!
    http://tutorialdog.com/javascript-image-gallery-using-mootools-part-2/

  11. 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.

  12. @Ryan I fixed Part 2 to work in IE.

  13. I am trying to get this to work in firefox but it is not working. Any ideas?

  14. 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!

  15. [...] 9. Javascript Image Gallery [...]

Leave a Comment