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 your 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, e.g. #myGallery to #myGallery2 et cetera.

  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.

Example

You can download a working example from here. Check out the demo.html and you’ll see the above tutorial implemented.

11 thoughts on “Multiple galleries on a single page”

  2. svm

    Hi,

    This is a pretty old article but I just came upon it, so hopefully I’ll get a response 😛

    I tried this method, but it doesn’t seem to want to work with IE7. One or two galleries seem to display properly but the rest just keep “loading”, and no pictures show up. The thumbnails do, and you can click on the images to bring up a larger size, but the images do not display in the slideshow.

    Any idea why? It works perfectly in Firefox. There are 6 galleries on one page.

    Thanks! This helped a lot but hopefully I can get it working for both browsers. For now I just stuck a “get firefox” button on there, lol.

  3. Christian Schenk

    Hi,
    I’m sorry but I’ve never tested this with more than two galleries on a single page and at the time of this writing it worked with Safari 3, Firefox 3, Opera 9.5 and IE 6.
    Have you considered putting the galleries inside iFrames instead?

  4. Rosso

    Hi, I’m also having a similar problem. I have 3 Galleries working great in FF but in IE7 and 8 I get a JS Error in Mootools 1.2.1-core.nc.js line 2830: window.fireEvent(‘domready’);

    I’ve found other old posts that fixed other issues but this seems to be something new with Mootools 1.2.1.

    Any ideas would be great.

  7. Sam

    I tried your code and it doesnt work if you have your galleries on two separate wordpress pages. Any ideas?

  8. Jan

    Hi,

    I am implementing a second slideshow on a oscommerce site. However I am unable to add the second variable in the same javascript instance, which is in the header. So my second instance is further down. I tried just changing the variable in the second one but it is not working, is there something I am missing?

  11. Marine

    Thanks a lot, it was the solution I was looking for, for my homepage: http://www.marinepacault.com.
    I was a bit ambitious, 4 galeries on the same page, but it works. OK, it is sometimes a bit slow, sometimes it works sometimes it doesn’t on IE…

    So I wanted to leave this message as a BIG THANK YOU.

    By the way, only one CSS for the gallery, separated from the css of the rest of the site.

    Hope you’ll like the result as much as I do!
    Many thanks,
    Marine.

Comments are closed.