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.
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 [ 6 Comments ]
» Trackbacks and pingbacks click to expand
Leave a Reply
More Articles
-
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.
Task is the same. One large image, description bar, few thumbs bellow, large image and description should change when thumb is clicked. [...]
-
jqIsoText: jQuery Text Effect Plugin
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 plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On [...]
-
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 [...]
-
Twitter Flock for Wordpress: multiple accounts tweets with style
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 look like and will they cache or not.
One of the things that make this plugin different form other are tabs above Twitter Flock box. This tab [...]
September 1, 2010
I have to admit.
Nice job
November 2, 2011
Nice plugin,
January 5, 2012
two words great, bravo!
December 20, 2012
it seems to be nice
March 17, 2013
How to add lightbox with this gallery …?
April 30, 2013
Thank you so very much for taking the time to share…very useful, indeed!