Question

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

当您在此页面上悬停缩略图时，我正在寻找的内容与Themefore.net上的内容完全相同： http://themeforest.net/category/ecommerce/magento/shopping

有没有人知道一个具有类似弹出功能的jQuery插件？

Answer 1

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

然后使用jquery http://api.jquery.com/category/events/mouse-events/ “鼠标输入”/“鼠标离开”显示隐藏弹出窗口。

Answer 2

为了获得与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;
}

JS：

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/

jQuery插件，用于在悬停时使用响应度显示大图像

2 个答案: