Question

我已设法使用此代码将图片的大图片打开到一个新窗口：

<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();">

我还想知道是否有办法让窗户打开与大图相同的尺寸。

Answer 1

第一个问题

<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>

<强>更新

关于你的第二个问题，it can be done。

更新2

这取决于保持相同格式的图像名称。或者，您可以这样做：

<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>

Answer 2

使用灯箱等js库是个不错的选择。它会或多或少地提出你的要求。参见例如Lightbox 2

通过在html中包含lightbox和jquery，您可以创建一个带有“relbox”属性为“lightbox”的标签的图像列表。单击图像周围的链接时，灯箱将自动激活。这是一个例子。

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

请参阅上述链接

中“如何使用”部分的更多示例

Answer 3

查看jQuery库，它几乎是JS的事实库。使用它你可以做类似的事情

$('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');    
}

这样，您的所有图片都会有相同的行为

在新窗口中打开更大版本的图片/使用javascript

3 个答案: