Ciao, non ho ben capito se quello che vuoi fare è questo, però anche se non fosse così, puoi tranquillamente fare qualche modifica, la struttura rimane quella più o meno.
Ho previsto un img grande al centro e 2 altre img piccole sotto. Quando clicco su una di queste, scambia la sua posizione con quella grande, dissolvendosi e riapparendo:
codice:
<html>
<head>
<style>
.centered {
margin: 0 auto;
text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
var ok = 2;
$(document).ready( function() {
$.each($("img[name=littleImg]"), function(){
$(this).click(function(){
if(ok < 2) return;
if(ok == 2) {
ok = 0;
var src = $(this).attr("src");
var bigSrc = $("#bigImg").attr("src");
$("#bigImg").fadeOut("normal", function(){
$(this).attr("src", src);
}).fadeIn(function(){ ok++;});
$(this).fadeOut("normal", function(){
$(this).attr("src", bigSrc);
}).fadeIn(function(){ ok++; });
}
});
});
});
</script>
</head>
<body>
<div class="centered">
<div class="centered">
[img]white.gif[/img]
</div>
<div class="centered">
[img]grey.png[/img]
[img]yellow.jpg[/img]
</div>
</div>
</body>
</html>
... grazie ancora
