InnerFade Plugin

I am just starting to experiment with using jQuery in my Drupal theming work. My most recent endeavor was to use the awesome "http://medienfreunde.com/lab/innerfade/">InnerFade plugin to get a div with some images to display a slideshow and rotate the pics through.

You should check out the InnerFade plugin, because it’s very powerful- it basically takes a group of items (be that pictures, list items, paragraphs etc.) inside of some container and then rotates through them in a container.

Working with .tpl.php’s

I was modifying a .tpl.php file for the fields of a view output, because the image rotation I wanted was made up of images coming from a view. Each item output from the view would have this div #pic-rotate and inside the images.

 content ?>
 content ?>

To work its magic, I referenced #pic-rotate in my InnerFade script. After some testing, it was not working, and I had NO IDEA WHY. All three files were referenced in my head: jquery, innerfade, my innerfade script.

Hit head on desk

Well the problem was easy, if you haven’t already caught on. In my .tpl.php file, I was using an ID selector for a div that would be repeated multiple times on the same page. (Because this .tpl.php was going to apply to each item from the View…)
Once I changed the div in question to a class, everything worked fine.

 content ?>
 content ?>

Summary

When you are working with .tpl.php’s and jQuery, or just in general, remember that if this is a template that will be used for repeated items on a page, you need to be careful with your ID selectors. A CSS ID should only be used once per page.