Multiple galleries on a single page

This page is about having more than one SmoothGallery on a single page. First, we’ll have a look at the implementation. Second, we think about a solution with WordPress and the SmoothGallery plugin.

How to do this

Having more than one gallery on a single page boils down to this:

1. add as many galleries as you want to you page, each having a different id, e.g. set the first one to myGallery, the second to myGallery2, etc.
2. insert as many CSS stylesheets as you’ve inserted galleries like so:

   <link rel="stylesheet" href="css/jd.gallery.css"  [...]/>
   <link rel="stylesheet" href="css/jd.gallery2.css" [...]/>

   Replace the id myGallery from the default stylesheet with your unique ids from step one.

3. what you did in step two with the stylesheets needs to be repeated with JavaScript variables that hold instances of your galleries. To do this add lines like the following:

   function startGallery() {
     var myGallery  = new gallery($('myGallery'),  { timed: false });
     var myGallery2 = new gallery($('myGallery2'), { timed: false });
   }
   window.addEvent('domready',startGallery);

Once you’ve done all that you’ll have more than one gallery running on a single page.

Implementation

If we wanted to implement this generically in a plugin for WordPress we would have to get the ids of every gallery that should be displayed on the current page. With this information we could generate the JavaScript and CSS.

This seems to work great if the markup for the galleries is inside a single post or page because we can simply implement a filter that collects every id from the content. This filter thing may even work for the frontpage of WordPress. Unfortunately this isn’t possible anymore if there’s a gallery in the sidebar: there must be a unique id for this.

Since this implementation might be time consuming I stopped working on it. If you’d like to help me working on this I’d really like to hear from you.