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

Question

我正在为我工​​作的一家建筑公司开发一个网站。这是我第一次尝试从头开始建立一个网站。该网站的主要目的是展示已完成项目的图片。我使用缩略图库格式化了该网站，当将图像悬停在其上时，它将显示在缩略图库正上方的中等大小的 div 中。我试图在单击中等大小的 div 时获得一个新窗口来显示更大版本的图像。最终我希望新窗口能够使用上一张/下一张按钮浏览所有图像，这样用户就不必为每张图片关闭并重新打开窗口。任何帮助将不胜感激!

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

和 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

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

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

如果您不想走这条路...我建议用链接包装图像并在新选项卡中打开。