Like any other jQuery plugin (or any product in general), you need to sit down and figure out the different options and limitations of it. Nivo Slider is great for adding an image slider with navigation controls and thumbnails, but for this project I needed to be able to navigate to specific images with a custom navigation menu… hmmmm. There didn’t seem to be any way to do that. So, I set out on Google to do some research (as any good web developer should do) and there didn’t seem to be any good advice on how to do this. I did find one post that had some instructions on modifying the Nivo source code… but, I try to stay away from that. There’s nothing worse than modifying the source code of someone else’s Open Source code and months later accidentally overwriting it with an updated version! Even just having to search through the updated code to update the file again is a pain. So, after trying to find a quick solution online, I sat down and figured out a pretty darn good solution that uses the Nivo Slider’s built-in event listeners and variables.

The Quick Solution:

Use the Nivo Slider’s “afterLoad” function along with Nivo Slider’s “data” variable, along with the Nivo Slider’s “next” navigation button. In this example the custom menu is in the same order as the Nivo Slider’s images. This allows jQuery to find the menu item’s index value, which will correlate with the correct Nivo Slider item.

jQuery( '#slider' ).nivoSlider( {

	afterLoad: function(){

		jQuery( '.nivo-menu-container ul li a' ).click( function( e ) {

			// Prevent default

			e.preventDefault();

			var $li = jQuery( this ).parent();

			var pos = $li.parent().children().index( $li );

			jQuery( '#slider' ).data( 'nivo:vars' ).currentSlide = (pos-1);

			jQuery( '.nivo-nextNav' ).trigger('click');

		} );

	}

} );

So, what’s going on here?

After the Nivo Slider has loaded, it trigger’s an “afterLoad” function. Within the “afterLoad” event listener, I added a click listener to my custom menu <a> tags:

jQuery( '.nivo-menu-container ul li a' ).click( function( e ) {

} );

Within this function, I first make sure to cancel out any default behavior of the <a> tag:

// Prevent default

e.preventDefault();

I then find the index value of the link:

var $li = jQuery( this ).parent();

var pos = $li.parent().children().index( $li );

The next step is to manually set the currentSlide variable of the Nivo Slider. Note that I set the position to be 1 before the index number we want:

jQuery( '#slider' ).data( 'nivo:vars' ).currentSlide = (pos-1);

The final step is to trigger the Nivo Slider’s next button, as if the user clicked it. Since we set the currentSlide variable 1 number back this click will now tell Nivo Slider to load the image we want!:

jQuery( '.nivo-nextNav' ).trigger('click');

One last thing:

I did notice that the Nivo Slider does take a little time to load… it’s not much, but depending on your image sizes it does allow the user to click your custom menu before the “afterLoad” function has triggered. This allow the <a> take to actually try to link somewhere. So, to counteract this I did add another click listener outside of the NivoSlider code that prevents the default click action:

jQuery( '.nivo-menu-container ul li a' ).click( function( e ) {

	e.preventDefault();

} );

Extra Stuff:

I also needed to highlight the custom menu item of the current Nivo Slider image. To do this I used the built-in “beforeChange” event, and used a “selected” class on the list items to reference in my CSS file.

beforeChange: function(){

 var currentSlide = jQuery('#slider').data( 'nivo:vars' ).currentSlide + 1;

 var totalSlides = jQuery('#slider').data( 'nivo:vars' ).totalSlides;

 if ( currentSlide==-1 ) currentSlide = totalSlides-1;

 if ( currentSlide==totalSlides ) currentSlide = 0;

 jQuery( '.nivo-menu-container ul li' ).removeClass( 'selected' );

 jQuery( '.nivo-menu-container ul li:nth-child('+(currentSlide+1)+')' ).addClass( 'selected' );

}

I first got the current slide showing and the total number of slides:

var currentSlide = jQuery('#slider').data( 'nivo:vars' ).currentSlide + 1;

var totalSlides = jQuery('#slider').data( 'nivo:vars' ).totalSlides;

I then needed to do some adjustments… For some reason the currentSlide variable that gets returned is 1 number less than what you’d think the variable would be. Not sure why (I didn’t dig through his code to figure out why), but the following seemed to work for me:

if ( currentSlide==-1 ) currentSlide = totalSlides-1;

if ( currentSlide==totalSlides ) currentSlide = 0;

I then removed the “selected” class of the menu items, and added it back to the currently showing item:

jQuery( '.nivo-menu-container ul li' ).removeClass( 'selected' );

jQuery( '.nivo-menu-container ul li:nth-child('+(currentSlide+1)+')' ).addClass( 'selected' );

The Full Code:

Here is the full (Nivo Initializing) script I used in my project

jQuery( '.nivo-menu-container ul li a' ).click( function( e ) {
	e.preventDefault();
} );

jQuery( '#slider' ).nivoSlider( {
	captionOpacity: 1,
	controlNav: false,
	directionNavHide: false,
	manualAdvance: true,
	beforeChange: function(){
		var currentSlide = jQuery('#slider').data( 'nivo:vars' ).currentSlide + 1;
		var totalSlides = jQuery('#slider').data( 'nivo:vars' ).totalSlides;
		if ( currentSlide==-1 ) currentSlide = totalSlides-1;
		if ( currentSlide==totalSlides ) currentSlide = 0;
		jQuery( '.nivo-menu-container ul li' ).removeClass( 'selected' );
		jQuery( '.nivo-menu-container ul li:nth-child('+(currentSlide+1)+')' ).addClass( 'selected' );
	},
	afterChange: function(){
	},
	afterLoad: function(){

		jQuery( '.nivo-menu-container ul li:nth-child(1)' ).addClass( 'selected' );
		jQuery( '.nivo-menu-container ul' ).fadeIn();
		jQuery( '.nivo-menu-container ul li a' ).click( function( e ) {

			// Prevent default
			e.preventDefault();

			var $li = jQuery( this ).parent();
			var pos = $li.parent().children().index( $li );
			jQuery( '#slider' ).data( 'nivo:vars' ).currentSlide = (pos-1);
			jQuery( '.nivo-nextNav' ).trigger('click');
		} );

	}
} );

That’s it! Let me know if you have any comments or suggestions.

In this post, I’ll show you how to quickly create your own set of paginated links.

Step 1
Insert the following code into your functions.php file.

function m4c_pagination() {

// Get total number of pages
global $wp_query;
$total = $wp_query->max_num_pages;

// If there is more than 1 page, display the links
if ( $total > 1 ) {

// Get the current page
if ( !$current_page = get_query_var( 'paged' ) )
$current_page = 1;

// Get the user defined page structure
$structure = get_option( 'permalink_structure' );
$format = empty( $structure ) ? '&page=%#%' : 'page/%#%/';

// Create the base structure
$base = get_pagenum_link(1) . '%_%';

// Modify base structure if search or archive page
if ( is_search() || is_archive() ) {
$big = 999999999; // need an unlikely integer
$base = str_replace( $big, '%#%', get_pagenum_link( $big ) );
}

$args = array(
'base' => $base,
'format' => $format,
'current' => $current_page,
'total' => $total,
'mid_size' => 4,
'type' => 'list',
'prev_text' => __( 'Previous', 'm4c_paginate_test' ),
'next_text' => __( 'Next', 'm4c_paginate_test' )
);

// Display the links
echo paginate_links( $args );
}
}

Step 2
Add some styling to your style.css file.

ul.page-numbers {
display: inline-block;
list-style: none;
background: url( assets/img/pattern.png );
margin: 20px 0;
padding: 10px;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
ul.page-numbers li,
ul.page-numbers li a,
ul.page-numbers li span {
font-size: 12px;
line-height: 12px;
color: #FFF;
}
ul.page-numbers li {
float: left;

}
ul.page-numbers li a {
text-decoration: none;
margin: 0 10px;
}
ul.page-numbers li a:hover {
color: #1982D1;
}
ul.page-numbers li a.next {

}
ul.page-numbers li span.current {
color: #1982D1;
font-weight: bold;
margin: 0 10px;
}
ul.page-numbers li span.next {

}

Step 3
Add the pagination function to your index.php page (or another page that displays multiple posts).

// Add custom pagination
m4c_pagination();

Resources
http://codex.wordpress.org/Function_Reference/paginate_links