Voici un petit script en JQuery pour ajouter des légendes à des photos/images en surimpression qui apparaissent/disparaissent lorsque le pointeur de la souris passe sur l’image. J’ai cherché à faire en sorte que le texte de la légende s’adapte à la taille des images.

Ce script peut certainement être optimisé : n’hésitez pas à me faire part de vos commentaires.

• Voir une page de démo.
• Télécharger les fichiers.

Le code HTML

Juste 2 photos, une grande et une petite pour voir l’effet sur la taille des caractères. Le reste n’est que du balisage permettant au code JQuery et CSS de s’accrocher au contenu à formater.


<div class="box">
<img class="photo" src="http://www.moinscestplus.com/wp-content/uploads/chiens.jpg" width="280" height="210" />
<div class="cover caption">
<p>Les chiens de traîneau sont particulièrement résistants. Le traîneau à chiens est un vrai régal, surtout dans les fantastiques paysages de la Dalécarlie</p>
<p><a href="http://www.dalarna.se/" target="_blank">Plus d'informations sur la Dalécarlie</a></p>
</div>
</div>
<div class="box">
<img class="photo" src="http://www.moinscestplus.com/wp-content/uploads/danemark.jpg" width="450" height="300" />
<div class="cover caption">
<p>Le Danemark est un pays à la fois très traditionnel et très orienté vers l'avenir et les nouvelles technologies. Il mérite que l'on s'y intéresse car bien des surprises nous attendent.</p>
<p><a href="http://www.denmark.dk/en" target="_blank">Plus d'informations sur le Danemark</a></p>
</div>
</div>


Le code CSS

Rien de particulier à signaler ici si ce n’est l’application d’un filtre d’opacité.


.box {
margin: 10px;
background: #161613;
border: solid 2px #666;
overflow: hidden;
position: relative;
}
.box img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
.box p {
text-align: center;
padding: 1px;
color: #fff;
font-family: Arial, sans-serif;
}
.caption {
float: left;
position: absolute;
top: 90%;
background: #000;
height: 40%;
width: 100%;
opacity: .8;
/* For IE 5 to 7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}


Le script JQuery

Un script très simple dans lequel j’ai utilisé plusieurs fois la fonction each() d’itération générique. Pas évident de trouver une méthode qui marche à tous les coups pour changer la taille de la police. Celle que j’ai implémentée est basique mais fonctionne dans la plupart des cas.


$(document).ready(function(){
// Get dimensions of images
$('.box').each(function() {
var $thisWidth = $(this).find('.photo').attr('width');
var $thisHeight = $(this).find('.photo').attr('height');
$(this).css({'width': $thisWidth, 'height': $thisHeight});
});
// to make the caption slide
$('.box').hover(function(){
$(this).find('.cover').stop().animate({top:'65%'},{queue:false,duration:260});
}, function() {
$(this).find('.cover').stop().animate({top:'100%'},{queue:false,duration:260});
});
// change the size of the font accordingly
$('.caption').each(function() {
var $gridWidth = $(this).parent('.box').css('width');
$gridWidth = parseInt($gridWidth);
var $idealSize = $gridWidth / 30;
if ($idealSize < 10) {$idealSize = 11;}
$idealSize = Math.round($idealSize) + 'px';
$(this).find('p').css('font-size', $idealSize);
});
});


• Voir une page de démo.
• Télécharger les fichiers.

Si vous trouvez ce script utile, merci de me le faire savoir. J'attends vos remarques