In this tutorial I will show you how to set up and use thumbnails as the control navigation with the Nivo Slider.
Search and Replace Thumbnails
The default setting when using the controlNavThumbs setting in the Nivo Slider uses the controlNavThumbsSearch and controlNavThumbsReplace settings to generate the thumbnail url’s. Basically it takes the url for each image, looks for whatever is defined in controlNavThumbsSearch (default “.jpg”) and replaces it with whatever is defined in controlNavThumbsReplace (default “_thumb.jpg”) and uses this new url for the thumbnail.
So for example if you have “images/slide1.jpg” as your image, the Nivo Slider script will generate the thumbnail url as “images/slide1_thumb.jpg”. This is the default functionality anyway and can be changed to your liking. So let’s see it in action. The HTML:
<div id="slider"> <img src="images/up.jpg" alt="" /> <img src="images/monstersinc.jpg" alt="" /> <img src="images/nemo.jpg" alt="" /> <img src="images/walle.jpg" alt="" /> </div>
Default HTML there. Nothing to worry about. Then we would use this setting in the Javascript:
$('#slider').nivoSlider({ controlNavThumbs:true });
Finally the most important bit. The CSS required to make the thumbnails is where most people trip up (by default the thumbnail images are hidden):
#slider .nivo-controlNav { position:absolute; bottom:-70px; /* Put the nav below the slider */ } #slider .nivo-controlNav img { display:inline; /* Unhide the thumbnails */ position:relative; margin-right:10px; }
Note that these CSS styles will conflict with the “bullet” styles used in the “style-pack”. So only use one or the other, not both.
Using the image “rel” Attribute
The other option when using thumbnails with the Nivo Slider (v2.0+) is to use the controlNavThumbsFromRel setting. This simply generates the thumbnail url from the “rel” attribute in your images. So for exmaple:
<div id="slider"> <img src="images/up.jpg" alt="" rel="images/up_thumb.jpg" /> <img src="images/monstersinc.jpg" alt="" rel="images/monstersinc_thumb.jpg" /> <img src="images/nemo.jpg" alt="" rel="images/nemo_thumb.jpg" /> <img src="images/walle.jpg" alt="" rel="images/walle_thumb.jpg" /> </div>
Then in your Javascript you would do the following:
$('#slider').nivoSlider({ controlNavThumbs:true, controlNavThumbsFromRel:true });
Now you can have even more control over your thumbnails. Note that the CSS above applies for both ways of using thumbnails.
Conclusion
So that’s how you use thumbnail control navigation in the Nivo Slider. If you need any more help then let me know in the comments.
Awesome, thanks for the tutorial!
Hi! Thank for this fantastic plugin. Can you tell sth more about using thumbs in your Nivo Slider in WordPress
Hi. I’m trying to implement the gallery with thumbnails and while the gallery works, if I make the bullets disappear I still don’t see my thumbnail images. I’ve tried changing the name and path for the thumbnails, commenting out the background image line in the css for the bullets (I’ve learned how to break the gallery in several bizarre ways!) & find that the only thing that works is to just leave the bullets—which isn’t the objective. Any suggestions? The page I’m working on for this isn’t live, although if you’re willing to take a look I could make it so. I want to use it for my new portfolio site which is due Monday night so I’m kind of backed into a corner.
thanks!
If you could let me see a live versions of the site I could have a look and see if I can see what’s wrong.
Great job designing this! I just had one question, is it possible to use the css “border radius” on the slider? I tried it but once the image changes the border radius goes away. I am assuming it has something to do with the slices. Any ideas?
Hi Tim. Unfortunately, due to the way transitions work, using CSS border radius is not advised.
Alright, thanks.
I put the site up today. The galleries are all functioning with bullets, but I’d still like to figure out why my thumbnails aren’t becoming visible when the bullets are disabled. The URL is http://marshalindseydesign.com/ . It’s going to change a lot, but when it’s done I’d love to have it up on your site. Thank you!
What I noticed is that you only need the default style sheet to get the thumbnails to display.
I added the CSS code listed in the Thumbnail Tutorial…
#slider .nivo-controlNav {
position:absolute;
bottom:-70px; /* Put the nav below the slider */
}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
position:relative;
margin-right:10px;
}
to the original or base style sheet from the Nivo Slider download
(http://dev7studios.com/downloads/27)
…then set the parameters to use thumbnail navigation in the jQuery call…
controlNavThumbs:true,
controlNavThumbsFromRel:true
…and I got it to work as intended. The Thumbnail tutorial mentions that the CSS code may trip you up if you’re trying to use the bullet navigation. In this case, if you are using the original CSS file and the style-pack/custom-nivo-slider.css file you won’t see the thumbnails. My suggestion is to not use the style-pack css file initially. Once you have it working how you want, then you can merge in some of the CSS from the style pack to incorporate that look and feel.
controlNavThumbsFromRel:true
this setting means that you’re listing the path/filename of the thumbnail image you want to use in the rel=”path/filename” attribute.
(since I didn’t mention that in my explanation above.)
that means your image html should look like this:
I came across your jQuery on http://www.denbagus.net/jquery-slideshow/.
I’m working on a project and this is the perfect solution for what I want to do.
I want to create a jQuery slideshow that resembles the one on the iTunes store page.
– except clicking on the thumbnail will only load the bigger slide & caption and clicking on the bigger image or a link within the caption will take you to the respective place…which is how it works now.
I’m trying to figure out how to constrain the height of the thumbnails and add the auto scrolling functionality so that the active/bigger slide displays when it’s thumbnail slides out of view.
Any suggestions/tips?
You can see my progress at:
http://www.nicholasmcelveen.com/nmsandbox/dev/jquery_nivo_slider2.php
…height of the thumbnails…
– what I meant to say was, how to constraint the height of the thumbnail container. I’ve added height and width settings in the css but didn’t get the desired result.
…CSS…
#slider .nivo-controlNav {
position:absolute;
left:543px; /* Put the nav below the slider */
height:300px;
width:200px;
}
THANK YOU! I finally got my thumbs to work correctly on my portfolio website, thanks to this tutorial. Just one quick question:
Right now I am only using 2 images but I plan to expand it eventually. The thumbs are displaying my 2 thumbs correctly, but is also displaying 2 extra blank thumbs with an “undefined” source. If i had to guess I think it’s because the slider is set up to do a minimum of 4 images. Is there any way to temporarily set it to run only 2 images for now?
Thanks a million!
Hi Matthew. The slider doesn’t set a minimum for thumbnails. It should be exactly the same as the number of images you have. Try checking to see if there is any extra HTML in your slider div and remove it if there is.
Hi! Can you write a step by step how to make thumbnails showed in WordPress?
Hi Staircase. I suggest you read this tutorial on setting up the Nivo Slider in WordPress then simply follow the steps above to get the thumbnails to work (as it is the same in WordPress).
Good day,
Thanks for the nice slideshow lugin. I am using it on wordpress to set up a slide show and its working except for few things I need some tips on.
1. The thumbnails is working but is it possible to be able to scroll through the thumbnails like this one in galleryview: http://spaceforaname.com/gallery-light.html.
Currently I have 6 pictures with same number of thumbnails, any addtiotional thumbnails makes the strip slides to the next line instead of auto scrolling to position the added ones within the same horizontal strip.
Is there a tip on how to correct this. This also happen when the browser is minimized.
Any help will be appreciated.
regards
hello i have problem in my site i cant put arrows left right and pager in bottom of img i see all and its working ok but i can put to change img etc.
and i can see only one option for it.
if i make
directionNav:false, //Next & Prev
i see
controlNav:true, //1,2,3…
if i make
directionNav:true, //Next & Prev
see only it dont see controlNav:true, //1,2,3…
somebody can help me?
Hey, just wanted to give a quick thanks for this slider. I’m finding it useful on a lot of sites (especially with the whole no Flash on Apple mobile products thing). Here’s an example of a slider that was Flash that I just switched to jQuery using this thumbnail version:
https://www.coastway.com/
Thanks again!
Hey,
I’m having a little trouble with this picture slider. I have managed to get my images appearing, with the caption, but the arrows don’t appear it just says prev-next instead and the next is all the way across the page not in the picture.
Also the bullets or thumbnails aren’t appearing. Any help would be greatly appreciated.
http://mmaanalysed.com/picturestest.html
Regards,
Jonny.
Hi Jonny. You need to check out the “style-pack” for the images and CSS style for the arrows and bullets.
Thanks,
but my caption and thumb not working! why?
can u help me?
Thanks for this awesome plugin!
However I don’t have the navigation button at the bottom of the slider (I mean the little dots to navigate between pics in the slider).
Are they unabled by defaut?
Any help is welcomed!
Hi Nicolas. You need to check out the “style-pack” for the images and CSS style for the bullets.
Thanks a lot Gilbert!
I didn’t notice the custom style pack at first.
Works great now!
Hey,
I’m implementing this on a site for a client but it doesn’t seem to be working for IE7 (IE8 is fine). I’ve been looking all throughout my code and I can’t seem to figure out what the problem is. I haven’t changed any of the CSS or script files in your download so I’m just really confused.
If you get a chance (i know you may not have time) could you take a quick look at:
http://netvatise.com/temp/thatfranchise/weedman.php
Thank you.
Nvm lol I got it
Hi! I bought a template (locus-one-page-template-source ) from (ThemeForest) that uses the Normal Slider although the slider is fantastic I haven´t be able to change the speed of the text caption or the slides. The text is going to fast so it is difficult to reed the content while it is working. Could you help me with this matter?
Looking forward to hear from you guys.
Thanks.
Ivan Bernal
Hi all.. Please I need help.. I am using this plugin for my photo gallery. How to put the caption of image’s title not in the picture.. I mean it is out from the picture just like the bullet outside the picture.. Please ? So it should be like Above the bullet there’s a caption box and then above the caption box there is a picutre.. Thanks..
Hi,
I am using the nivo slider with thumbnails (and am very happy with it, great script!). I changed the CSS for the thumbnails to display not under, but right hand of the slider.
Problem: It works in Chrome, Firefox, but not in IE. The explorer properly shows everything, but after the first transition (or first click on a thumbnail), the thumbnails don’t work no more. They are visible, but any click on one of them leads to the linked page of the currently shown slider. In other words, the link of the slider is lays upon the thumbnails. Must be some CSS-IE-thing, which unfortunately exceeds my skills. Any help would be appreciated! Thanks.
hi
no matter what I do I cannot get the thumbnails to show up. I have tried every variation I can think of… scrapped and redid everything from the start and still nothing…
i know its possible, I see it on the demo page… and would REALLY like to get this to work…
this is a great script… i just need to get over this last hurdle…
help??? tx in advance!!!
Hi again,
I had to take some time off from this. Unfortunately I’m still stuck. I’ve reviewed all of the comments in the blog and had already done everything suggested. When I disable the bullets I’ve just been commenting them out in the CSS:
/*background:url(../images/bullets.png) no-repeat;*/
This removes the bullets, but the thumbnails still don’t show. If you have time to take a look at the site it would be great. I really like this gallery, but I chose it because I liked the way it looks with thumbnails! I’m also wanting to get better with jquery and really should understand what I’m doing wrong.
Thank you!
Hi there,
Thanks for the script! Quick concern though, I can’t seem to get images pulled in with TimThumb to show in Chrome or Safari. Firefox works and IE is untested. The thumbnails do work in Chrome, Safari, and Firefox. This is all on a Mac.
You can see this here: http://demo.ivannovak.com/iocaste/blog/index.html
Any thoughts would be welcome!
-Ivan
Hello, I have this working well, thanks for the plugin and great tutorials. One problem though, my galleries all have 15+ images which causes the thumbs to break. Is there anyway to make the thumbs slide back and forward when the width of the main slideshow window is reached? eg 2 pages/slides of thumbs?
Hi, I would like to say thank you Gilbert!
Please view my site to see a good use of the Nivo Slider!
I was wondering though, is it possible to have your image change when rolling over the thumbnail instead of having to click on it?
And if the image could change rolling over the thumbnail could you then link each thumbnail?
Thanks alot! – Sean
Also wondering if a hover option over the thumbnail is easy to accomplish to change the image.
Hi there,
As a user and tester of most online free jquery aplications I must be honest with you in saying your explanations on how to implement this tool are really not very helpfull, they just don`t work if we follow all the steps in order.
Well, but my question is:
how can I make a custom div to be the selector of the image? (insted of bullets and thumbnails)
Thanks, great tool by the way, the best slider on the web, you can bet that.
I’ve set this up and got it working when I manually upload the thumbnail. However if I just upload the image the thumbnails get made automatically, but are put in a folder inside my photos folder. I get:
photos/image.jpg
photos/thumbs/image_thumb.jpg
not
photos/image.jpg
photos/image_thumb.jpg
anyone know why they are being made and put into that sub folder ‘thumbs’? It is in ExpressionEngine if that matters.
You really dont have to make an app resize the images for you.
All you need to do is open the jquery.nico.slider.js.
change…
nivoControl.append(‘‘)
and
nivoControl.append(‘‘)
to (whatever height / width you desire)
nivoControl.append(‘‘)
nivoControl.append(‘‘)
Then in your page replace.
controlNavThumbsReplace: ‘_thumb.jpg’,
with
controlNavThumbsReplace: ‘.jpg’,
This will grab the same image and just resize it according to the width and height you defined in the .js file.
Well it seems this trims out certain things so in the .js file just look for…
<img src=
place in a width="x" height="x" for both instances of the tag.
Also I noticed the compressed file handled the thumbs differently than the dev file, I had to uncompress the other file and save it off to get it to play nice.
You may need to alter some CSS settings to as if you go smaller the padding/margins can cause some funky things to happen in IE.
bingo. that did it. Thanks!
I know that this is probably obvious but it wasn’t to me right away; you should include a width and height for the thumbnail in the demo CSS. Took me a couple minutes to realize why my thumbs weren’t showing up.
i have try to using image nav control to my site , but the image thumb not show,
using the rel attribute in the img element breaks validation though
I added the thumbnails to the slider and it works great but there’s one problem. I’d like it if the directional navigation arrows would only appear if the user hovers over the actual image. Right now, the directional arrows appear even when hovering over the thumbnails. How would I be able to fix this?
Thanks in advance! Great slider! Love how lightweight it is.
I must be doing something wrong but is there a way you can slow down the transitions from one image to another? For me its scrolling thought the images too fast and I would like to slow it down. I’ve gone into jquery.nivo.slider.js and try changing the pauseTime but nothings working.
Anyone can help on this?
Thanks
Hi Dave,
What you need to do is create a separate script (i.e. script.js) and put the following code in it:
$(window).load(function() {
$(‘#photos’).nivoSlider({
effect: ‘fade’,
animSpeed: 400,
pauseTime: 4800,
});
});
effect would be the transition. animSpeed is the number of milliseconds for the transition and pauseTime is the amount of time each photo is displayed.
There is more information in regards to the various variables on the main nivo slider page.
Nice one Victor, works like a treat.
Many thanks and also thanks for the quick response.
Hi,
I was wondering if I could replace numbers like 1,2,3… for the dots or the small thumbnails in the slider?
Thanks,
viki
what i am having a problem with is getting a nav list to the right the of the nivo pictures that control the sliders instead of the bullets.
I noticed they’re being pulled from “nivo-controlNav” list and that gets generated from the script and that in return gives the “<a name" links and i don't know how to change the links to images and also move the "nivo-controlNav" list to the right of the pictures
pretty much trying to make image links that are on the right side of the nivo slider
btw this Nivo Slider is awesome!! just having a bit of trouble
Hey there,
any way to let the plugin show the alt=”" as a “thumbnail” ?
Would love it when this would work
Can I make thumbnail links from an external page?