在新窗口中打开更大版本的图片/w javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13595003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opening bigger version of picture in new window /w javascript
提问by Benji
I've managed to get the picture to open the bigger version of the picture into a new window using this code:
我设法使用以下代码将图片打开到一个新窗口中：
<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>
The problem I got now is that I got many more pictures on my webpage and I'd like to not have to write another function for every script but instead having one function for all the pictures. In other words I'd like to have a script that does the same thing as above, but works on all of these (modified if needed) HTML lines
我现在遇到的问题是我的网页上有更多图片，我不想为每个脚本编写另一个函数，而是为所有图片编写一个函数。换句话说，我想要一个与上面做同样事情的脚本，但适用于所有这些（如果需要修改）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();">
I was also wondering if there is some way to make the window that opens the the same size as the big picture.
我还想知道是否有某种方法可以使打开的窗口与大图的大小相同。
回答by jwatts1980
For your first question
对于你的第一个问题
<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
更新
To your second question, it can be done.
对于你的第二个问题，可以做到。
UPDATE 2
更新 2
This depends on your image names keeping that same format. Alternatively, you could do this:
这取决于您的图像名称保持相同的格式。或者，您可以这样做：
<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>
回答by Martin Sommervold
Using a js library such as lightbox is a good option. It does more or less what you ask. See e.g. Lightbox 2
使用 js 库，例如 lightbox 是一个不错的选择。它或多或少地满足您的要求。参见例如灯箱 2
By including lightbox, in combination with jquery, in your html, you can create a list of images with tags with a "rel" property of "lightbox". Lightbox will then automatically activate when you click the link surrounding the image. Here is an example.
通过在您的 html 中包含灯箱与 jquery 的结合，您可以创建带有“灯箱”的“rel”属性标签的图像列表。当您单击图像周围的链接时，灯箱将自动激活。这是一个例子。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
See more examples here in the "how to use" section in the aforementioned link
在上述链接的“如何使用”部分中查看更多示例
回答by Salvador Dali
Look at jQuerylibrary which almost de-facto library for JS. Using it you can do something like that
看看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');
}
This way all your images will have the same behavior
这样您的所有图像都将具有相同的行为
