Displaying images

I've been coding for close to 12 years now and seen a lot of different formats and ways to display images. Usually the old standby is:

<img src="someImage.jpg" />

However, in the last few years I have seen several great examples of image use in Flash and SilverLight, but I like to keep it simple. Those are 3rd party applications and while they are very useful I like to keep everything native to my DOM. That is why I like using a combination of CSS and Javascript. It turns out jQuery has several plugins that help you write just a little bit of JavaScript and paste in a little CSS from the plugin. Usually it is as simple as voila!

At the company I work for we have been reviewing new image tools. One of the one's I really like was the s3Slider plugin for jQuery. However, I ended up recommending the Nivo plugin. You can see an example of it here:

Click to launch example

As you can see there are plenty of tools that all pretty much achieve a similar effect. Making images more accessible and in a "slideshow" type of format.

Keeping it clean

I felt like I should blog at least once about making your code look good. Clean code is generally not a topic discussed much, as personal styles vary but I feel that we should at least mention some better practices to use.

1) Use comments.

This generally should go without saying but you would be so surprised how much code I go through everyday that has not been commented or documented. When you practice commenting your code you make it easier to go back and debug for anyone. If you are really that concerned about it adding the size of the file then clean all comments out in your final version and transfer the comments to some type of documentation. Let's review examples of comments in jQuery:

// Use these two slashes to comment out one line at a time
// Or we use /* */ to span multiple lines
/* Like
 * This
 */

2) Use indentations:

Generally people prefer to use tab indents in their code. An example of this would:

var data = {
      id: id,
      name : name
}

However, you can do what I do and just use space indentation:
var moreData =
{ id: id,
  name: name
}

Either way is acceptable, just stay consistent.

3) Use camel case or an underscore:

Or something to make the code readable and identifiable. I know several people that will simple use:

var variable1 = 0;
var variable2 = 0; ... so forth and so on.

A better way to do it is naming the variable something related to what it is doing or storing.

var dayOfTheMonth = 'Monday';
var name_of_my_teacher = 'Judy Watson';


These are just some simple techniques that will save you and others some time by keeping the code clean and easier to understand.

Filter and Adding

A handy command to use when you want to eliminate elements that you have selected is filter. This method works very similar to what it sounds like. Lets look at an example:

$('#ravens p').filter(':not(:last)').hide();

In this simple example we are simply hiding all the ravens paragraph tags, but not the last one.

We can also add elements by using the add method. It works fairly similar to filter except in the opposite way. Let's view an example:

$('#cardinals p').add(':not(:first)').show();

This would allow for your selected cardinal paragraph tags to have elements added by showing them, yet not the first paragraph tag.

Of course you can combine the two methods add and filter, to really get a fine tuned selection of elements. This is a great technique to do a lot with a single line of jQuery code.

Re Size Me

There are several cool jQuery tricks we can use when we resize any element in the DOM or the window itself. For example the resize event can be used to detect when a view is resized:

$(window).resize(function() { alert("You have resized this!"); });

This little bit of code will pop up an alert message letting you know when you have resized your browser window. Applied to a more practical use we can us the resize event to check if the user has modified the width of a webpage past a certain length. If they do, we change the format of the page to accomodate a wider page. We can also put an else in there to remove formatting if we resize the page more narrowly.  An example might look something like this:

$(document.ready(function()
{ accomodateWidth();
   $(window).resize(accomodateWidth);
 });

function accomodateWidth()
{ if($('body').width() > 600)
   { ... code to add page style for greater than 600px width ... }
   else
   { ... code to remove page style for greater than 600px width ... }
}

This allows for a greater flexibility of control over your page that makes end user experiences more flexible based on the size of their document window.

Chaining it all together

One of the really powerful features of jQuery is chaining several statements together. Instead of re-using the selectors or calling the this keyword you can instead just run multiple jQuery commands all from the same line. It really is easy once you get the hang of it, you are just appending statements onto the end of the previous statement. Lets look at a paragraph tag element that is going to have the show and fadeIn actions chained together:

$('p:selected').show().fadeOut();

In this example our selected paragraph tag shows itself and then fades out. In theory you can chain as many together as you like.

Easy Does It

While on the topic of animation there is an important element to consider called easing. This is basically a speeding up or slowing down of the animation, it also can be used to handle the actual control of animation using the two types of easing: linear and swing. As the names imply a linear animation is just a constant rate of motion; like a straight line. On the other hand a swing animation can start off fast, then slow down and then end the animation fast again. Lets look an example of both:

$('#importantMessage').animate({'height' : '-=200px'}, 2000, 'swing');

$('#importantMessage').animate({'height' : '+=200px'}, 2000, 'linear');

In this example we have the swing animation which will appear as a more natural animation while the linear animation will just appear to increase dramatically, then increase slightly, and finally finish the increase in size dramatically.

This is just the basic animation method. I encourage you to visit the jQuery libraries and find other more advanced forms of easing that use more elaborate algorithms to make the easing even more pronounced. For example there are additional jQuery libraries that do easing with an elastic look, or with a bounce, or even in circular motions among many other types of easing.

Sometimes you will notice your animation will be a little "bouncy". In other words it appears that the animation moves around slightly. This may be due to animating an element that is next to a tag with a margin. Typically to prevent this you will want to remove margins from any offending tags.

A brief dialogue on Callback Functions

Often when you are writing jQuery methods you will notice that you can include a special parameter called the callback function. This can be additional code that you can have run after the effect has been run on whatever method you are using. So for example say we are going to toggle a message:

$('#toggledMessage').toggle('fast', function() { alert('The message has just been toggled') } );

Normally we would have just ended with the 'fast' parameter but we included an additional function after it to be run. In this case the callback function is simply going to generate an alert notifying us that the effect has been toggled. This is a simple example, but we could call much more complex function calls in our calback method.

An important point on this is that these callbacks are refered to as anonymous functions because we are simply calling a generic function in this example that generates an alert message and not assigning it a name. This can be typically be used fairly safely as long as we only use it one place. However, a better idea as you get more famliar with jQuery is to pass a function name and define that function elsewhere in your code. It keeps it cleaner but certainly an anonymous function will work in most examples.