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.

  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.

9 comments ↓

  • Adhamox says:
    August 22, 2008 at 7:30 pm
    Thank you very much.. i have been looking for this solution for hours.
    thumbs up.

    Adham

  • svm says:
    March 1, 2009 at 11:08 pm
    Hi,

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

    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.

  • Christian Schenk says:
    March 2, 2009 at 8:34 am
    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?
  • Rosso says:
    March 31, 2009 at 4:57 am
    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.

  • Richard Vernon says:
    April 4, 2009 at 7:37 pm
    Going purely on guesswork I came to much the same idea, except that I didn’t create a new css file, I just added myGallery2 to the existing one. It appears to work – I have a test page up at http://www.germanwinesdirect.org/winetourism3.htm with two galleries working, but the second one is slightly off to the left. I’m still working on it…
  • Christian Schenk says:
    April 5, 2009 at 10:26 am
    Hi Richard,
    adding margin: 0 auto; to the CSS selector #myGallery2 should solve your problem.
  • Sam says:
    July 13, 2009 at 1:23 pm
    I tried your code and it doesnt work if you have your galleries on two separate wordpress pages. Any ideas?
  • Jan says:
    August 27, 2009 at 9:37 pm
    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?

  • HenryB says:
    September 16, 2009 at 7:00 pm
    Hi Christian
    Thanks for the plug-in and your support.

Leave a Comment