Affichage de nos réalisations en html
Nous allons mettre en place une liste en utilisant les balises <ul> et <li>
<ul id="bulle"> <li> <a href="images/muchas_m.jpg" title="Muchas maracas"> <img src="images/muchas.png" alt="Muchas maracas" /> <img src="images/muchas_large.png" alt="Muchas maracas" /> </a> </li> <li> <a href="images/nteam_m.jpg" title="nteam"> <img src="images/nteam.png" alt="nteam" /> <img src="images/nteam_large.png" alt="nteam" /> </a> </li> <li> <a href="images/lagedor_m.jpg" title="l'age d'or"> <img src="images/ageor.png" alt="l'age d'or" /> <img src="images/ageor_large.png" alt="l'age d'or" /> </a> </li> </ul>
Mise en forme de cette liste grâce au CSS.
Le code CSS ne comporte rien de vraiment spécifique et compliqué.
#bulle {
list-style: none;
margin: 20px 0px 0px;
padding: 0px;
}
#bulle li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 72px;
height: 72px;
}
#bulle li a img {
position: relative;
border: none;
}
#bulle li a img.large {
display: none;
}
#bulle li a:hover img.small {
display: none;
z-index: 0;
}
#bulle li a:hover img.large {
display: block;
margin-top: -28px;
margin-left: -28px;
z-index: 1000;
}
A ce stade nous avons bien l’effet de zoom qui est mis en ligne.
La dernière étape va consister à afficher dans une modalbox jquery le détail de la réalisation, dans la balise <head> de notre page html nous allons afficher le code ci-dessous.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.zoom").fancybox({
'overlayOpacity' : 0.7,
'overlayColor' : '#FFF'
});
});
</script>
Voila c’est déjà fini, j’espère que l’effet vous plait.
