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.

  • Create image gallery in 4 lines of jQuery (138)
    Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image […]
  • News Ticker in 4 lines of jQuery (90)
    There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code […]
  • Animated Progress Bar in 4 lines of jQuery (42)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]
  • mooBarGraph: AJAX graph for MooTools (17)
    mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph. This plugin made graph from your JSON data and is compatible with all […]
  • Just Random Color (0)
    Some time ago I was working on app where for each category we had to assign random color in case that user didn't choose one. A few day ago I needed to generate random color again. Instead […]

8 comments on "Image gallery in 4 lines of code with MooTools and Dojo"

Good Job .. could u please let me know that is possible to make this gallery responsive. downloaded the script.

Lyrics on July 24, 2014 at 7:20 am

How do you preload the images?

Dora on September 11, 2013 at 2:20 pm

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

Hindi Shayari on April 30, 2013 at 8:11 am

How to add lightbox with this gallery …?

Farrukh on March 17, 2013 at 3:15 am

it seems to be nice

nickolas on December 20, 2012 at 3:07 pm

two words great, bravo!

dumpster rental bath springs tn on January 5, 2012 at 2:21 am

Nice plugin, :)

Swot template on November 2, 2011 at 1:56 am

I have to admit.

Nice job :)

NicoJuicy on September 1, 2010 at 5:36 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>