Image gallery in 4 lines of code with MooTools and Dojo

August 27th, 2010 | Dojo, MooTools, Tutorials | 6 Comments

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.

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 codesee how it works MooTools codesee how it works

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 [ 6 Comments ]

NicoJuicy
September 1, 2010

I have to admit.

Nice job
Swot template
November 2, 2011

Nice plugin,
dumpster rental bath springs tn
January 5, 2012

two words great, bravo!
nickolas
December 20, 2012

it seems to be nice
Farrukh
March 17, 2013

How to add lightbox with this gallery …?
Hindi Shayari
April 30, 2013

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

» Trackbacks and pingbacks click to expand

jQuery Snow Falling plugin
I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That’s why I enjoy watching how snow falling even if that’s only on my monitor.

Idea is to create one snowflake initially, clone that snowflake at [...]
News Ticker in 4 lines of jQuery
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 ?

Idea is pretty simple, take first element from list, apply some disappearing effect on it and on [...]
jqBarGraph – jQuery graph plugin
jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your data to this plugin. This plugin is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome [...]
Coin Slider 4 WordPress
Coin Slider 4 WP will show your featured posts as image slider and rotate them using unique effects provided by jQuery’s Coin Slider.

Implementation is very easy, after you download and activate this plugin, just paste one line of code in your template and Coin Slider 4 WP is ready to use.

Demo pagesee how it worksDownloadtry [...]

WORKSHOP
owned by Ivan Lazarevic