I want to have a thumbnail gallery where as i click on the thumbnail it will open the tab where the img is categorize in and jump into the portion where the specification is written.

I don't have it in a code but my imagination is something like this.


<!-- Sample Gallery -->   
<div id="sampleGallery">
 <a href="#apple" alt="fruit"><img src="apple.jpg"/></a> 
 <a href="#tomato" alt="vegetable"><img src="tomato.jpg"/></a>
 <a href="#cabbage" alt="vegetable"><img src="cabbage.jpg"/></a>
 <a href="#carrot" alt="vegetable"><img src="carrot.jpg"/></a>
</div>

<ul class="tabs">   
    <li><a href="#">Tab 1 - fruit </a></li>   
    <li><a href="#">Tab 2 - vegetable</a></li>   
</ul>   
   
<!-- tab "panes" -->   
<div class="panes">   

    <!-- 1st tab -->  
    <div>
     <h2> Fruit </h2>
     <p>Lorem ipsum ....</p>

     <a name="apple"></a>
     <h5> apple </h5>
     <p>Lorem ipsum ....</p>
    </div>

    <!-- 2st tab -->  
    <div>    
     <h2> vegetable </h2>
     <p>Lorem ipsum ....</p>

     <a name="tomato"></a>
     <h5> tomato </h5>
     <p>Lorem ipsum ....</p>

     <a name="cabbage"></a>
     <h5> cabbage </h5>
     <p>Lorem ipsum ....</p>

     <a name="carrot"></a>
     <h5> carrot </h5>
     <p>Lorem ipsum ....</p>
    </div>   

</div>