Question

I’m using a script – for a pretty small image gallery within a tabbed content area.

I’m using; http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/ But customized to almost a fourth the size, only 3 images, and realigned to have the thumbs sit directly below the ‘main view’ image area. I’ve done it successfully, and visually it’s great.

The thumbs are about 50px, that expand to about 60px on hover and when clicked – it takes the main view area with the correct image as it’s supposed too.

Problem is, and is really weird as I’ve used this script over and over again – for some reason the parameters of the 3 thumbs are duplicated above the main view as well – but the actual images are not visible. When a user put their mouse above the main view – anywhere between the 50px 60px square/rectangle parameter – the hover of the below images appear.

I’ve been going through the code over and over again – I know it’s something stupid – if anyone could throw me a suggestion that’d be great.

Here’s a screenshot visual of the situation – check it out; http://tinypic.com/r/2nt8o7t/7

The mark-up:

<!-- 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-->

The query:

        <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> 

The 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

I see an unnecessary a tag here,

<div id="main_view">

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

</div>

What is this doing there. Maybe this is creating an issue and disturbing the whole script, please post a fiddle, if issue still persists.