Scotproof

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

Feed for this entry. Leave a response, or trackback from your own site.