So, let the brainwashing education begin!

The Tabs

Take a look off to the left I moved the demo here, do you see the three tabs that are there, they are so spectacularly named "tab 1", "tab2" and, yup you guessed it, "tab3."  The html structure is pretty straight forward:

You will notice that there are no links for the tabs and this is because we will create them on the fly.  Why?  Well, other then that I have a plan to show you some new tricks, imagine that you have JavaScript turned off, those will just be pointless links with a hash in them.  You can probably argue that we can put an ID with each tab and that link will be a link hash to that ID, and I will say that you are being brainwashed educated to my thinking.

The CSS

This part is actually completely open to you to format how ever you want, my initial thought was to do a bunch of "progressive enhancements" - don't you love buzzwords for not truly supporting older browsers - that would entail some gradients, rounded corners and dropshadows, but the point of this post was not to show off my CSS3 prowest.  The point was to show you some fancy methods so here is the CSS I am using:

The jQuery

Alright, we are at the meat and potatoes the corn and the cob the Larry and Moe (and Curly)... sadly that is the best I can do with those analogies.  Any who, we are at the JavaScript, what I will do is post the code and the try to explain what is happening line by line:

Update: Moved the demo to a separate page.

The Explanation

Lines 1 and 2 are just some variables that I will be setting and reusing through-out the code.

Line 5 I set the "jqsideTabs" variable to reference the jQuery object for the element with an ID of sideTabs and I also add a class of "close".

Line 7 a reference is being set and I will point a little later below what that is actually being referenced too.

Line 8 we look inside the jqsideTabs DIV for the H3 elements that are inside the ".tab" DIVs.  I can just as easily do jqsideTabs.find('.tab > h3') to make sure to the H3 tag directly below the ".tab" element or jqsideTabs.find('.tab h3:first-child') to make sure I grabbing the first H3 that is the first element under '.tab'.

Line 9 we clone() those H3 elements, if we do .clone(true) we will also clone any events that are bound to the H3.

Line 10 we append the cloned H3s to "jqsideTabs"

Line 11 through to 51 we are looping through those H3s to do some fanciness.  Notice the "i" in the function?  That will be returning the index of the loop starting at zero (0).

Line 12 some variables are set up.

Line 14 we check if we are on the first index, which is zero (0), and then set the "cls" variable to "active".

Line 15 we set up a reference to a new DOM element/jQuery object that has the text of the H3 element by using "that.text()".

Line 16 we replace the H3 with the newly create DOM element, the A element/tag/

Line 18 we get the outer width (.outerWidth()) of the element, outerWidth() will get the full width of the element including border and padding, if you were to do outerWidth(true) you would also get the margins.

Line 20 we check if it is the first index again and if so, set the variable "ra" to the outer width

Line 21 is the else part of line 20 and here we set the "r" variable.  Both "ra" and "r" will be used for "right active" and "right".  You will see their purpose shortly.

Line 23 is doing a few things, 1) it is setting the top and right positions of the element and returning the .height() of the element plus the previously stored height at the same time.

Line 25 we are using the .get(0) method against the newly created A tag and this will give us the equivalent of doing a getElementById.

Line 26 we set the reference now so that we don't have to re-look up this element later on, the speed gain is probably minimum at best but I makes me happy to do this and really, that is what it's all about.

Line 27 and line 26 we are doing something specific and really can't remember what it is called, maybe "assignment," but basically we are storing some data directly in the DOM to be used later.

Line 29 we add a .click() event to the A tag we created.

Line 30 just to stick to a decent naming conventions I take the varariable I set earlier and plop it into a new variable call "el" (short for element)

Line 32 to 34 we check to see if the jqsideTabs element has a class (.hasClass()) of "closed", if so, remove that class.

Line 35 to 37 we check to see if the jqsidetabs element does not have a class of "closed" and the current element has a class of "active", if so, add the class "close".

Line 40 we grab all the .siblings(), in this case, all the .tab DIVs and links that were created.

Line 41 each item returns will have the class "active" removed.

Line 42 the default right position is set for those elements.  But let me note something real quick, in this case I am going with the assumption that I did not set the "position" of the .tab elements to anything, meaning, they were not set to relative or absolute.  If I did this I would need to change siblings to only grab items at are A tags to be sure I only grab the, well, A tags.

Line 43 the .end() method is used, this brings the reference back to "el" at line 39.

Line 44 a class of "active" is added.

Line 45 the right position is set to the "ra" variable.

Line 47 with the reference of tabs that was set back at line 7, we find the DIV or .tab that equals what ever that index (i) is match to, in the example it can be either 0, 1 or 2, then we show that one and then hide its siblings that have a class of ".tab".

Line 49 a return of false is used to stop the default action of the link.

Line 52 end() is used to give reference back to the H3 tags.

Line 53 we use .parent() to grab the parents of the H3 tags.

Line 54 we filter down to the first element in the parents by using .eq(0).

Line 55 a class is added to that returned element from line 54.

Line 56 we go back to all the parents by using .end()

Line 57 filter is used with the combination seletor of ":not()" and ":eq(0)" to grab all the DIVs (the parents of the H3s) that is not equal to the first one.

Line 58 then we hide the returned elements

Line 59 here we use end() to finally set the "tabs" variable that we have way back at line 7.

The Closing

Ok, are you brainwashed educated yet?  Could I have combined a few steps or could I have writen some of my selectors to be a little more precise? Sure I could have.  The beauty of coding with jQuery is that there can be any number of ways to approach the same exact issue.  But do keep in mind that my way is always the right way.

But seriously, there are a lot of ways to use the jQuery framework, you have to find the way the best suits you.  And the only way to find that out is to learn how others do it and read the docs and learn the selectors and traversing methods.

As always, please feel free to check me if I got something incorrect or if you think you can do better.  I am just as open to learning as you should be.

So without rambling on anymore, here is the presentation screencast.

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 / [tags]photo gallery[/tags] using a, "gasp," table. Why a table? Tables are so 1.0? Well, the definition of [tags]unobtrusive[/tags] 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.