greg smart

Content precedes design. Design in the absence of content is not design, it’s decoration.

Jeffrey Zeldman

Bookmarks:

As I begin writing this post I have added the category jQuery to my blog. Although this is an area in which my skill level is the least developed I believe that the use of JavaScript and JavaScript Libraries will take on a increasingly important role in Pleth, LLC’s future project developments.

During the creation of a new agriculture site I recently discovered the jCarousel jQuery plugin. This creates a flexible little photo gallery that can be completely styled to match your surrounding site. I have also been pleasantly surprised to discover that when used within the MODx Framework it allows us to create a photo gallery that can be easily updated by a client through the CMS.

How It’s Done

First of all download the jcarousel.zip file from the site site mentioned above. You will also need to choose which Static, Dynamic, or Special version of jCarousel that you would like to use. I am referencing the Static, Simple Carousel in this example. Unzip the file and upload it to your server, the entire jQuery library is contained within the download.

Next, let’s switch to Modx and create a Template Variable (TV) named jQuery [*jQuery*] that will reside within the head tags of your site. The use of the TV is not an absolute necessity as you can simply place the CSS call-ins and JavaScript code directly in the header chunk or relevant template. I opted for this approach since the all of the code necessary to create and display my gallery with only be loaded specifically on that gallery page. The “Tango” skin files, in the download, were modified to change the look of the gallery.

The code for an unordered list was then placed in the content area of the page (this is all the code that is required to display the gallery). Each list item tag contains an image reference. The script simply orders the list items and then displays them one at a time with each click of the mouse.

The real beauty of this combination is that the end user can, with a little instruction, be taught to upload an image through the MODx admin and then add another list item to that gallery page. This left us with the possibility of a completely self-managed photo gallery solution.

Possibilities

I am also planning on looking into a modification that will dynamically generate the unordered list items based solely on the contents of a target directory. This would allow for a much simpler, client-side process since they would only have to upload images to a directory to add to their site’s online gallery. After completing some rudimentary testing it appears that this can be used to display text as well as images. This makes jCarousel as an interesting option for displaying general content as well.
The follow up to this post is here.

Bookmarks: