I have an image gallery based on a list where css hides the unselected image with the gallery images selected by thumbnail links, as per the code below. I use the Jquery 'elevate zoom' function to zoom in on the main images on mouseover, but find that the 'hidden' list elements are only visual -- my js/jquery zooms are still present and pop-up whenever the mouse is over the other hidden list elements. I know little about javascript and don't relish dipping into the hundreds of code-lines of the elevate zoom function. Is there any way to tie the js behaviour to the css?
CSS:
#gallery {
width: 560px;
overflow: hidden;
height: 430px;}
#gallery-interior li {
width: 560px;
height: 430px;}
HTML:
<div id="gallery">
<ul id="gallery-interior">
<li id="one"><img id="zoom_01" src="../images/normal_1.jpg" data-zoom-image="../images/big_1.jpg"></li>
<li id="two"><img id="zoom_02" src="../images/normal_2.jpg" data-zoom-image="../images/big_2.jpg"></li>
</ul>
<div>
<a href="#one"><img src="../images/thumb_1.jpg"></a>
<a href="#two"><img src="../images/thumb_2.jpg"></a>
</div>