Show bigger image on thumbnail's hover

Question

For a list of images I have the urls for the squared thumbnail http://example.com/img1_thumb.jpg and for the original size (any proportion) http://exampl

Answer 1

Use JQuery:

$(function() {
      $('#thumbnails img').click(function() {
            $('#thumbnails').hide();
            var src = $(this).attr('src').replace('.png', 'Large.png');
            $('#largeImage').attr('src', src).show();
      });
      $('#largeImage').hide().click(function() {
            $(this).hide();
            $('#thumbnails').show();
      });
});

<div id="thumbnails">
<img src="thumbnail1.png">...
</div>
<img id="largeImage" src="">

Answer 2

There are lots of jQuery plugins that do this. Since you are a beginner I would recommend starting there. Here is an article with some different options. Here is an example of what you are looking for.

Answer 3

U can work without thumbnails..

for thumbnail

<img src="http://example.com/img1.jpg" class="compress"/>

on hover of the above show this one

$(".compress").hover(function(){
  $(".image").show();

});

full image

 <img src="http://example.com/img1.jpg" class="image"/>

css

 .compress{
  width:20%;
/*aspect ratio will be maintained*/

}

.image{
display:none;
position:absolute;


 }

its not complete,but i think it might help

Answer 4

Basically you can create a <div class="some_class"><img src="http://example.com/img1.jpg"></div> set it's display:none and then bind an event to the thumb div like this :

$(".thumb_class").hover(function(){
   $(".some_class").show()
},
function(){
   $(".some_class").hide()
}

Of course you can personalize every div . The second function let you to hide the div when the mouse is out of the thumb. Hope i was as clear as possible.