Javascript 单击时使用java脚本放大图像

我试图让我的脚本与我的html一起工作，以确保当点击图像时，它们会显示得更大。当你点击图片时，我希望能够看到主页。当我点击图片时，什么也没发生。请帮忙

   <script type = "text/javascript">

function lightBox () {
    document.getElementById("BG").style.display = "block";
    document.getElementById("PG").style.display = "block";
}

function hideBox() {
    document.getElementById("BG").style.display = "none";
    document.getElementById("PG").style.display = "none";

}

</script>

<h1> My Page </h1>


<div id "BG" onClick "Box();">



</div>


<div id = "FG">

<img src = "sunset_1.jpg" width = "100" height = "60">


</div>


<div id = "thumb">

<img src = "sunset_1.jpg" width = "100" height = "60" onClick ="lightBox();">
<img src = "sunset_2.jpg" width = "100" height= "60"onClick ="lightBox();"> 
<img src = "sunset_3.jpg" width= "100" height="60" onClick ="lightBox();"> 
<img src = "sunset_4.jpg" width= "100" height= "60" onClick ="lightBox();">


</div>
 <p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

</p>




#BG  {
        width :100%;
        height:100%;
        background-color:#000;
        position: fixed;
        opacity: 0.8;
        -moz-opacity:0.8;
        -webkit-opacity:0.8;
        display:none;
        cursor: pointer;

}

#FG {

        border:1px solid #ccc;
        background-color:#fcfcfc;
        position: fixed;
        height:350px;
        width:550px;
        left:50%;
        margin-left:-275px;
        top:50px;
        display: none;
}

功能灯箱（）{
document.getElementById（“BG”）.style.display=“block”；
document.getElementById（“PG”）.style.display=“block”；
}
函数hideBox（）{
document.getElementById（“BG”）.style.display=“无”；
document.getElementById（“PG”）.style.display=“无”；
}
我的页面

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。圣奥卡塔铜塔除外

#背景{
宽度：100%；
身高：100%；
背景色：#000；
位置：固定；
不透明度：0.8；
-moz不透明度：0.8；
-webkit不透明度：0.8；
显示：无；
光标：指针；
}
#前景{
边框：1px实心#ccc；
背景色：#fcfc；
位置：固定；
高度：350px；
宽度：550px；
左：50%；
左边距：-275px；
顶部：50px；
显示：无；
}

您的代码有点不稳定，但是坚持您的方法可能会有所帮助

下面是一些修改后的HTML，请参阅以了解对CSS和JavaScript的更改

<h1> My Page </h1>

<div id="BG" onClick="FG_clicked();">
    <div id="FG">
    <img src="http://placehold.it/900x400">
</div>
</div>

<div id="thumb">
    <img src="http://placehold.it/350x150" width="100" height="60" onClick="lightBox();">
    <img src="http://placehold.it/350x150" width="100" height="60" onClick="lightBox();">
    <img src="http://placehold.it/350x150" width="100" height="60" onClick="lightBox();">
    <img src="http://placehold.it/350x150" width="100" height="60" onClick="lightBox();">
</div>

我的页面

你会发布一段代码片段吗？这会有帮助的。你可以尝试使用css通过改变javascript类来缩放点击图像。是的，我的代码在最好的时候是不稳定的，哈哈！非常感谢！如果你不介意的话，再问一个小问题，我只需要较大的图片作为我点击的图片。这里有一种方法可以使用原始图片并增加宽度：-但是如果你有缩略版本的图片，你会想做不同的事情。非常感谢！我只需要在弹出的每张图片上贴一个标签，例如，图片一，图片二..你知道怎么做吗？你可以为每张图片添加一个标题属性，并将其用作标签，这里有一个快速示例，非常感谢！你帮了大忙！