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:

  1. Temporarily insert the NexGen widget slideshow into your sidebar (ensuring width and height match those required for your header).
  2. Look at your website in a browser and view the code to find the section relating to the slideshow.
  3. Remove the slideshow widget from the sidebar.
  4. 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>
    
  5. Adjust your theme’s stylesheet and header.php as necessary, so everything looks nice.

23 Responses to “Inserting a NextGen slideshow in your header”

  1. Eddy Brown says:

    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

  2. Jimbo D says:

    Thanks so much for this, worked a treat.

  3. nycbone says:

    Thank You!
    I too was looking around for way too long.

    db

  4. domi says:

    This is great. Thanks very much !

  5. Mic says:

    This works! I’ve been searching the solution for an hour, this is the simplest!

  6. oneaustin says:

    Thanks for the advice. This works perfectly for what I needed.

  7. brittany says:

    Simple and straight to the point. Worked great!

  8. RR says:

    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.))))

  9. marvC says:

    Awesome! Indeed! Thanks for posting.

  10. Jess says:

    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?

  11. Jess says:

    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!

  12. NetBloke says:

    Thanks exactly what I was looking for! What a simple way to solve a annoying problem!

  13. Andre says:

    Hey man, you are awesome!! :-) ) Thanks for that hint!!! :-) ) Many greetings from Germany, André

  14. Raul says:

    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?

  15. Jimmy says:

    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

    • admin says:

      Hi Jimmy, I haven’t a clue about that one, sorry. Try the plugin author, who may be able to help.

    • Niesom says:

      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.

  16. Mike says:

    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!

  17. Deey says:

    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

  18. blogiskewl says:

    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

  19. FoeHammer865 says:

    Thanks!!!!! This worked awesome and exactly what I was looking for.

  20. There is an even easier way of adding the nextgen slideshow to your site template… just add the following line into the header.php

    For a full tutorial visit http://www.mackmangroup.co.uk/adding-a-nextgen-slideshow-to-your-wordpress-template

Leave a Reply