Hi, all!
i'm working on rewriting the web site for my mother's business and i'm
finally getting to integrate some jQuery in a production site.
Unfortunately, i don't have a link to show anything (it's on an
internal test server), but i wanted to share some of the tidbits with
the n00bs in the crowd, to show them just how damned simple it can be
to create impressive (or just convenient) effects with jQuery...
====================================
Part 1a, tagging anchors with an image.
====================================
My mother's site hosts lots of PDF files (house plans - she owns a
house-building company). Rather than label each of the links with
something like "PDF format", it was a tiny, tiny job to add a small
PDF icon next to each and every link in the site:
jQuery(function(){
$('[EMAIL PROTECTED]')
.append("<img src='/img/pdf.png' height='16' width='16'
class='no_decoration'/>");
});
Where 'no_decoration' is to differentiate these images from the (many)
other images which have a stylized border:
img.no_decoration {
border: none;
}
When it comes to doing "more with less", GNU Make is one of the few
other tools which i consider to be as expressive as jQuery.
====================================
Part 1b:
====================================
i wanted to tinker with a slide-show like feature. After playing with
the Cycle plugin, i found that it wouldn't do the job for me because
i'm working with images of many different sizes (Cycle appears to only
work well when all images are the same size). So i threw together a
most-minimalistic fadeIn/fadeOut slideshow mini-plugin and thought it
might be informative to the n00bs...
jQuery.fn.imageFader = function( options ) {
options = jQuery.extend({
fadeOutSpeed:750,
fadeInSpeed:500,
delay:4500
},options);
var imgs = jQuery('img',this);
imgs.gt(0).hide();
var pos = 0;
var current = 0;
function cycle() {
function doIn(to) {
imgs.eq(to).fadeIn( options.fadeInSpeed );
}
function doOut(from,to) {
imgs.eq(from).fadeOut( options.fadeOutSpeed, function()
{doIn(to)} );
}
pos = (pos >= (imgs.length-1)) ? 0 : ++pos;
doOut( current, pos );
current = pos;
};
setInterval( cycle, options.delay );
return this;
};
Just populate a DIV with some images:
<div id='MyImages'><img .../><img .../><img .../></div>
And:
$('#MyImages').imageFader();
Viola!
Again, few tools let you accomplish so much with so little code. Plus
this plugin degrades reasonably well in the absence of javascript -
instead of a slideshow you get all of your images plopped down side-by-
side.
(Reminder: don't use that plugin for real-life sites - use one of the
several excellent plugins already available for the job. This is for
demonstration purposes only.)
====================================
The end
====================================
i've only been using jQuery about 5 weeks now, and already it's at the
top of my all-time list of favourite tools, right alongside emacs,
firefox, GNU Make and sqlite.
Happy hacking!
