2012-10-14 4 views
2

J'essaye de faire une galerie simple de jQuery avec seulement 3 images comme décrit ci-dessous.Comment implémenter cette simple galerie d'images jQuery?

enter image description here

je l'ai traduit comme ceci:

if thumb clicked -> this thumb -> become big 
current big -> become thumb 

Le problème est que je ne sais pas comment est la façon dont je traduis il semble correct?

Merci

+0

+1 pour graphismes cool – StaticVariable

Répondre

2

S'il vous plaît essayez ceci:

<html> 
<head> 
    <title>Simple Gallery</title> 
<script src="jquery.js"></script> 
<script> 
    function ChangeThis(getThumb) 
    { 
     for(var i=1;i<=3;i++) 
     { 
      if(getThumb == i) 
      { 
       $("#bigView").html("<img src='img"+i+"' />"); 
       $("#thumb"+i).hide(); 
      } 
      else 
      { 
       $("#thumb"+i).show(); 
      } 
     } 
    } 
</script> 
<style> 
#bigView{width:100px;height:100px;} 
.thumb{width:30px;height:30px} 
</style> 
</head> 
<body> 

<table><tr><td colspan="3"> 
<div id="bigView"><img src='img1'></div> 
</td></tr> 
<tr> 
<td><div id="thumb1" class="thumb" onclick="ChangeThis(1);" style="display:none;"><img src='img1' /></div></td> 
<td><div id="thumb2" class="thumb" onclick="ChangeThis(2);"><img src='img2' /></div></td> 
<td><div id="thumb3" class="thumb" onclick="ChangeThis(3);"><img src='img3' /></div></td> 
</tr> 
</table> 
+0

fonctionne très bien! Je vous remercie! :) – onimojo

Questions connexes