This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Nivo Slider with Thumbnail Navigation

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
  • #14795
    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;

    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):

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.