Image gallery in 4 lines of code with MooTools and Dojo

Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and Dojo.

Image gallery in 4 lines of code with MooTools and Dojo

Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. Same rules, HTML and CSS code as here will be used.

Dojo code

dojo.query('#thumbs img').onclick( function(e){
	dojo.attr('largeImage','src',dojo.attr(this,'src').replace('thumb','large'));
	dojo.attr('description','innerHTML',dojo.attr(this,'alt'));
});

MooTools code

$('thumbs').getElements('img').addEvent('click', function(event){
	$('largeImage').set('src' , this.get('src').replace('thumb','large'));
	$('description').set('html',$(this).get('alt'));
});

and again, just for comparation:

jQuery code

$('#thumbs img').click(function(){
	$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
	$('#description').html($(this).attr('alt'));
});

As you see approach is the same, only difference is in syntax, and if you are familiar with one JavaScript framework, you don’t need much effort to switch on another. But, if you learn JavaScript you will be able do use full power of those frameworks. So, don’t be lazy and start now.



Comments [ 7 Comments ]

  1. NicoJuicy
    September 1, 2010

    I have to admit.

    Nice job :)

  2. Swot template
    November 2, 2011

    Nice plugin, :)

  3. two words great, bravo!

  4. nickolas
    December 20, 2012

    it seems to be nice

  5. Farrukh
    March 17, 2013

    How to add lightbox with this gallery …?

  6. Hindi Shayari
    April 30, 2013

    Thank you so very much for taking the time to share…very useful, indeed!

  7. Dora
    September 11, 2013

    How do you preload the images?



» Trackbacks and pingbacks click to expand


Leave a Reply

More Articles


more on WORKSHOP.rs