具有响应度的悬停显示大图像的jQuery插件

Question

我正在寻找一个jQuery插件，提供响应显示的大图像弹出悬停缩略图。我已经找到了这个插件，它非常接近我想要的，但是它没有响应性，我需要弹出窗口被放置在右边或左侧，这取决于缩略图的位置：http://cssglobe.com/lab/tooltip/02/。

当你在这个页面上悬停缩略图时，我要找的实际上和Themefore.net上的一样：http://themeforest.net/category/ecommerce/magento/shopping。

有谁知道有类似弹出功能的jQuery插件吗？

Answer 1

为了获得类似于Envato的图像悬停显示，我制作了这个基本的CSS和JS：

HTML标记：

<div class="container">
<img class="thumbnail" src="https://thumb-tf.s3.envato.com/files/141892492/icon.png" title="">    
<img class="hidden-large" src="https://preview-tf.s3.envato.com/files/141892504/screenshot.__large_preview.jpg">
</div>

CSS：

img.hidden-large {
  display: none;
  z-index:1000;  
}
img.thumbnail {
  cursor: pointer;
}

联署材料：

jQuery('img.thumbnail').hover( function() {
var pos = jQuery(this).position();
var outerwidth = jQuery(".container").width();
var width = jQuery(this).outerWidth();

var img = new Image();
img.src = 'https://preview-tf.s3.envato.com/files/141892504/screenshot.__large_preview.jpg';    
var largeimgwidth = img.width;

if((outerwidth-width) > largeimgwidth) {
jQuery("img.hidden-large").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left + width) + "px"
}).toggle();       
}
});

JSfiddle：https://jsfiddle.net/br7d9js2/

Answer 2

您所要做的就是在dom中创建一个css类/元素来显示弹出。

然后使用jquery http://api.jquery.com/category/events/mouse-events/“鼠标进入”/“鼠标离开”来显示隐藏弹出的内容。