May 29

NextGEN Gallery WP Plugin

(May 29th, 2008) Author: TheSizzle in Category: Open Source, Photography

I can never leave well enough alone, so I started playing with the NextGEN Gallery WP Plugin today to spice things up. It has a fantastic administrative backend to create galleries of images and then albums of galleries, all of which can be easily inserted into posts using a small tag. While customizing this plugin, I stumbled upon the Highslide JS project which can be integrated into NextGEN, after some serious finagling, to enable cool effects when displaying your images. These effects include image navigation, fading, being able to drag images around, etc. The WP-Highslide plugin is a good place to start messing around. This plugin integrates a part of the Highslide JS codebase into WP as well as supplying a good place to locate all of the Highslide-specific CSS. Don’t ask me to explain how it works, as it took me a few hours of code and CSS editing to get something usable. If you don’t hate yourself, the NextGEN gallery plugin works perfectly fine without it. However, your images won’t do such cool things when you click on them as mine do. Here is an example of displaying a small gallery (caricatures of a few friends in the spirit of South Park).  When you click on a photo to enlarge it, try dragging it around and then maybe clicking on another one and dragging it around.  It’s oddly entertaining.

[del.icio.us] [Digg] [Facebook] [Furl] [Google] [Slashdot] [Technorati] [Yahoo!] [Email]
5 comments

5 Comments so far

  1. Maki Naro June 23rd, 2008 11:18 pm

    Hey there, I’m currently working on the next generation of my website and have been messing around with Highslide, wherein I could get it to do everything but show the navigation bar! Especially when using the NextGen Gallery. I was wondering where you find the code to turn on this option. Thanks for the help!

    Maki Naro

  2. TheSizzle June 24th, 2008 8:05 am

    Hi Maki,

    I started with this site:
    http://vikjavev.no/highslide/index.htm
    which has barebones examples on how to use Highslide, including one with the navigation bar. If you’re using the Wordpress plugin WP-Highslide, you’ll have to manually copy the images directory and the full highslide.js code from the official distribution of highslide into the WP-Highslide plugins directory. The nav bar uses the images in this directory for the navigation arrows. Also, if you look at the code for this page, you’ll see a “hs.captionEval = ‘this.a.title’;”. This line sets the caption of the photo to the title which is provided in the hyperlink. This title should be defined in your NEXTGen gallery as the “Alt and Title text” for each photo. I haven’t gotten it to display the description yet. Thanks!

  3. Maki Naro July 16th, 2008 12:29 am

    Thanks! The captions work perfect now with a minor change of ‘this.a.title’ to ‘this.thumb.title’ in my wp-highslide settings. The control bar is still proving elusive though. I think I just need to get the images in the right directory. Pretty close though! Thanks again for the tips!

  4. sarakit March 28th, 2009 5:17 am

    Hey guys, thanks for this post. The little bit of info has helped me a lot. Any update on showing the description instead of the title? Also, how can you take out the display of the title altogether? Mine is showing the .jpg on all photos (I will have to go to each one and delete that if there’s no other solution)

    Cheers!

  5. TheSizzle March 30th, 2009 8:50 pm

    To be honest, I haven’t messed with it in a while, so I haven’t figured out how to show the description instead of the title. However, I suspect that if you don’t want to show the title, you could comment out the highslide JavaScript line:

    hs.captionEval = ‘this.a.title’;

    This disables the overlay. If you’re not familiar, commenting in JavaScript is //

Leave a comment