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.

  • Coin Slider: Image Slider with Unique Effects (1638)
    After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn't find that somebody […]
  • Gradienter: Add gradient to elements (24)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]
  • Twitter Flock for Wordpress: multiple accounts tweets with style (69)
    Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will […]
  • 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 […]
  • News Ticker in 4 lines of jQuery (93)
    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 of jQuery code […]

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 *