greg smart

This is a follow up post from “Using jCarousel with MODx“. Thanks to BobRay and smashingred over in the MODx forums for their help on this.

What we have done is taken a site utilizing a custom MODx snippet, coupled with the jQuery, jCarousel photo gallery script and created a photo gallery that should require a minimal skill level to manage.

The Challenge

As mentioned in my previous post I was able to take MODx and jCarousel and produce an easy to use photo gallery that only needed images and an unordered list to populate the script content. Once the initial phase of the site build was complete, I realized that by creating a MODx snippet we could dynamically create this unordered list by only placing and removing images in a specific directory. In my opinion this would further simplify the process for adding and removing images from the gallery.

The Solution

A MODx snippet was created (Here is the snippet code.). In order to replicate this just create a snippet in MODx named ‘directory’ and then call it in where you want the gallery placed as [!directory? &Location=`yourdirectory`!]. Now the assumption here is that you are working with images inside of the ‘assets/images’ directory of Modx. Of course the jCarousel code is necessary as well. You can see the gallery snippet in action here.

NOTE: There is a slightly different jCarousel version for placement of multiple carousels on a single page.

More Possibilities

We are looking at the possibility of using this for more than just image galleries. This would likely require more extensive work with the snippet and would include the use of another snippet variable to denote the type and location of the document directory in question.

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: