Superbe tuto, cependant je tente depuis trois jours de l’adapter pour des images horizontales et verticales… Sans succès ;- (
Auriez-vous un complèment de code à apporter sur ce point ?

Cordialement
OR

Par contre, y-a-t’il un moyen pour empêcher que les photos ne puissent être récupérées par l’utilisateur (clic-droit, enregistrer) ?

j’ai modifie le css pour qu’il soit entierement compatible avec opera et firefox 4

body,html{font-family: »Helvetica Neue »,Arial,Helvetica,Verdana,sans-serif;background-color:#262016;-webkit-transition:background-color 500ms ease-in-out}html:hover,html:hover

body{
background-color:#000
}

p{
text-align:center;
clear:both
}

a{
color:#C7D23F
}

a:hover{
text-decoration:none
}
h1{
text-align:center;
color:#C7D23F
}

div{
width:934px;
margin:1em auto
}

ul{
list-style:none;margin:0;padding:0
}

body
#zoom
{background:transparent url(../img/default.png) no-repeat 50% 50%
}

body:hover
#zoom{background-image:none}
#zoom{margin-top:14px;float:right;height:452px;width:452px;overflow:hidden}
#thumbs{float:left;width:482px;height:482px}
#zoom:not(.ie){
overflow:visible;
position:relative;
z-index:2
}

#zoom:not(.ie) img{
position:absolute;
opacity:0;
z-index:2;
height:144px;
width:144px;
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
z-index:1
}

img#art1,img#art4,img#art7{
left:-468px
}

img#art2,img#art5,img#art8{left:-314px}img#art3,img#art6,img#art9{
left:-160px
}

img#art4,img#art5,img#art6{
top:153px
}

img#art7,img#art8,img #art9{
top:308px
}

#zoom img:target{
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-moz-transform:rotate(0deg);
z-index:3;
opacity:1;
top:0;
left:0;
width:452px;
height:452px
}
#thumbs li img{
height:144px;width:144px
}
#thumbs li a:active{outline:none
}
#thumbs:not(.ie)li img{
height:180px;width:180px
}
#thumbs li{position:relative;
z-index:2;
float:left;
display:inline;
cursor:pointer;
opacity:1;margin-right:10px;
margin-bottom:10px;
height:144px;width:144px;
-moz-transform:scale(0.8);
-webkit-transform:scale(0.8);
transform:scale(0.8);
-webkit-transition:all 250ms ease-in-out;
-moz-transition:all 250ms ease-in-out;
-o-transition:all 250ms ease-in-out;
}

#thumbs:hover li{opacity:0.3}
#thumbs:hover li:hover{
opacity:1;
position:relative;
z-index:5;
-moz-transform:translate(-10px, 0);
-webkit-transform:translate(-10px, 0);
-o-transform:translate(-10px, 0)
}

#thumbs li img{
border:none;
-moz-box-shadow:0 0 0 rgba(255,255,255,0.5);
-webkit-box-shadow:0 0 0 rgba(255,255,255,0.5);
-webkit-transition:all 250ms ease-in-out;
-moz-transition:all 250ms ease-in-out;
-o-transition:all 250ms ease-in-out;
}

#thumbs:hover li:hover img{
-moz-box-shadow:0 0 30px rgba(255,255,255,0.5);
-webkit-box-shadow:0 0 30px rgba(255,255,255,0.5)}