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图片库阻止默认

回答

相关问题