Bon voilà une solution rapide, et facilement implémentable (et modifiable).
D'abord, tu mets ça entre tes balises <head> et </head> :
Code:
<script type="text/javascript">
<!--
var ndfrdivnum = 0;
function ndfr_zoomsh(divid)
{
if (document.getElementById)
{ //IE5 and NS6
document.getElementById(divid).style.filter += "progid:DXImageTransform.Microsoft.alpha(enabled=1,opacity=100)";
document.getElementById(divid).style.filter += "progid:DXImageTransform.Microsoft.shadow(direction=135,color=#666666,strength=3)";
if (document.getElementById(divid).style.visibility == 'visible')
{
document.getElementById(divid).style.display = 'none';
document.getElementById(divid).style.visibility = 'hidden';
}
else
{
document.getElementById(divid).style.display = '';
document.getElementById(divid).style.visibility = 'visible';
}
}
if ((document.all) && (!document.getElementById))
{ //IE4 only
document.all[divid].style.filter += "progid:DXImageTransform.Microsoft.alpha(enabled=1,opacity=100)";
document.all[divid].style.filter += "progid:DXImageTransform.Microsoft.shadow(direction=135,color=#666666,strength=3)";
if (document.all[divid].style.visibility == 'visible')
{
document.all[divid].style.display = 'none';
document.all[divid].style.visibility = 'hidden';
}
else
{
document.all[divid].style.display = '';
document.all[divid].style.visibility = 'visible';
}
}
if (document.layers)
{ //NS4.X only
if (document.layers[divid].visibility == 'show')
{
document.layers[divid].display = 'none';
document.layers[divid].visibility = 'hide';
}
else
{
document.layers[divid].display = '';
document.layers[divid].visibility = 'show';
}
}
}
function ndfr_zoom(tnp, tnw, tnh, imp, imw, imh, num)
{
document.write('<img src="' + imp + '" alt="Cliquez ici pour agrandir l\'image" name="ndfrzoomth' + num + '" width="' + tnw + '" height="' + tnh + '" border="0" id="ndfrzoomth' + num + '" onclick="java_script_:ndfr_zoomsh(\'ndfrzoomdiv' + num + '\');" style="cursor: pointer;" />');
document.write('<div id="ndfrzoomdiv' + num + '" style="display: none; left: 0px; position: relative; border: 1px solid #333333; height: ' + imh + 'px; top: 0px; visibility: hidden; width: ' + imw + 'px; z-index: 99;"><img src="' + imp + '" alt="" name="ndfrzoomimg' + num + '" width="' + imw + '" height="' + imh + '" border="0" id="ndfrzoomimg' + num + '" /></div>');
}
//-->
Ensuite, tu te crées un BBcode qui équivaut à appeler ça :
Code:
<script type="text/javascript">
<!--
ndfrdivnum ++;
ndfr_zoom('cheminv', largeurv, hauteurv, 'chemini', largeuri, hauteuri, ndfrdivnum);
//-->
</script>
Explications :
Ce code permet d'écrire une vignette, ainsi qu'un DIV contenant l'image en taille réelle. La fonction ndfr_zoom prend en paramètres, et dans cet ordre, le chemin vers la vignette, sa largeur, sa hauteur, le chemin vers l'image, sa largeur et sa hauteur. Le paramètre ndfrdivnum est passé automatiquement, et permet d'avoir plusieurs images "zoomables" sur une même page, sans conflit d'ID.
Modifications réalisables :
On peut parfaitement imaginer ne passer que le chemin de l'image, sa largeur et sa hauteur (ces paramètres sont obligatoires, sans quoi le DIV va foirer), puis utiliser l'image pour la vignette, en lui imposant une largeur et en ne donnant pas de hauteur (ou vice-versa). On peut aussi placer le DIV ailleurs, ou le rendre flottant (actuellement, il s'insère sous l'image, en déplacant le reste du contenu de la page). On peut aussi retirer les filtres spéciaux IE que j'ai mis (ombrage et opacité).