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

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

Answer 2

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

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

2 个答案: