Custom WordPress Jquery Slider with NextGen Gallery photo management

Recently I was asked to swap out the flash banner ads on http://OregonSportsAwards.com with something that the client could manage from a WordPress backend.

Solution: leverage the NextGEN Gallery Plugin to handle all the image storage and manipulation and throw in some jQuery to handle the animations.

First, download, install and activate the NextGEN Gallery Plugin.  Now we have to modify the nggfunctions.php file to add a new function that will return the images from a given gallery.  Add the following code to the bottom of wp-content/plugins/nextgen-gallery/nggfunctions.php

function nggGetSliderPics($chosen_gallery) {

global $wpdb;

$results = $wpdb->get_results("SELECT * FROM $wpdb->nggpictures WHERE galleryid = $chosen_gallery ORDER BY sortorder");
$dirresult = $wpdb->get_results("SELECT path FROM $wpdb->nggallery WHERE gid = $chosen_gallery");

$sliderPicsHTML = '';
foreach ($results as $result) {
$sliderPicsHTML .= '<a href="' . $result->description . '"><img src="' . $dirresult[0]->path . '/' . $result->filename . '" alt="' . $result->alttext . '"></a>';
}
return $sliderPicsHTML;
}

?>

Make sure you move the ?> to be after this function.

Optionally, you can change ORDER BY sortorder to ORDER BY RAND() if you want to randomize the order every time the page loads.

You can customize the output of $sliderPicsHTML to match what your jQuery slider is looking for.  Note that I use the image description field from NextGEN for a link that the image can point to, and the Image Name field in NextGEN as the ‘alt’ tag for the image.  The return value above is built for the jQuery Cycle Plugin which happens to be included in NextGEN and already loaded for us!

Next, log into your WordPress backend and create a gallery in NextGEN.  Add some photos to it.  Note the GalleryID value, this will come in handy later.

In the template, where you would like the slider to be, get the images from the database by calling

<div class="slideshow">
<?php echo nggGetSliderPics(1) ?>
</div>

*Make sure you change the GalleryID to the ID of the gallery you would like the images to come from.

I wrapped my php statement inside a “slideshow” div so it would be easy to CSS and manipulate with JS.

Next, somewhere in your <head>, use a jQuery Cycle effect like so:

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.slideshow').cycle({
fx: 'fade',
speed: 300,
timeout: 5000
});
});
</script>

Since WordPress has a funky way of loading jQuery, you have call noConflict() and use  $j(object) instead of the standard $(object).  For this slideshow, we used the fade effect with a pretty fast speed and a longer delay.  You can tweak these values to suit your needs.  Additionally, you can check out the other transitions included in the jQuery Cycle library here

Conclusion: You now have a WordPress gallery manager that provides clients a simple way to add / order / remove images in their slider.

This entry was posted in Wordpress and tagged , , . Bookmark the permalink.

One Response to Custom WordPress Jquery Slider with NextGen Gallery photo management

  1. circus camp says:

    How can I use this to site a paper that I am writing?

Leave a Reply

Your email address will not be published. Required fields are marked *