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
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
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
Thanks for reading and hope this helped!
