Integrate SmoothGallery into WordPress

Lately I’ve been working on a plugin that integrates JonDesign’s SmoothGallery into WordPress. Basically this is pretty straightforward because all I had to do was to build some code around the JavaScript and CSS and put everything into a plugin.

Then I was told that the plugin as I built it wasn’t working with Internet Explorer. I booted up Windows and came up with a solution to this problem that I want to share here: don’t embed SmoothGallery and Prototype on the same page.

SmoothGallery and Prototype

Jonathan warns us on the download page that he doesn’t recommend the namespaced version of SmoothGallery because of incompatible frameworks like Prototype or jQuery.

I did some tests and found out that SmoothGallery doesn’t work with Prototype at all – if you’re using Internet Explorer. You can download the tests here: Just open the HTML files and check whether the gallery is present.

Have a look at my results:

SmoothGallery Prototype Internet Explorer Firefox Safari
1.2 Present Doesn’t work Works Works
1.2 Not present Works Works Works
2.0 Present Doesn’t work Works Works
2.0 Not present Works Works Works

If you try to use SmoothGallery with Prototype enabled in Internet Explorer the gallery won’t be rendered; I have tested this with version 6 and 7 of IE. No problems with Firefox or Safari though.

There’s another thing I noticed: if you change the order of the script entries in the HTML header IE will display the images of the gallery in two different ways. Either you’ll be able to see all pictures in the gallery or you’ll just see the first one.

Another observation is that SmoothGallery breaks apart if you insert an a tag with the name set to options. Once you’ve inserted such an anchor IE won’t render the gallery; again no problems with Firefox or Safari.

Conclusion

I’ve just explained what I observed testing JonDesign’s SmoothGallery and Prototype with Internet Explorer, Firefox and Safari. I didn’t take a look at the JavaScript and didn’t search for a solution there.

If you want IE users to watch a smooth gallery on your website it seems that there’s no other way than to get rid of Prototype – remove it at least from the specific page you’re using a SmoothGallery on.

5 comments ↓

  • Milad says:
    Hi,
    thanks for sharing, very informative…
    any updates?
    still no cure?
    how about the smoothgallery plugin for nextgen?
    same problem?
  • Hi Milad,
    cure: embed SmoothGallery inside an iFrame; a feature available to my plugin and the SmoothGallery plugin for NextGen.
  • Milad says:
    i ticked the iFrame option in the SmoothGallery plugin for NextGen but it didn’t work.
    i am using the wp-coda theme which uses prototype i guess.
    i will try your plugin in iframe and will see…
  • Genevieve says:
    I’m using iframes with smoothgallery, but IE still won’t show images–i just get a white box. I have no idea how to tell if any of my plugins use Prototype–how do I tell?

    http://www.indigostudiophoto.com (please ignore design and annoying autoplay of song–it’s client’s design…)

  • Hi Genevieve,
    it’s just working fine here, so it seems like you were able to fix it, right?

    I have no idea how to tell if any of my plugins use Prototype–how do I tell?

    Just have a look at you site’s HTML and search for any occurrences of jquery. If you’d like to find the exact plugin that’s causing this you can either search the source code or disable all plugins and turn them on one after another, always looking at the HTML and watching out when jQuery gets included.

Leave a Comment