2010-10-18 57 views
1

我在我的項目中使用此圖像庫。需要懸停的效果。但是,當用戶點擊該圖像時,就會在新窗口中打開圖像。我如何防止這種情況。Jquery圖像庫修改小需要幫助

這裏是code sample這裏是demo

當您創建一個鏈接 嘗試 下降的版本和類截圖,並更改HREF
+1

當用戶點擊圖片時你想要發生什麼?對我來說,演示會在同一個窗口中打開圖像。 – 2010-10-18 06:25:45

回答

1

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

從網站:

要與鏈接 到全尺寸的圖像創建圖像預覽,你必須 截圖類添加到您的HTML 元素和rel屬性含有 全尺寸圖像的URL作爲 一個值:

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

謝謝..沒有注意到文檔..真的很抱歉.. – 2010-10-18 07:25:20

+0

@piemesons:你的歡迎,很高興幫助 – 2010-10-18 07:37:19

0

用於包含圖像的每個超鏈接的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的用戶,他們仍然可以點擊並查看完整大小的圖片。

1

殺了默認事件上的鏈接:

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

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

不要在任何情況下,請使用javascript:無效(0);這隻會混淆視而不見的用戶。與此同時,「#」會將您彈出到頁面的頂部,而不會取消事件。

如果你很好奇,什麼是$(文件).delegate之間的差值(選擇,點擊,FN)和$(選擇)。點擊(FN):

委託監聽的文件和,如果事件的目標匹配選擇器,則調用處理程序。 click()直接在目標元素集上進行偵聽。從前端加載的角度來看,委託往往更具性能,並且具有頁面中沒有任何元素可以正常工作的優點,並且DOM上的每個新元素都會進入其範圍 - 因此,如果添加了新庫項目,您可以查看它們而不綁定新的處理程序。

+0

嘿感謝這樣一個很好的解釋..雖然Haim Evgi告訴我有關插件的默認功能,這解決了我的問題。您提供的信息仍然有用。 +1 – 2010-10-18 07:36:20