Geek Answers Handbook

Show hover thumbnail

For the list of images, I have a URL for the sketch square http://example.com/img1_thumb.jpg and for the original size (any proportion) http://example.com/img1.jpg . I show thumbnails in a grid, and I would like to show the original when the user hovers over the image in the grid. Perhaps using a floating element, the goal is that the user can see the image in more detail and view parts of the cropped one in miniature.

How can i do this? I start with HTML / css / Javascript

+4
source share
4 answers

U can work without thumbnails.

for sketches

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

When you hover over it shows

 $(".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 full, but I think it can help

+3
source

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

+9
source

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="">
+1
source

Basically, you can create <div class="some_class"><img src="http://example.com/img1.jpg"></div> set its display:none , and then associate the event with a thumb div as follows :

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

Of course, you can personalize each div . The second function allows you to hide div when the mouse is out of the thumb. I hope I was as clear as possible.

+1
source

More articles:


All Articles