Ideals

I firmly believe that a site should still be functional, 508 compliant and still look good when styles and JavaScript are turned off. With this in mind we will be doing some "progressive enhancements" and since there is going to very little that won't work in all browsers I won't go into my rant about PE.

Structure

We will be using Definition lists; why definition lists? Because they are semantically correct for this situation. Have a look at two really good articles from Css-tricks.com and Maxdesign.com which go into detail on why you should use definition lists.

Below is the structure we will be dealing with, notice that we only have the DL/DT/DD structure and now wrapping DIV or any other extra mark up:

With PE in mind, we will use JavaScript to add in any additional mark up we will need to achieve the scroller look.

Current Progress

The content from our current progress is from a dump I did of my own site using WordPress' loop.

Styling

In our next layer of PE will are going to add in some style simple based off of the current structure minus the JavaScript.

Current Progress

In this phase we really did not do anything special, I just styled it as I would have normally. You can add more pop to it if you feel. Do note however, that at line 28 I am using a selector that IE6 does not support and since the extra padding for that element is a nice to have and really does not hold the user of IE6 back I felt it was ok to add that in there.

JavaScript

Now we start with the real fun, using JavaScript - in this instance, jQuery as our framework of choice, but you can just as easily use MooTools or DoJo - to add in some WOW factor. Here the plan is to wrap the DL in a DIV, add some classes to some elements, set up some events, and animations.

What we have in the example just below is some additional styles and elements.

Current Progress

Finally we have to set up the events and animation; what events do we need to set up and why? We need to bind the mouseenter and mouseleave event because if we want to be able to read what is being shown we need to be able to put our mouse over the content and have it stop any animations that are running so we can read it.

First thing we will need to do is to find out the total height of the grouped content is. The grouped content in this case is the DT/DD/DD/DD combination. We will be using the outerHeight() method to get the total height (padding/margin/height). To get that grouped content we will be using a combination of .children() and .slice().

Final

Final

Closing

So with the final product we have a decent footprint to stylize to your likings. Feel free to stylize it, add new functionality, new animation - some easin/easeout effects would look nice. Think outside of the box, just make sure it degrades nicely.

The purpose

So the purpose of this post is a) show you how to build an unobtrusive image gallery or photo gallery, how ever you want to say it, and b) show you have to create a jQuery plugin.

Step 1

So what I am going to do here is show you have to create an unobtrusive image / using a, "gasp," table. Why a table? Tables are so 1.0? Well, the definition of basically breaks down to, if the user has JavaScript AND CSS off, the gallery should still work and be laid out as planned.

Below is the structure we are going to start of with; nothing fancy, just old fashion html. Each image sites in a cell of the table which we can control the basic look by adjusting the cellpadding or cellspacing attributes.

Current progress

I am using the caption element to give the gallery a title, you could have simply done the below as well:

Step 3: The Style

Since we are planning for this gallery to still look good if JavaScript is turned off, we are going to need to give it some style, make it pretty. At this point, you are only limited by your imagination and, well IE 6, but that should never hold you back. That is another topic for another day.

We are going to keep it simple and just add some very basic styles:

Current progress

As it stands now, you can leave well enough alone and for the most part, people will be happy with your creation. They have a simply style, low bandwidth, accessible and functional photogallery that will do exactly what you want, display images and open an image when clicked.

But lets, kick it up an notch and add in the JavaScript; enter jQuery and the beauty of plugins.

Step 4: The JavaScript and the framework that we love, jQuery

For those who don't know what jQuery is, it is a JavaScript framework that helps you "write less, do more." Have a look over at http://jquery.com for more info.

We are going to create our plugin now that will take our current gallery and spice it up.

The basic pattern for a jQuery plugin is as followed:

Here we are using closures, I am not an expert, so I'll post some links at the bottom to other resources to help you understand why we are using this structure. But this is the structure we will be using for our plugin. What I can tell you is that the return this part of the code makes this plugin chainable.

We are going to keep this very simple, so we will not be passing any options or are we going to be creating any really complex situations.

What we are going to do is create some structure, get some data, and add some functionality.

The Variables

We will start out with creating some variables for use through-out our plugin:

The purpose of "var element = this;" is to keep us from getting confused when using this in other parts of the code.

The purpose of "element.index = index;" is for if we have more then one gallery on a page we will be able to reference the correct one if needed.

The purpose of "var $this = $(this);" is so that we don't have to do $(this) multiple times slowing down our plugin. This way, we can do $this.Method() and jQuery will not have to keep looking for what this is.

The purpose of "var $img = $('img', $this);" is to create a reference to all the images that are within our element.

The Structure

Our structure is going to be very simple and will look like:

With the DIV of "imageItem" having the same count as the images in your default gallery.

Why not just use the structure that is already created with the table? I personally feel you get more flexibly to style the Gallery and really punch it up by restructuring the gallery.

Lets get to building this structure:

The Thumbnails

Next up is getting our images and their respective links and then add our click event:

Ok, what do we have here, line 1 we start to loop through our images, line 2 setting a reference to the jQuery object for the image.

Line 3 is a reference to this.
Line 4 is our index
Line 5 is our reference to the link url

Line 6 and 7 is the height and width, this could be done a different way by create a new Image and creating a onload event where you grab the height and width and have the option to have a "loader" animated gif or notice text. I did nether to keep this as simple as possible.

You will notice starting at line 9 that I am using what is called chaining, this is a process of linking one method to another. But also notice that I put the new methods on separate lines. Why would I do this when I could have chained the one right after another? Because you actually need to be able to read your code. Although chaining is great and you can chain a ton of methods one right after another after another, if you can't follow what is going on, it is pointless.

You will see at line 9 I am using the clone(), this allows me to quick duplicate the DIV that I created in my structure code.

Line 10 I am appending the image to the newly cloned DIV and at line 11 I am appending both to the container that is housing our thumbnails.

At line 13 I bind a click event, which can also be done by doing $(SELECTOR).bind('click',function(){});, to the thumbnail.

Inside that click event at line 14 I take the reference to the larger image and set the src to the full url that I collected at line 5. But notice that I am using the .get(0) method with the .src attribute and not doing $(SELECTOR).attr('src',img.fullurl);. Why did I do it this way? To show you another example of the flexibility of
jQuery. JavaScript has a ton of built in attributes for each DOM element and using $(SELECTOR).get(0) is more or less the equivalent of getElementById. The 0 is referencing the first element found, so if you want to get the fifth element found, you can do .get(4).

Lets take a look at our Current progress. (note: this is unstyled and will just be a single column of thumbnails with the larger showing up at the bottom when a thumbnail is clicked. We will cover the styling in another post because there will be more then style that will need to be done.)

What you will see in the final example is just a list of thumbnails and once clicked you will see the full size image appear.

The Follow-up

I know I covered a lot and I was trying to keep it as simple as possible, so let review what we did. We create a basic photogallery using basic (x)Html and styles that will work fine if JavaScript is turned off or if a Screen-reader was used to view the photogallery. We then took that gallery and with the help of JavaScript and jQuery we created a very basic photogallery and a reusable jQuery plugin. We learned how to use some of jQuery's basic methods to grab an element and do something with it.

What we did not do is actually quite a lot. We did not add styles. We did not add any indicators that an image is loading. We did not resize the large image to fit with in a confined area. We did not create any preloading code that will preload the next large image in our list.

The Closing

I will be writing another post that will take care of our "We did not do" items. The purpose of the post was to show you how to build your own plugin and even how to build an effective photogallery.

The may be some items that you don't understand or would like me to elaborate on, feel free to let me know what those items are and I will try to clarify.

One such site was talking about CSS Image Rollovers and their examples consisted of a <A> tag wrapping a none breaking line space, I won't post a link because I have actually seen quite a few other sites doing the same thing and don't want to single anyone out. But what really made me frustrated is this particular site had a least 50 comments saying how great this was. While I don't consider myself an expert there are a few things I truly believe in: clean code and accessibility. As it stands now, my blog is not 100% accessible, there are things I need to do to make it better, and those things are in the works.

So, what I would like to do is show you a way of making image rollovers while being accessible, and search engine friendly.

Say we have an image sprite like below (we can cover the pros and cons of image sprites in another post, these icons can be found at http://utombox.com/my-works/):

The style sheet code:

The Html code:

The outcome:

youtube iconflickr iconrss iconfeedburner icondelicious icontechnorati icon

The Explanation:
Lets start off with the easy things to explain; in the instance above I am using an image sprite which, depending on how many external elements you need to load, will speed up load time. In the first class icon we are setting the background as the sprite and then proceeding classes we simply position the background image to get the desired image showing with both the default image and the hover.

The hard thing to explain, at least for me, is what everything in the icon class is doing. I will try, but if I mess something up, call me on it.

• display
  • -moz-inline-box: for mozilla based browsers
  • inline-block: supported by IE and all other grade-A browsers
• overflow
  • hidden: make everything hidden if it is outside the box (ie6, you know I talking about you)
• background
  • url: ummm... the background image
• text-indent
  • without *: applies to only block-level elements, table cells and inline blocks, since we are using -moz-inline-box, firebox will not use this
  • with *: IE does not support it correctly, so we set it back to 0
• font
  • 0/0 Arial: this is to set the text to a very small size, there are some browsers that do not support this shorthand, but I can't remember which ones off hand.
• color
  • rgba(255,255,255,0): this is a css3 spec and is only being supported by safari and firefox 3
• vertical-align
  • bottom: this is required for block elements to keep them inline with text

The Small Print:
There are some thing to consider when doing the rollovers or image replacements in general; it is not 100% accessible, meaning, although screen readers will be able to pick it up, people that can see, but have poor vision will not be able to set the font any bigger then what you have in your image.

With that said, have fun with it. Any questions comments or concerns, feel free to drop a line.

Update 11/21/2007: Came across a really nice article about css sprites, very good read.