使用JavaScript单击图像时，在新窗口中显示图像

I am working on a website for a construction company I work for. This is my first attempt at building a website from scratch. The main purpose of the site is to show pictures of completed projects. I have the site formatted with thumbnail image galleries and when an image is hovered over, it will display in a medium sized div directly above the thumbnail gallery. I'm trying to get a new window to display a larger version of the image when the medium sized div is clicked. And eventually I'd like the new window to have the ability to navigate through all images with prev/next buttons, so the user doesn't have to close and re-open a window for every picture. Any help would be greatly appreciated!

我正在为我工作的建筑公司的网站工作。这是我从头开始构建网站的第一次尝试。该网站的主要目的是展示已完成项目的图片。我将网站格式化为缩略图图库,当图像悬停时,它将显示在缩略图库正上方的中等大小的div中。当我点击中等大小的div时,我正试图让一个新窗口显示更大版本的图像。最后,我希望新窗口能够使用上一个/下一个按钮浏览所有图像,因此用户无需关闭并重新打开每个图片的窗口。任何帮助将不胜感激!

Here is a small clip of the HTML code:

这是HTML代码的一个小剪辑:

<div id="main">
            <h1>Stamped Concrete</h1>
            <div id="bigOne">
                <a href="#"><img id="large" src="images/Vince1.jpg" height="350px" width="350px" onclick="largePic(this);"/></a>
            </div>
            <div id="list">
                <h1 id="Gallery">Galleries</h1>
                <ul>
                    <li class="gallery"><a href="stamp.htm">Stamped Concrete</a></li>
                    <li class="gallery"><a href="exposed.htm">Exposed Aggregate</a></li>
                    <li class="gallery"><a href="stain.htm">Stained Concrete</a></li>
                    <li class="gallery"><a href="driveway.htm">Driveway/Walkway</a></li>
                    <li class="gallery"><a href="walls.htm">Walls</a></li>
                    <li class="gallery"><a href="countertop.htm">Countertops</a></li>
                    <li class="gallery"><a href="commercial.htm">Commercial</a></li>
                </ul>
            </div>
            <div id="thumbs">
                <div id="gall1" class="gall">
                    <img src="images/Vince1.jpg" height="50px" width="50px" alt="Vince1.jpg" onmouseover="showImage('Vince1.jpg');"/>
                    <img src="images/Vince2.jpg" height="50px" width="50px" alt="Vince2.jpg" onmouseover="showImage('Vince2.jpg');"/>
                    <img src="images/Vince3.jpg" height="50px" width="50px" alt="Vince3.jpg" onmouseover="showImage('Vince3.jpg');"/>
                    <img src="images/Vince4.jpg" height="50px" width="50px" alt="Vince4.jpg" onmouseover="showImage('Vince4.jpg');"/>
                    <img src="images/Vince5.jpg" height="50px" width="50px" alt="Vince5.jpg" onmouseover="showImage('Vince5.jpg');"/>
                    <img src="images/Vince6.jpg" height="50px" width="50px" alt="Vince6.jpg" onmouseover="showImage('Vince6.jpg');"/>
                </div>
                <div id="gall2" class="gall">
                    <img src="images/Martin1.jpg" height="50px" width="50px" alt="Martin1.jpg" onmouseover="showImage('Martin1.jpg');"/>
                    <img src="images/Martin2.jpg" height="50px" width="50px" alt="Martin2.jpg" onmouseover="showImage('Martin2.jpg');"/>
                    <img src="images/Martin3.jpg" height="50px" width="50px" alt="Martin3.jpg" onmouseover="showImage('Martin3.jpg');"/>
                    <img src="images/Martin4.jpg" height="50px" width="50px" alt="Martin4.jpg" onmouseover="showImage('Martin4.jpg');"/>
                    <img src="images/Martin5.jpg" height="50px" width="50px" alt="Martin5.jpg" onmouseover="showImage('Martin5.jpg');"/>
                    <img src="images/zach.jpg" height="50px" width="50px" alt="zach.jpg" onmouseover="showImage('zach.jpg');"/>
                </div>

And the JavaScript:

和JavaScript:

function showImage(imgName) 
{
    var largeImg = document.getElementById("large");
    var thePath = "images/";
    var theSource = thePath + imgName;

    largeImg.src = theSource;
    largeImg.alt = imgName;
}

var imgWindow;
function largePic()
{
    var bigImg = document.getElementById("bigOne");
    var url = bigImg.getAttribute("src");

    imgWindow = window.open(url, 'images', 'height=750px,width=750px,toolbars=no,menubar=no,location=no,scrollbars=no,resizable=no');
}

2 个解决方案

#1

I would recommend using a jquery plugin. It will save you a lot of hassle of custom JS coding. Link below of some good jquery plugins.

我建议使用jquery插件。它将为您节省很多自定义JS编码的麻烦。下面链接一些好的jquery插件。

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

If you don't want to go down this route... I would suggest wrapping the image with a link and opening in a new tab.

如果你不想沿着这条路走......我会建议用一个链接包装图像并在新标签中打开。

#2

I recommend using a lightbox plugin as mentioned in the other answer, but to answer your question, try changing the name of your window to '_blank' rather than 'images'.

我建议使用另一个答案中提到的灯箱插件,但要回答您的问题,请尝试将窗口名称更改为“_blank”而不是“图像”。

#1