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.

The "Benjamin Sterling Galleries" plugin has been renamed and recoded with a ton of new features. The new URL is http://benjaminsterling.com/photoxhibit/ and although support will still be given for this version (1.6.2) I would suggest you checking out PhotoXhibit

Comments for this post are closed, please go to PhotoXhibit for support.

What is it?

A godsend plugin for anyone who wants to add a photogallery to their website using WordPress and jQuery.

Download (current count: 1,810)

Download Benjamin Sterling Galleries Version 1.6.2

• Download zip version

Features

• Pull in photos / images, thumbnail and large size, from just about everywhere
  • from flickr via rss or their json api
  • from picasa via rss
  • from a local folder
  • from photos / images already in the WordPress database
• Ulilizes the jQuery JavaScript framework's power and a ever growing list of great photogallery plugins
• Drag and drop reordering of gallery images
• Change functionality of your photogallery with few clicks of the mouse
• Combine photos from multiple accounts and services
• Embed your gallery in posts or anywhere on your site
• Galleries are 508 compliant and will degrade nicely when JavaScripts are turned off
• Preview your gallery on the fly

Resources

• Demo/Dev install (test/test)
  • WordPress 2.3
• Support
• Timeline
• jQuery Gallery Plugins Used
  • jqGalView
  • jqGalViewII
  • jqGalScroll
  • cycle

History

While wordpress does have a ton of image / photo galleries, I felt that none of them really gave you control over everything in an easy unobtrusive way. Not to say this this plugin is the is all be all, but it will get there.

In my hunt to find a good one for my wife and installing all the ones that I thought had what was needed, I found that none of them made it easy. My wife is a very smart woman, so when she gets frustrated with something it most likely not her. So after a few months of her beating me, I decided to build some jQuery gallery plugins which you can find on this site. This was able to keep her happy for a bit, but I had to go in and make changes everytime she wanted to add and image or take one out. After doing this a few times I decided to just put together a quick plugin that will take in the images via a picasa feed provided by her and let her do the changes her self.

After showing this plugin to a few other developers they suggested I should make it into a full fledge plugin and well, here it is.

Prerequisites

• WordPress 2.1 or higher
• A Flickr account and api key or
• A Picasa account or
• Images in a local directory or
• Images in your WordPress database

Aside

Although this plugin was test on a pc in IE6, IE7, FF2, and Opera 9.24 and on IIS6 PHP5, Apache PHP4 & PHP5 and feel comfortable that this plugin will work flawlessly, I am the creator of the plugin, thus, I am naturally going to use it the way it is supposed to be used and not have any issues. That is where you come in, any and all comments and concerns should be posted asap and I will build up a punch list of fixes. Also, if there are jQuery or even other Javascript libraries that have nice photo / image gallery plugins, let me know and I will see what I can do to add that into the mix.

Timeline

Here is a brief timeline of what I hope to accomplish and in what order. There is no exact date for each release, but the time between each release should not be more then two months.

• 1.2 current release
• 1.3
  • Add more Picasa interaction
    • interactions tbd
• 1.4
  • Add more control of the style for each jQuery photo gallery plugins
    • The thought is to possibly have all the styles embedded in the database
      and then have those styles transfer over when
      you create a gallery.
  • Add better control over parameters for jQuery photo gallery plugins
• 1.5
  • Add the ability to change the alt text for each image no matter where
    the image is from
    • The thought is to possibly have an edit icon appear when mousing over
      an image

Installation

If you have ever installed a plugin, then this will be pretty easy.

1. always back up your WordPress before making any modifications.
2. Extract the files. Place the benjamin-sterling-galleries directory into wp-content/plugins/
3. Login to the Site Admin and go to Plugins and active Benjamin Sterling Galleries
4. Then it can be configured from the BSG menu that you should now have on the top menu bar.

More Info

Let me try to explain what this plugin actually does; it builds image galleries or photo galleries. Wow, I know, that was descriptive. But since you look like you are still puzzled by how it actually works, I will go into a little more detail. Say you have a Picasa photo album with all these really nice photos that you want to add to your site either in a post or in the side bar. But, you don't want to use the "slideshow" feature that they provide. Well, with this plugin you simply use your rss feed link for your Picasa photo album and paste it into the lovely interface that is provided by the Benjamin Sterling Galleries plugin. Then you select what size thumbnails you want to preview and you click a button and wham, you have all your images/photos listed on the page. You double click on the ones you want to add to your gallery, you fill in some info, select the style of gallery you want and click another button and wham, you have a preview of the gallery that can be added to your WordPress. What? You have a Flickr account too? Well if you did not click the button to add you gallery yet, go a head and paste in the url to your Flickr rss feed and click the first button and there you go, a list of your Flickr photos. Double click on the ones you want and click build gallery and there you go, a photogallery with both your Flickr AND Picasa photos!

The other nice thing about this plugin is that you can re-order the images you want in your gallery. Simply click and drag the images you want to move around and put them wherever you want in the gallery.

Ok, with out rambling too much more, let me ask for your help. What do I need up with? Well, my instructions are very minimal, do I need more? I only have four photo / image gallery plugins installed, do I need more? If so, which ones do you like? And why? Is there a feature that is needed/that is missing? What is it?

The download link is below, please leave comments to help me make this plugin better.

Download: http://wordpress.org/extend/pl.....galleries/

My muse S.Sterling http://www.neurosesgalore.com

This is the jQuery Gallery View II plugin (jqGalViewII) which takes a list of your images and creates an easily styles photo gallery. This plugin will preload all of your larger images for faster viewing.

The Head

The Body

And that would produce the following:

The Downloads

Download zip with demo and styles: http://bs-jquery-plugins.googl.....II.1.0.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.

jqGalView Overview

The jQuery jqGalView Plugin allows you to take a grouping of images and turn it into an flash-like image/photo gallery. It allows you to style it how ever you want and add as many images at you want.

Inspired by http://www.flashimagegallery.com/pics/artwork/!

Feel free to vote for this plugin over at http://ajaxrain.com/search.php?seVal=jqGalView

The jQuery jqGalView Plugin's purpose is to be unobtrusive as possible and after looking at a lot of static photo galleries I feel the jQuery Gallery Viewer does just that. It takes any current structure and rips out the images and any parent link and turns a static photo gallery in to a dynamic flash-like gallery.

I tried to make this plugin as easy and flexible to you, for example, doing:

The head stuff

The xhtml

Will produce the following, with styling and more images of course

The Small Print

So you see, it is pretty simple to take your list/group of images and turn it into a nice photo gallery with some styles. In this instance, it is taking the images you have in a unordered list, but you are not limited to that at all. You can do a table:

It can just be a div:

In our first example you see that I am using an image wrapped in A tag, this is the default setting where you don't need to do anything other then $('#mygallery').jqGalView(); (ok, it may be a good idea to style things). Check out the Option tab to see a list of parameters that can be used to further customize your Web Album/Photo gallery and check out some more demos under, you guessed it, Demo.

The Demo(s)

The below implementation...

will produce below

Downloads

Download zip with demo and styles: http://bs-jquery-plugins.googl.....ew.2.1.zip
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.
The jQuery Easing Plugin v1.1.1 is available at: http://gsgd.co.uk/sandbox/jquery.easing.php.
The jQuery jqModal Plugin v2007.08.17 +r11 is available at: http://dev.iceburg.net/jquery/jqModal/.

Why jqAlbumParser? Well, after building a few photo gallery plugins and plans for different variations of flash-like galleries (I am on a convert flash apps to jQuery ran apps kick), I found myself wanting to use other peoples photos, ie. friends and families, but did not want to download them. So I wanted to be able to bring in Picasa and Flickr photos, but sadly their JSON formats are different, I needed a way to pull them both in on the same page and be able to use them with the same functions and so I figured I'd bring their JSON and parse them to my own object and poof, jqAlbumParser! Anyway, I am rambling, check out below and if you have any question (since I know my comment and explanations suck) post a comment and I will get back to asap. Also, if you use this plugin, drop me your url and a brief description of your site and I will be sure to post it to my Plugin Repository page.

The Basic Demo

Picasa | Flickr

The Simple Code

The xhtml

PLAIN TEXT

HTML:

1. <a href="http://picasaweb.google.com/data/feed/base/user/sterling.benjamin/albumid/5065213814603581825?kind=photo&amp;alt=rss&amp;hl=en_US" class="jqAlbumParser
2. wa:picasa">Picasa</a>
3. |
4. <a href="http://api.flickr.com/services/feeds/photos_public.gne?ids=11983862@N00" class="jqAlbumParser
5. wa:flickr">Flickr</a>

The head stuff

PLAIN TEXT

CSS:

1. <style media="all">
2.     @import url("/articles/jqGalViewII/common/css/jqGalViewII.css");
3. </style>

PLAIN TEXT

JavaScript:

1. <script type="text/javascript" src="/articles/common/js/jquery-1.2.1.pack.js"></script>
2. <script type="text/javascript" src="/articles/jqAlbumParser/common/js/jqAlbumParser.js"></script>
3. <script type="text/javascript" src="/articles/jqGalViewII/common/js/jqGalViewII.js"></script>
4. <script type="text/javascript">
5. $(document).ready(function(){
6.     $(".jqAlbumParser").jqAlbumParser({
7.         pluginExec : function(){
8.             $(this).jqGalViewII();
9.         }
10.     });
11. });
12. </script>

The Small Print

So you see the set up is somewhat simple; in the example above I used the jqAlbumParser in conjuction with the jqGalViewII plugin so you can see how I envision a person would use this plugin. You will be able to use the jqAlbumParser with any of my plugin, and any photogallery plugin that works with the same structure that this plugin can put out.

To get the url for your Picasa album, go to your account and then the album you want; go to the bottom right corner and you will find a RSS feed link and either right click and click copy link location or click that link and copy the url from there.

To get the url for you Flickr album, go to the photo section of your account and go to the bottom left and copy the RSS link.

You will also notice that in the demo links that there is a "wa:picasa" and a "wa:flickr," if you are not going to add separate jqAlbumParser calls for different services, ie. Picasa and Flickr, you will need to add one of those to the correct link.

Now you are probably asking yourself, "How do I get this to execute when the page loads?" or "I tried 'load' as the "triggerEvent" but it does not work, how come?" The answer, do:

PLAIN TEXT

JavaScript:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $('.jqAlbumParser').jqAlbumParser({
4.         pluginExec : function(){
5.             $(this).jqGalViewII();
6.         }
7.     }).click();
8. });
9. </script>

or

PLAIN TEXT

JavaScript:

1. <script type="text/javascript">
2. $(document).ready(function(){
3.     $(".jqAlbumParser").jqAlbumParser({
4.         pluginExec : function(){
5.             $(this).jqGalViewII();
6.         }
7.     }).trigger("click");
8. });
9. </script>

The download

http://benjaminsterling.com/ar.....mParser.js

The Head

The Body

The Outcome

Options

Below are a list of options you can pass to the jqGalScroll plugin.

Styling

I am in no way a great designer, so the example is very bare, but the follow urls are sites that done a nice job with the plugin:

• http://www.ryanbrenizer.com/wedding_portrait

Thanks

Koes put a fire under my butt to improve this plugin and when I took too long he took what I had and added the horizontal scroll and in turn I ripped it from his hands and made it better :) http://www.koesbong.com/

Download

The jqGalScroll v2.1 Plugin is available at: http://bs-jquery-plugins.googl.....ll.2.1.zip.
The jQuery core is available at: http://code.google.com/p/jqueryjs/downloads/list.
The jQuery Easing Plugin v1.1.1 is available at: http://gsgd.co.uk/sandbox/jquery.easing.php.

This version no longer supported

Changes have been made and all new updates will be posted at http://benjaminsterling.com/20.....jqshuffle/