Effet de survol miniature avec fantaisie

Question

J'utilise un script - pour une jolie petite galerie d'images dans une zone de contenu à onglets.

J'utilise; http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ Mais personnalisé à près d'un quart de la taille, seulement 3 images, et réaligné pour avoir les pouces assis directement au-dessous de la zone d'image «vue principale». Je l'ai fait avec succès, et visuellement c'est génial.

Les pouces ont une résolution d'environ 50px, qui s'étend jusqu'à environ 60px en vol stationnaire et lorsqu'ils sont cliqués, ils prennent la zone de vue principale avec l'image correcte, comme elle est supposée.

Le problème est, et est vraiment bizarre que j'ai utilisé ce script encore et encore - pour une raison quelconque les paramètres des 3 pouces sont également dupliqués au-dessus de la vue principale - mais les images réelles ne sont pas visibles. Lorsqu'un utilisateur place sa souris au-dessus de la vue principale - n'importe où entre le paramètre carré/rectangle 50px 60px - le survol des images ci-dessous apparaît.

Je suis passé par le code encore et encore - je sais que c'est stupide - si quelqu'un pouvait me faire une suggestion qui serait géniale.

Voici une capture d'écran de la situation - jetez un coup d'œil;http://tinypic.com/r/2nt8o7t/7

La majoration:

<!-- Thumb Gall Mark-Up --> 

<div class="containerslide"> 

<ul class="thumb"> 

    <li><a href="img/appimg_1.jpg"><img src="img/appimg_1.jpg" alt="" /></a></li> 
    <li><a href="img/appimg_2.jpg"><img src="img/appimg_2.jpg" alt="" /></a></li> 
    <li><a href="img/appimg_3.jpg"><img src="img/appimg_3.jpg" alt="" /></a></li> 


</ul> 

<div id="main_view"> 

    <img src="img/appimg_1.jpg" alt="" /></a><br /> 

</div> 
</div> 

<!--End Thumb Gall Mark-Up--> 

La requête:

 <script src="js/modernizr.custom.37797.js"></script> 

     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 

//Larger thumbnail preview 

$("ul.thumb li").hover(function() { 
    $(this).css({'z-index' : '10'}); 
    $(this).find('img').addClass("hover").stop() 
     .animate({ 
      marginTop: '0px', 
      marginLeft: '0', 
      top: '360px', 
      left: '0', 
      width: '65px', 
      overflow: 'hidden', 
      height: '80px', 
      padding: '3px' 
     }, 200); 

    } , function() { 
    $(this).css({'z-index' : '0'}); 
    $(this).find('img').removeClass("hover").stop() 
     .animate({ 
      marginTop: '0', 
      marginLeft: '0', 
      top: '360px', 
      left: '0', 
      width: '60px', 
      overflow: 'hidden', 
      height: '60px', 
      padding: '3px' 
     }, 200); 
}); 

//Swap Image on Click 
    $("ul.thumb li a").click(function() { 

     var mainImage = $(this).attr("href"); //Find Image Name 
     $("#main_view img").attr({ src: mainImage }); 
     return false;  
    }); 

}); 
</script> 

Le CSS;

<!--minSlide Show Styles --> 

* { padding: 0;} 
img {border: none;} 
.containerslide { 
    margin-top: -71px; 
} 

ul.thumb { 
    float: left; 
    list-style: none outside none; 
    padding: 12px; 
    width: 360px; 
} 

ul.thumb { 
    width: 360px; 

} 


ul.thumb li { 
    padding: 3px; 
    float: left; 
    position: relative; 
    width: 60px; 
    height: 60px; 

} 
ul.thumb li img { 
    width: 60px; height: 60px; 
    border: 1px solid #ddd; 
    padding: 3px; 
    background: #f0f0f0; 
    position: absolute; 
    left: 0; 
    -ms-interpolation-mode: bicubic; 
    margin-top: 365px; 

} 
ul.thumb li img.hover { 
    background:url(thumb_bg.png) no-repeat center center; 
    border: none; 


} 
#main_view { 
    float: left; 
    margin-left: -217px; 
    margin-top: 41px; 
    padding: 9px 0; 
} 




<!-- End Slide Show Styles --> 

Answer 1

Je vois une étiquette a inutile ici,

<div id="main_view"> 

    <img src="img/appimg_1.jpg" alt="" /></a><br /> 

</div> 

Qu'est-ce que ce fait là. Peut-être que cela crée un problème et perturbe tout le script, s'il vous plaît poster un violon, si le problème persiste.