Question

我在我的项目中使用此图库。需要悬停的效果。但是当用户点击该图像时，它会在新窗口中打开图像。我该如何防止这种情况。

以下是code sample，此处是demo。

Answer 1

创建链接时尝试删除 rel和类屏幕截图，然后更改href。

href="http://www.cssglobe.com" class="screenshot"

来自网站：

使用链接创建图像预览对于全尺寸图像，你必须将截图类添加到您的html 元素和rel属性，包含完整大小的图片网址为一个值：

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine"> Css Globe</a>

Answer 2

只需终止链接上的默认事件：

//jQuery 1.4
$(document).delegate('a.preview', 'click', function () { return false; });

//jQuery 1.3
$('a.preview').click(function () { return false; });

在任何情况下都不要使用javascript：void（0）;这只会让那些观察不精明但又不精明的用户感到困惑。同时，“＃”会弹出您到页面顶部而没有取消活动。

如果你对$（document）.delegate（selector，click，fn）和$（selector）之间的区别感到好奇.click（fn）：

Delegate侦听文档，如果事件的目标与选择器匹配，则调用处理程序。 click（）直接侦听目标元素集。从前端加载的角度来看，委托往往更具性能，并且具有以下优点：页面上没有任何元素可以正常工作，并且DOM上的每个新元素都会进入其中 - 所以如果您添加了新的库项目，您可以在不绑定新处理程序的情况下查看它们。

Answer 3

包含图片的每个超链接的HTML如下：

<li><a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>

删除href或将href更改为#或javascript:void(0)，这样就可以了：

<li><a href="#" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>

OR

<li><a href="javascript:void(0)" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>

另一种方法是修改插件，为超链接添加click()事件处理程序，并在其中放置return false以阻止链接工作。这很好，因为对于关闭了JS的用户，他们仍然可以点击并查看完整尺寸的图片。

小需要帮助Jquery图像库修改

3 个答案: