Nivo Slider: 4 tweaks you should try...

Published : April 13, 2012  By : Pascal  
4 new tricks to try and benefit from!
Friday 13th, lucky for some? In any case, today's article will try to guide through the process of adding new features to the fabulous jQuery Nivo Slider such as creating a back to the first slide button, show/hide caption control and 2 other tricks that can be helpful!

Mainly based on simple CSS and HTML tweaks or additions,
and easy to set up, these tips may also give you ideas to customize and get the most out of your Nivo's slideshow!

So, let's dig in!
Change Nivo Slider Image When Clicked On - DEMO 1
Magnifique mur parisien La Tour Eiffel grandiose... Sur les ponts de Paris...
(Great) Photos: Camille
1. Insert the following lines in the HTML code of your page (<head> section)

<script type="text/javascript">
$('#MyNivoSliderID').live('click', function() {
$('.nivo-nextNav', this).trigger('click');
});
</script>

2. Add these lines to the CSS file

.nivoSlider:hover {
cursor:pointer;
}

We've also applied in this testing demo two more tweaks on Nivo Slider's 'Bullets' and Text
Overlays:

Hide or Show Nivo Slider Caption On Demand

1. Select or skin show (hide) images and put them
where you want on the page

2. Add a function in the corresponding <div>
HTML code of your page

Show button:

<div id="ShowCaption" 
style="position:absolute;left:514px;top:1251px;width:16px;height:16px;padding
:0;">
<a href="#" onclick="$('#NivosliderD41').find('div.nivo-caption').show
();return false;"><img src="images/bullet-check.png" id="ShowC" alt="" 
border="0" title="Show caption" style="width:16px;height:16px;"></a></div>

Hide button:

<div id="HideCaption" 
style="position:absolute;left:490px;top:1251px;width:16px;height:16px;padding
:0;">
<a href="#" onclick="$('#NivosliderD41').find('div.nivo-caption').hide
();return false;"><img src="images/bullet-cross.png" id="HideC" alt="" 
border="0" title="Hide caption" style="width:16px;height:16px;"></a></div>

Remove button:

<div id="RemoveCaption" 
style="position:absolute;left:490px;top:1251px;width:16px;height:16px;padding
:0;">
<a href="#" onclick="$('#NivosliderD41').find('div.nivo-caption').remove
();return false;"><img src="images/bullet-end.png" id="HideC" alt="" 
border="0" title="Remove caption" style="width:16px;height:16px;"></a></div>

Note: Remove is permanent (Show will therefore have no effect).

Implement a Nice Bullets Transition Effect

As you may have noticed, the Nivo Slider's 'bullets'
in the above demo seem to dance instead of
switching in a basic way (CSS3).

This effect can be easily set by adding the following
lines in the CSS file

Note: This CSS3 feature is not compatible (yet) with Internet Explorer (in its version 9)

.nivo-controlNav a.active, .nivo-controlNav a:hover {
/* smooth transition effect (100 ms) for bullets */
-webkit-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
   -moz-transition: all 0.1s ease;
     -o-transition: all 0.1s ease;
        transition: all 0.1s ease;
}

Adding a 'Go To The First Slide' Button to the Nivo Slider - DEMO 2
New feature for captions
Smooth bullets display
For this trick, we use the bullets in a different way by tweaking the CSS file, making them unique
and changing the display order of the first one.

If you're interested about how making a smooth transition effect of the arrows, read this article: Nivo
Slider: 5 new tips to change its look.

1. Setting the float property to none makes the Nivo slider's bullets stacking

.nivo-controlNav a {
display:inline-block;
width:40px;
height:38px;
background:url(reset-nivo-demo42.png) no-repeat;
text-indent:-9999px;
position:absolute;
border:0px;
top:14px;
left:14px;
float:none; /* displaying each 'bullet' on same position */
opacity:0.10; /* stacked bullets >> low opacity value */
}

2. Making the first 'bullet' move to the front

.nivo-controlNav a:nth-child(1) {
z-index:10000; /* the first bullet becomes visible */
}

3. Setting an 'on mouse over' high opacity value (optional)

.nivo-controlNav a:hover {
opacity:1; /* raise opacity on mouseover */
}

4. You're done!


• Downloads

> demos CSS file

> demos images (arrows and bullets)


Thanks for reading and hope this helped!
Fin article
Fritz
April 2, 2013
Looks great! Changing images on click is excactly what I am looking for. Unfortunately I cannot get it working. What is meant ot be filled in $('#MyNivoSliderID')?
Pascal Gautier
Reply:
April 3, 2013
Hi!

Thanks for your comment.

Yes, you must adapt the ID (div name) of the slider to make it work.
For eg. if your Nivoslider has a div name of 'Slider', you must change the code to $('#Slider')

Cheers

A beautiful world...Slide 1 A beautiful world...Slide 2 A beautiful world...Slide 3 A beautiful world...Slide 4 A beautiful world...Slide 5 A beautiful world...Slide 6 A beautiful world...Slide 7 A beautiful world...Slide 8