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
widgetslideshow 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 slideshow 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.
Fantastic! So easy and works like a charm. THANKS!
Do you know if there’s a way I can restrict the slideshow to just showing one gallery, instead of all images?
Sorry, just answered my own question. When you insert the slideshow widget you tell it which gallery to get the images from. Duh. lol. Thanks again!
Thanks exactly what I was looking for! What a simple way to solve a annoying problem!
Hey man, you are awesome!!
) Thanks for that hint!!! 
) Many greetings from Germany, André
Hello all,
Yes that is one way, however there is a shorter way….
And, of course, you put the # of the Gallery to Slideshow that you want to show.
In the NGG Options/Slideshow/, you have to set the dimensions (width and height) to the ones specified by the Theme picture, and the rest of the galleries (like side bar or post,page,etc) you enter the desired dimensions in the dialog window….it works great!!!
I am now looking to set the slide show in the header, but as background, meaning, I want the text to be shown fixed and layered up frt…
Any one knows how?
Hi
Thank you for the tutuorial and I have successfully integrated the slideshow into the header at http://www.asiswhereis.info. But the slideshow, at times does not show and what i see is a white space. Upon right clicking, it shows “movie not loaded” . do you have any fix for this. I really appreciate any help.
Jimmy
Hi Jimmy, I haven’t a clue about that one, sorry. Try the plugin author, who may be able to help.
I had the same problem. Try to go to Gallery / Options /Slideshow and there, in the field “Path to the Imagerotator ” click on the “Search now >>”.
It finds the full path to the imagerotator.swf.
This helps to me.
Howdy!
Can you tell me how you configured NGG to show the next image in the gallery on mouse click (as seen at http://www.niceweesites.com)? All I can get mine to do is close the image/pop-up and return to the image list – I’ve been fighting with this for a couple of days
Thanks!
In case it helps anyone else to clarify this…
The widget you put in the sidebar isn’t called ‘NextGEN Widget’ – I had that on and it does a thumbnail gallery. The widget you want is called ‘NextGEN Slideshow’. May be obvious to most but I missed it for a while.
Once you have that, you see the script code (that you’ve shortened, above) and can go and change the dimensions, like Raul says, above. There are two instances of width and height – one set in ‘flashvars’ and the other after ’swfobject.embedSWF(…’.
Cheers, D
Hi, I recently started a bloghosting platform (based on wordpress MU) and when I stumbled your blog I paid attention to your theme (looking good) so I was wondering can you tell me is it custom made theme or one of those free ones? thanks in advance! regards, blogiskewl
It’s my own theme that I packaged up and made available to download. In the latest version you can choose between blue and brown: http://www.niceweesites.com/wordpress-theme/