Javascript圖片庫阻止默認

-1

嗨，我有一個關於我想創建圖片庫的問題。我創建了一個縮略圖查看器，因此當點擊javascript時，縮略圖會在同一頁面上顯示爲較大的圖像，但我需要添加一種方法，以便在javascript關閉時仍能看到較大的圖像。這裏是我的代碼（JavaScript）的Javascript圖片庫阻止默認

function changeImage(el) 
{ 
    evt.preventDefault(evt); 
    var elem = document.getElementById("slide"); 
    elem.src = "Assets/images/big/"+el+".jpg"; 
}

（HTML）

 <div id="gallery"> 
    <img id="slide" src="Assets/images/big/0.jpg" onClick="next();"> 
</div> 
    <div id="thumb"> 

     <ul class="thumbnail"> 

      <li><a href="Assets/images/big/0.jpg" onClick="changeImage('0');"><img id="thumb" src="Assets/images/thumbs/0.jpg" /></a></li> 
      <li><a href="Assets/images/big/1.jpg" onClick="changeImage('1');"><img id="thumb" src="Assets/images/thumbs/1.jpg" /></a></li> 
      <li><a href="Assets/images/big/2.jpg" onClick="changeImage('2');"><img id="thumb" src="Assets/images/thumbs/2.jpg" /></a></li> 
      <li><a href="Assets/images/big/3.jpg" onClick="changeImage('3');"><img id="thumb" src="Assets/images/thumbs/3.jpg" /></a></li> 
      <li><a href="Assets/images/big/4.jpg" onClick="changeImage('4');"><img id="thumb" src="Assets/images/thumbs/4.jpg" /></a></li> 
      <li><a href="Assets/images/big/5.jpg" onClick="changeImage('5');"><img id="thumb" src="Assets/images/thumbs/5.jpg" /></a></li> 
      <li><a href="Assets/images/big/6.jpg" onClick="changeImage('6');"><img id="thumb" src="Assets/images/thumbs/6.jpg" /></a></li> 
      <li><a href="Assets/images/big/7.jpg" onClick="changeImage('7');"><img id="thumb" src="Assets/images/thumbs/7.jpg" /></a></li> 

     </ul> 
    </div><!-- thumb-->

現在，我曾經有過這樣的縮略圖瀏覽器進行工作，但添加JavaScript失敗後選擇不再顯示在圖像畫廊，而是在一個單獨的頁面，因爲它會如果沒有JavaScript的話，什麼是最簡單的方法來解決這個問題，所以當JavaScript的工作縮略圖圖像顯示在畫廊時，它不是它進入一個單獨的頁面？任何幫助非常感謝

來源

2011-09-27 Louisa Gibbons

evt變量沒有在任何地方聲明。您需要將事件對象傳遞給函數。或者，您可以將return false放在onclick屬性的末尾。

來源

2011-09-27 01:29:24

刪除

evt.preventDefault(evt);

和在HTML代碼改變

<a href="Assets/images/big/i.jpg" onClick="changeImage('i');"><img id="thumb" src="Assets/images/thumbs/i.jpg" /></a>

（i從0到7），以

<img class="thumb" src="Assets/images/thumbs/i.jpg" onclick="changeImage('i');" style="cursor:pointer;"/>

（<a>被去除，並加入style屬性將鼠標光標更改爲pointer，並將其更改爲id種到class - 具有相同的ID是不好的多個元素）

來源

2011-09-27 01:30:31 JiminP

嗨，我試圖改變。這，希望這將是一個簡單的修復，但沒有它似乎沒有改變任何東西:( –

@LouisaGibbons我錯了..修復答案。 – JiminP

嗨，感謝您的幫助，但是我現在如何爲javascript關閉時添加選項？我需要它做的是當它被點擊時在新窗口中顯示大圖像？ –

返回false從事件處理程序：

function changeImage(el) { 
    var elem = document.getElementById("slide"); 
    elem.src = "Assets/images/big/" + el + ".jpg"; 
    return false; 
}

而在HTML中添加return聲明過：

<ul class="thumbnail"> 

    <li><a href="Assets/images/big/0.jpg" onClick="return changeImage('0');"><img id="thumb" src="Assets/images/thumbs/0.jpg" /></a></li> 
    <li><a href="Assets/images/big/1.jpg" onClick="return changeImage('1');"><img id="thumb" src="Assets/images/thumbs/1.jpg" /></a></li> 
    <li><a href="Assets/images/big/2.jpg" onClick="return changeImage('2');"><img id="thumb" src="Assets/images/thumbs/2.jpg" /></a></li> 
    <li><a href="Assets/images/big/3.jpg" onClick="return changeImage('3');"><img id="thumb" src="Assets/images/thumbs/3.jpg" /></a></li> 
    <li><a href="Assets/images/big/4.jpg" onClick="return changeImage('4');"><img id="thumb" src="Assets/images/thumbs/4.jpg" /></a></li> 
    <li><a href="Assets/images/big/5.jpg" onClick="return changeImage('5');"><img id="thumb" src="Assets/images/thumbs/5.jpg" /></a></li> 
    <li><a href="Assets/images/big/6.jpg" onClick="return changeImage('6');"><img id="thumb" src="Assets/images/thumbs/6.jpg" /></a></li> 
    <li><a href="Assets/images/big/7.jpg" onClick="return changeImage('7');"><img id="thumb" src="Assets/images/thumbs/7.jpg" /></a></li> 

</ul>

來源

2011-09-27 03:31:06

Javascript圖片庫阻止默認

回答

相關問題