在缩略图悬停时显示更大的图像

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://example.com/img1.jpg. I'm showing the thumbnails in a grid and I'd like to show the original one when the user puts the mouse over a image in the grid. Maybe using a floating element, the target is the user can see the image in more detail and view the parts of the cropped in the thumbnail.

对于一个图片列表，我有缩略图http://example.com/img1_thumb.jpg的url以及原始大小(任意比例)http://example.com/img1.jpg的url。我将在网格中显示缩略图，当用户将鼠标放在网格中的图像上时，我想显示原始的缩略图。也许使用浮动元素，目标是用户可以更详细地看到图像，并查看缩略图中裁剪的部分。

How can I do it? I'm a beginner with HTML/css/Javascript

我该怎么做呢?我是一个HTML/css/Javascript的初学者。

4 个解决方案

#1

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

css

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

}

.image{
display:none;
position:absolute;


 }

its not complete,but i think it might help

它还不完整，但我认为它可能会有所帮助

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

有很多jQuery插件可以做到这一点。既然你是初学者，我建议你从那里开始。这里有一篇文章，有一些不同的选择。这里有一个你正在寻找的例子。

#3

Use JQuery:

使用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="">

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

基本上你可以创建一个

设置为display:none然后将事件绑定到拇指div

$(".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.

当然，您可以个性化每个div。第二个函数让您在鼠标离开拇指时隐藏div。希望我说得越清楚越好。

#1