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

Question

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!

Here is a small clip of the HTML code:

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

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

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

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.

Answer 2

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