打开更大的版本在新窗口画面/ 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

回答

相关问题