製作一個jQuery的燈箱工作

我試過三種不同的jquery插件來嘗試使燈箱出現，當我點擊一個圖像的鏈接。這是我目前正在嘗試的http://balupton.github.com/jquery-lightbox/demo/我已經在頭部添加了插件源，並且圖像鏈接具有rel ='lightbox'，但是當我單擊圖像時，它會使瀏覽器打開圖像。製作一個jQuery的燈箱工作

這是我的頭

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="description" content="sumthing"> 
<meta name="keywords" content="stuff"> 
<link rel="stylesheet" type="text/css" href="/site_media/css/peda.css"> 
<link rel="icon" href="favicon.ico" type="image/x-icon"> 
<link rel="shortcut icon" href="/site_media/favicon.ico" type="image/x-icon"> 
<script type="text/javascript" src="/site_media/js/jquery.js"></script> 
<script type="text/javascript" src="/site_media/jquery-lightbox/scripts/jquery.lightbox.min.js"></script> 
<script src="/site_media/js/imgscale.js"></script> 
<script type="text/javascript">

這是我怎麼有圖片鏈接

<a rel="lightbox" href="someexternalimage.jpg"><img class="contentimg" style="display:block; max-width:100%;max-height:500px; padding-top:5px; margin-bottom:3px" src="someexternalimage.jpg"></a>

希望有人能幫助我，謝謝

來源

2011-07-31 madprops

確保腳本已添加到頁面中，並且您使用的是lightbox建議的jquery版本。我認爲這是與您的安裝，因爲我得到了一個小提琴的工作：

http://jsfiddle.net/jensbits/u6v98/

Installation instructions

來源

2011-07-31 20:06:51

我想你撥弄jquery 1.6.1這是我正在使用，它的工作原理，燈箱js加載正確，因爲我可以在源代碼中點擊它並看到它：/ – madprops

小提琴工作正常。我只能假設你的安裝或代碼中有些東西是相互衝突的。如果你有一個測試鏈接重複錯誤，這可能有助於解決這個問題。否則，沒有別的可以繼續。 –

也是我還是你沒有添加lightbox js？ – madprops

如果你把它放在一個<a>標記，請確保您阻止了默認事件處理程序的觸發。

$('a[rel=lightbox]').click(function(event){ 
    event.preventDefault(); 
});

通過防止默認事件從射擊，你告訴瀏覽器不重定向到someexternalimage.jpg像通常那樣當它是一個內部鏈接。

來源

2011-07-31 19:50:59 AlienWebguy

我補充說，但它一直正常打開圖像：/ – madprops

製作一個jQuery的燈箱工作

回答

相關問題