WordPress Photo Slideshow with NextGen Gallery

After looking into tons of solutions for a WordPress photo slideshow, most of them being flash applets, I’m confident that I’ve found the very best one. And it’s not even Flash, it’s just JavaScript.

Are you familiar with the NextGEN Gallery plugin? Well, you must be, since it’s probably the most downloaded photo gallery plugin. Well, we’ve found a little addon plugin that integrates NextGEN with GalleryView, an excellent jQuery gallery plugin. What more could we want?

So, here’s how everything works. You upload and activate the NextGEN Gallery plugin, then you create a gallery and put some nice pictures there, right? Then you upload and activate the little addon plugin I mentioned earlier.

In order to output your slideshow to a post or a page, simply add a code like this

[nggallery id=1 template=galleryview images=0]

The only minor downside is that in order to customize your slideshow you need to take a dip into the treacherous waters of coding. Inside the nggGalleryview directory you will find a view directory, and in there, you will find a file called gallery-galleryview.php

Editing the plugin

Open it and you’ll see a bit of JavaScript code with a set of configuration options for your slideshow, on line 37.

<script type="text/javascript" defer="defer">
	jQuery("document").ready(function(){
		jQuery('#<?php echo $gallery->anchor ?>').galleryView({
			panel_width: 450,
			panel_height: 400,
			frame_width: 40,
			frame_height: 40,
			transition_interval: 0,
			overlay_color: '#222',
			overlay_text_color: 'white',
			caption_text_color: '#222',
			background_color: 'transparent',
			border: 'none',
			nav_theme: 'dark',
			easing: 'easeInOutQuad'
		});
	});
</script>

These are the default settings. You will need to modify panel_width and panel_height to have a different sized slideshow.

Now we also have to modify the css a bit. By default the images also get a css width and height.

Open up galleryview.css. On line 57 we have:

.galleryview .panel img { width: 450px; height: 400px;}

Modify these with the same width and height as in the javascript code above. Now you can have a slideshow exactly the width you need.

This will work for most people. However there are a few bugs that need ironing out inside the original css. By default it works ok, however I want to make some slight changes.

1. On line 61 inside the galleryview.css change from overflow hidden to visible. This will fix the last thumbnail to be 10px smaller in width then the rest of the thumbnails.

   .strip_wrapper{ overflow:visible !important; }

2. Now we need to move the right arrow over to the right 10px.

   .galleryview img.nav-prev { padding-left:20px !important; }

3. Finally, if you’re using the Thematic Theme Framework for WordPress we need to add a small css fix. The problem is that both the plugin and Thematic share a common css class, named nav-prev. Because of this your right arrow will be stretched to 50% of the post width . This is what we need to add to the end of the plugin’s css:

   .galleryview img.nav-prev { padding-left:20px !important; }

Going a bit further with our resolve.

For this plugin to be really useful we’ll probably need to be able to include it inside out theme files. By default it doesn’t have a function that will print out the gallery. To go around this we’ll use the do_shortcode() WordPress function.

<?php echo do_shortcode("[nggallery id=1 template=galleryview images=0]"); ?>

Our gallery demo. It’s now 600px wide and 400 tall.

people in the sun

voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

a lady

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

some flowers

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut

an autumn road

laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

a lake

labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

fields

laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

a misty road

labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Loch Morlich sunset

View west across a frozen Loch Morlich towards the setting sun. Taken in the Cairngorms National Park at Glenmore near Aviemore.

a stream

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut

• 
• 
• 
• 
• 
• 
• 
• 
• 

Conclusions

I’ve actually searched quite a lot after an out of the box WordPress image slideshow plugin. While GalleryView dose offer a lot, it also falls short in many areas.

• It hard to modify by non-technical users.
• There is no way to have two different sized slideshows.
• It’s recommended that the images are fixed sized when you upload them. Otherwise there is a chance they will look squashed.

On the other had, in the hands of a developer or a power user it will be able to cover a large range of problems from normal in-page slideshow to an automated slider for a site’s leaf pages.

So with this in mind I would recommend you play around with GalleryView plugin for NextGen next time you need an image slideshow!

Further Reading:

1. Use WordPress as a CMS with Thematic – Part2
2. Use WordPress as a CMS with Thematic Theme- Part1