Nivo Slider with Thumbnail Navigation

[askwpgirl]

Hi Jason,

Nivo slider can use thumbnails for navigation http://docs.dev7studios.com/jquery-plugins/nivo-slider. Is there a way to easily activate this feature through a function or filter using the TB Sliders plugin? Do I need to create my own custom slider as described in: http://dev.themeblvd.com/tutorial/add-custom-slider/ Any hints for specifically how to show the thumbnail nav? I worked with Nivo slider only manually in the past, not with modifying how TB is using it.

Thanks!

Angela

Topic

[Jason Bobich]

You could add a new slider. However, this is going to take a lot of knowledge on your part of the HTML, CSS, and javascript involved in the setup. Our article on the subject is then providing you with the basic PHP template.

====

Alternate approach —

I will add a filter to the image html within a Nivo slider in the next update to the slider that will help you with this. It’s coming soon with all of our big theme updates (mainly for getting everything admin-related looking good with WP 3.8+ and updating to Bootstrap 3 and FontAwesome 4).

[Edit March 11, 2014] This update has happened. So, just make sure you’re using version 1.2+ of the sliders plugin.

Going from the Nivo docs you’re linking to, you need to add the controlNavThumbs javascript parameter.

/**
 * Add javascript nivoSlider() method call
 */
function my_nivo_properties() {
	echo 'controlNavThumbs: true,';
}
add_action( 'themeblvd_nivo_properties', 'my_nivo_properties' );

Then, you can filter in the HTML markup currently for outputted images to add the thumbnail URL’s to the image HTML.

/**
 * Add data-thumb="thumb.jpg" to each <img />
 */
function my_nivo_image( $image, $slider, $slide ) {

	$thumb_url = wp_get_attachment_image_src( $slide['image']['id'], 'square_small' );
	$thumb_url = $thumb_url['0'];

	return str_replace( ' />', ' data-thumb="'.$thumb_url.'" />', $image );
}
add_filter( 'themeblvd_nivo_image', 'my_nivo_image', 10, 3 );

And then from there, you’ll just need to chip away at the CSS from your child theme’s stylesheet. This will get things started for you so you can see what you’re working with.

.tb-nivo-slider-wrapper .nivo-controlNav {
	position: relative;
}
.tb-nivo-slider-wrapper .nivo-controlNav a {
	background-image: none;
	text-indent: 0;
	width: auto;
	height: auto;
}

[askwpgirl]

So, the Bootstrap slider has thumbnails! Yay! That’s what I was after, but I will review all of this documentation as well, because I have worked with Nivo slider options when I’ve manually loaded Nivo on sites.

[Jason Bobich]

Yup, Bootstrap has thumbnails. Moving forward the Bootstrap slider is getting integrated more and more into different things in the theme framework, and the thumbnail part is one of the options.

For example, I’m not sure if you’re aware but you can generate a slider automatically from gallery attachments (this uses Bootstrap slider):

http://shortcodes.themeblvd.com/generator/shortcodes-sliders/gallery-slider/

And in the next version of the Layout Builder, there’s now a new “Simple Slider” element. It has an option type that allows you to quickly make a slider within the Layout Builder. This uses Bootstrap slider, as well. It’ll give people an option to completely abandon the Theme Blvd Sliders plugin, if they want.

And the “post slider” element will no longer be a complicated abyss of options with Flexslider. It’s going to pull featured images into a bootstrap carousel with title, descriptions, image link, just the basics.

[Author]

Replies