So I’ve been searching around the web for a way to implement the NextGen gallery slideshow in the header of the WordPress blog and I was able to find a couple of pages out there explaining how to do it but they would either insert a standard slideshow with not much option to modify the behaviour or wouldn’t work at all.

The tutorials had little explanation of what each piece of the code meant, which honestly isn’t entirely their fault since there is little documentation from the people that create the imagerotator application that is used by NextGen for the slideshows. Se here is my best attempt at explaining how to get that working.

First the code

<div class="slideshow">
<div id="so234_1" class="swfobject" style="width: 1060px; height: 150px;"><script type="text/javascript">

var so234_1 = {
        params : {
                wmode : "opaque",
                allowfullscreen : "false",
                bgcolor : "#3C3C3C"},
        flashvars : {
                file : "http://blog.url/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=X",
                link : "http://blog.url/",
                linkfromdisplay : "true",
                shownavigation : "false",
                showicons : "false",
                kenburns : "true",
                overstretch : "none",
                rotatetime : "10",
                transition : "bgfade",
                backcolor : "0x3C3C3C",
                frontcolor : "0xFFFFFF",
                lightcolor : "0xF90",
                screencolor : "0x3C3C3C",
                logo : "http://blog.url/logo.png",
                width : "1060",
                height : "150"},
        attr : {
                styleclass : "slideshow",
                name : "so234"},
        start : function() {
                swfobject.embedSWF("http://blog.url/imagerotator.swf",
                                    "so234_1", "1060", "150", "7.0.0",
                                    true, this.flashvars, this.params,
                                    this.attr );
        }
}
so234_1.start();
</script>
</div>
</div>

Now to break it down. We have 4 different sections and this instance is identified by a name which can be set by the user.

In our example above the ID for the instance is “so234” and that is what can be changed and must remain unique throughout the site so that it doesn’t interfere with any other NextGen slideshows that may be inserted into a blog post or a page.

There are several instances within the code that set the height and width of the slideshow and those would need to be changed to fit the specific title area. In my blog I’m using a title area with a height of 1060 and a width of 150 and the lines which have those settings are as follows

<div id="so234_1" class="swfobject" style="width: 1060px; height: 150px;"><script type="text/javascript">
...
                width : "1060",
                height : "150"},
...
                                    "so234_1", "1060", "150", "7.0.0",
...

Another important line that needs to be changed is the one that, in the example above, has “http://blog.url/” and it needs to be changed to the URL of the blog, though one could alternatively use the code “<?php bloginfo(‘siteurl’); ?>” and simply forget about changing it everytime you move the header.php file around. So the code would go from:

file : "http://blog.url/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=X"
link : "http://blog.url/",
...
swfobject.embedSWF("http://blog.url/imagerotator.swf",

To this:

file : "<?php bloginfo('siteurl'); ?>/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=X"
link : "<?php bloginfo('siteurl'); ?>",
...
swfobject.embedSWF("<?php bloginfo('siteurl'); ?>/imagerotator.swf",

That way, if you’re developing a theme that will be made available, it won’t be hard coded to one URL. The “file” mentioned above is basically the “playlist”, as mentioned in the documentation by LongTail, that will be used for the slideshow and the X would get replaced by the ID of the album that you want to display. The “swfobject.embedSWF” needs the URL to the imagerotator.swf file so that the slideshow can be displayed.

The color of flash player can be modified to fit your blog colors so that it’s seamless and you don’t get a standard black box background and changing the values for the following variables

                backcolor : "0x3C3C3C",
                frontcolor : "0xFFFFFF",
                lightcolor : "0xF90",
                screencolor : "0x3C3C3C",

The color are set by their hex codes, just google for  ”html colors” and will get a couple of site that have the codes. One interesting bit is that you can make the background transparent while the images are loading so that an alternate image in case the user doesn’t have flash installed on their PC and that can be accomplished by changing the following code

        params : {
                wmode : "opaque",
                allowfullscreen : "false",
                bgcolor : "#3C3C3C"},

To this code:

        params : {
                wmode : "transparent",
                allowfullscreen : "false",
                },

You’ll see that when the slideshows loads the there won’t be any background color and also if you set the transition to bgfade then it will fade to the transparency thus showing the background image.

Remember to have NextGen Gallery installed on WordPress and also get the JW Image Rotator installed.

That is all that’s needed.

-LM