Inserting a NextGen slideshow in your header
I’ve been playing a bit with the NextGen gallery plugin for Wordpress and am very impressed with all that you can do and the various add-ons for making your pictures look pretty. We’ve used it over on niceweesites.com to organise our portfolio and on silversprite.com to display a slideshow in the header.
(Edit: Silversprite has now changed theme.)
The NextGen forums are currently closed and it took me ages to find the information I was looking for yesterday, so while it’s fresh in my mind, here are some notes on how to incorporate a NextGen slideshow into the header of a Wordpress site.
Install and activate the NextGen plugin. Create a gallery, add images and configure the options to display a slideshow. Full instructions here: http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/.
Then:
- Temporarily insert the NexGen widget into your sidebar (ensuring width and height match those required for your header).
- Look at your website in a browser and view the code to find the section relating to the slideshow.
- Remove the widget from the sidebar.
- Copy the relevant code to your theme’s header.php file. It should look something like this:
<div id="header"> <div class="ngg-widget-slideshow" id="ngg_widget_slideshow1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see the slideshow.</div> <script type="text/javascript" defer="defer"> <!-- //<![CDATA[ var sbsl = new SWFObject("http://www.yoursite.com/wp-content/plugins/nextgen-gallery/imagerotator.swf", "ngg_slideshow1", "780", "200", "7", "#FFFFFF"); sbsl.addParam("wmode", "opaque"); sbsl.addVariable("file", "http://www.yoursite.com/wp-content/plugins/nextgen-gallery/nggextractXML.php?gid=1"); sbsl.addVariable("linkfromdisplay", "false"); sbsl.addVariable("shownavigation", "false"); sbsl.addVariable("shuffle", "false"); sbsl.addVariable("showicons", "false"); sbsl.addVariable("overstretch", "true"); sbsl.addVariable("backcolor", "0xFFFFFF"); sbsl.addVariable("frontcolor", "0xFFFFFF"); sbsl.addVariable("lightcolor", "0xCC0000"); sbsl.addVariable("screencolor", "0xFFFFFF"); sbsl.addVariable("rotatetime", "10"); sbsl.addVariable("transition", "lines"); sbsl.addVariable("width", "780"); sbsl.addVariable("height", "200"); sbsl.write("ngg_widget_slideshow1"); //]]> --> </script>
- Adjust your theme’s stylesheet and header.php as necessary, so everything looks nice.


Thanks for this nice little bit of insight, I was just wondering how this was done so I’m of to go and try it out!
Cheers
Thanks so much for this, worked a treat.
Thank You!
I too was looking around for way too long.
db
This is great. Thanks very much !
This works! I’ve been searching the solution for an hour, this is the simplest!
Thanks for the advice. This works perfectly for what I needed.
Simple and straight to the point. Worked great!
Thank you!!!!!!!! I spent the whole day searching for such solution, almost gave up. My girlfriend will kill me for sitting the whole day in front of the screen.))))
Awesome! Indeed! Thanks for posting.