Easy Integration of a Flash Image Gallery into your Wordpress web site

I recently started using the Nextgen Gallery on a project I just completed at exquisitecutandfashion.com. If you haven’t used Nextgen before, it’s an excellent image organizer that let’s you do things like automatic thumbnails, gallery metadata, and more. Have a look at some samples to get a better idea.

I have come to love Nextgen so much, I decided to use the plugin once again with another client, coastexpressions.ca because it supposedly gave me flash gallery capabilities. Integrating both together is normally a straightforward process inside a blog post. According to instructions, all you are supposed to do is use [simplegallery id=x] and you should be able to show the flash viewer. That wasn’t working for me. When I tried that same short code in the page header of a site nothing happened, and I wasn’t surprised. I assume it’s because the above short code only works inside the Wordpress loop (and probably where the plugin does some run time magic). Anyways, I found a different approach that works outside the Wordpress post loop and will almost certainly work for you anywhere on your site (including inside a Wordpress loop or in your blog post/page. Below are complete instructions:

What you will need

Wordpress web site
Wordpress Admin access and advanced coding skills
Nextgen Gallery
Nextgen Flash Plugin
Flash Photo viewer from AirtightInteractive

Step 1 – Install the Nextgen Gallery Plugin

Go to Wordpress admin, click Add Plugins, search for “Nextgen”, and Install the Nextgen Gallery plugin. If you haven’t installed a Wordpress plugin before, the rest of these instructions here aren’t going to make any sense to you at all. I suggest, you put this tutorial on hold, and learn a bit more first from here, here, and here.

Download the 1st plugin

Step 2 – Create a Gallery and add some Images

Once the plugin is installed and activated, find the new Gallery menu in your Wordpress admin. Create a new gallery (name it whatever you like), and add as many images as you like. Click the image above if you need some help.

Step 3 – Install Flash plugin

If you haven’t seen it before, a company called AirtightInteractive has some really great flash photo viewers you can get for free. In combination with one of those flash photo viewers (I’m using Simpleviewer in this example), we can show our Nextgen gallery on our site. In order to do that, we need a second plugin. Download and activate it.

Download the 2nd plugin

Step 4 – Download and Install the Flash files

Now that you have the 2nd plugin installed, you will need some flash files installed in your Wordpress Plugins folder. See below for detailed instructions (original instructions located here)

Create a folder in your Wordpress plugin folder called “nggflash-swf”.
Go to the web page http://www.airtightinteractive.com/ and download the SimpleViewer & Tiltviewer & AutoViewer & PostcardViewer
If you intend to use PostcardViewer, rename viewer.swf in the PostcardViewer folder to pcviewer.swf
Upload the file viewer.swf, TiltViewer.swf, autoviewer.swf and pcviewer.swf to the wp-content/plugins/nggflash-swf folder
Activate the plugin
Go to Gallery->FlashViewer. Enter the location of your SWF file.

Step 5 – Embed your Gallery

If you have gotten this far, you are doing well. You should have the following done:

Nextgen Gallery plugin installed, activated, and at least one gallery populated with images
Nextgen Flash plugin installed, activated, and configured (see Gallery->FlashViewer in Wordpress admin for configuration)

Now, get the ID of your Nextgen gallery as show below
Using the above ID, enter the code below anywhere on your site where you want the Flash viewer to appear.

   1: <div id="gallery">   2: <object height="480" width="950" type="application/x-shockwave-flash" class="simpleviewer" name="so1" data="/wp-content/plugins/nggflash-swf/viewer.swf" id="so1_1" style="visibility: visible;"><param name="wmode" value="opaque"/><param name="allowFullScreen" value="true"/><param name="bgcolor" value="#E2F0FD"/><param name="flashvars" value="preloaderColor=0x999999&amp;xmlDataPath=/wp-content/plugins/nextgen-flashviewer/xml/simpleviewer.php?gid=1"/></object>   3: </div>

In your code above, change gid=1 to the number of your Nextgen Gallery ID where 1 is replaced by your gallery id.

   1: ....php?gid=1"/></object>   2: </div>

Change your flash object width and height as well. I tried a few different sizes, and it seems that Simpleviewer doesn’t like anything smaller than 480 pixels in height.

   1: <object height="480" width="950"

If you are using Simpleviewer as I am, change your background color as well

   1: <param name="bgcolor" value="#E2F0FD"/>

If all goes, well you should have a functional flash photo viewer connecting to your Nextgen gallery. Got problems? Let me know.

Demo my Gallery

Tweet This Post