1. Ajouter les lignes suivantes dans la partie <head> du code HTML de la page
<script type="text/javascript">
$('#MyNivoSliderID').live('click', function() {
$('.nivo-nextNav', this).trigger('click');
});
</script>
2. Insérer ces lignes dans le fichier CSS
.nivoSlider:hover {
cursor:pointer;
}
De plus la DEMO 1 a été l'occasion de mettre en oeuvre 2 autres astuces
concernant les Captions et le comportement des Bullets :
Afficher ou Masquer les Captions par un Clic
1. Choisir ou dessiner des images qui serviront à
activer/désactiver les textes
2. Ajouter une fonction dans le <div> correspondant
au bouton correspondant
Afficher les Textes :
<div id="ShowCaption"
style="position:absolute;left:514px;top:1251px;width:16px;height:16
px;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>
Cacher les Textes :
<div id="HideCaption"
style="position:absolute;left:490px;top:1251px;width:16px;height:16
px;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>
Supprimer les Textes :
<div id="RemoveCaption"
style="position:absolute;left:490px;top:1251px;width:16px;height:16
px;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>
Notez : Supprimer est définitif alors que Cacher permet un affichage ultérieur
Donner un Effet Original aux Bullets
Comme vous avez pu le remarquer, les Bullets
sont affichés de façon progressive et agréable,
ceci grâce au CSS3.
Apporter un tel effet nécessite l'ajout des lignes
suivantes dans le fichier CSS
Notez : pour le moment, Internet Explorer (9) n'intègre pas une telle fonctionnalité
CSS3.
.nivo-controlNav a.active, .nivo-controlNav a:hover {
/* effect de transition de 100 ms pour les 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;
}
Ajouter un Bouton 'Reset' sur le Nivo Slider - DEMO 2
Cette astuce modifie la gestion de l'affichage des Bullets (empilés) et remet en
avant celui relatif au 1er slide afin de permettre un effet de réinitialisation.
Dans cette démo, nous utilisons un effet 'fade-in' pour les flèches de navigation. L'astuce
1. Attribution de none à la propriété 'float' pour superposer les Bullets
.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; /* chaque bullet a la même position */
opacity:0.10; /* opacité faible car bullets superposés */
}
2. Le 'Bullet 1' est mis au premier plan
.nivo-controlNav a:nth-child(1) {
z-index:10000; /* le premier bullet devient visible */
}
3. Changement de l'opacité en cas de 'mouse over' (option)
.nivo-controlNav a:hover {
opacity:1; /* opacité maximum */
}
4. Et voilà !
• Téléchargements
Merci pour avoir lu cet article en entier qui j'espère vous aura été utile !
