打開更大的版本在新窗口畫面/ W的JavaScript

我已經成功地得到的圖片使用此代碼打開圖片的大版本到一個新的窗口：打開更大的版本在新窗口畫面/ W的JavaScript

<IMG SRC="pic_small.jpg" onClick="view();"> 

<script language="JavaScript"> 

function view() { 
imgsrc = "pic_big.jpg"; 


viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');  
} 
</script>

我現在得到的問題是我的網頁上有更多圖片，我不想爲每個腳本編寫另一個函數，而是爲所有圖片都有一個函數。換句話說，我想有一個腳本，並與上述同樣的事情，但適用於所有的這些，如果有一些方法，使（修改如果需要的話）HTML線

<IMG SRC="pic1_small.jpg" onClick="view();"> 
<IMG SRC="pic2_small.jpg" onClick="view();"> 
<IMG SRC="pic3_small.jpg" onClick="view();"> 
<IMG SRC="pic4_small.jpg" onClick="view();">

我也想知道打開與大圖相同尺寸的窗口。

來源

2012-11-27 Benji

也許是的fancybox選項：http://fancyapps.com/fancybox/。希望這會有所幫助 – macool

關於第一個問題

<IMG SRC="pic_small.jpg" onClick="view(this);"> 

<script language="JavaScript"> 
    function view(img) { 
     imgsrc = img.src.split("_")[0] + "_big.jpg"; 
     viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');  
    } 
</script>

UPDATE

你的第二個問題，更多的例子， it can be done。

更新2

這取決於你的形象的名稱保持相同的格式。對於JS

<img src="pic_small.jpg" onclick="view('pic_big.jpg')" /> 

<script type="text/javascript"> 
    function view(imgsrc) { 
     viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300'); 
    } 
</script>

來源

2012-11-27 23:22:24 jwatts1980

這勝過我的答案。 +1 –

非常感謝你:)第一個完美的工作，但我現在將探索另一個，以及我將使用現在看起來相同的名稱格式。 – Benji

使用諸如lightbox等js庫是一個不錯的選擇。它或多或少地或多或少地提出你的要求。見例如Lightbox 2

通過在您的html中包含lightbox和jquery組合，您可以創建一個帶有「lightbox」屬性的「lightbox」屬性的圖像列表。當您點擊圖片周圍的鏈接時，Lightbox會自動激活。這是一個例子。

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

在這裏看到了「如何使用」部分中的上述鏈接

來源

2012-11-27 23:21:53

請爲OP提供更實質性的答案，例如如何在保持類似代碼結構的同時使用您建議的燈箱代碼。 –

謝謝你的評論@JeffreySweeney，我試圖容納建議。 –

看jQuery庫幾乎事實上的庫：另外，您也可以做到這一點。使用它，你可以做這樣的事情

$('img').click(function(){ 
    view($(this).attr('src')); 
}) 


function view(small){ 
    var big = small.split("_")[0] + "_big.jpg"; 
    viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');  
}

這樣，所有的圖像將具有相同的行爲

來源

2012-11-27 23:24:42

注意：您不需要使用JQuery來執行此操作。事實上，這可能沒有必要。 –

打開更大的版本在新窗口畫面/ W的JavaScript

回答

相關問題