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>