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.

  • 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 […]
  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • JUST – JavaScript Useful Stuff (5)
    I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly […]
  • jqIsoText: jQuery Text Effect Plugin (107)
    Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that.  One of them is jqIsoText. With this […]
  • 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 […]

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 to Lyrics Cancel reply

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