Html 单击“在页面上显示较大图像”时，如何创建链接

基本上我想要我的“查看更多”按钮，当点击放大上面的图像时。因此，图像出现在页面的中间放大，是否有人知道如何做到这一点，或者我可以遵循的教程，将不胜感激。顺便说一句，我对网页设计还比较陌生，所以有点帮助，谢谢

此外，我要更改的对象位于公文包项下

以下是该网站的链接：

HTML:

---

为此，您应该寻找令人满意的js库。它们通常易于安装，基本使用不需要任何编码。以下是一些流行的例子：

• -非常受欢迎
• -我的大多数项目都使用它，它很轻，而且非常漂亮

这些库支持显示HTML内容，因此您可以将任何内容添加到您的图片中。推荐使用它们，因为它们的开发时间较长，并且足够稳定。祝你好运

编辑：

<!-- Usage example -->
<a href="big_image.jpg" rel="lightbox">See more</a>

---

链接可以有任何内联内容-图像、文本等。

您好，您应该看看用于jQuery的lightbox插件，我想它会满足您的需要，并且有很多关于使用它的教程。好的，它可以工作，但是我如何让它与“查看更多”链接连接到这个

是的，我试过灯箱工作得很好，只是不确定我如何将它链接到“查看更多”按钮到这个

太好了！刚刚添加了一个示例用法

body {
background: url(../images/images/bg_page.gif) center center;
font: 16px Helvetica, Arial, Sans-Serif; 
color: #636363; 
line-height: 24px;
}

#container {
width: 940px;
margin: 0 auto;
margin-top: 100px;
}

    #header {
    height: 177px;
    background: url(../images/home/header.gif) top center;
    padding: 52px 0 0 28px;
    position: relative;
    border-radius: 10px 10px 0px 0px;

    }

            #header h1 {
            margin: 0px 0 20px 0; 
            }

            #header h2 {
            width: 510px; 
            font: 30px Helvetica, Arial, Sans-Serif; 
            color: #f2f0eb; 
            letter-spacing: 2px; 
            margin: 0 0 20px 0;
            text-shadow: 0px 3px 3px #494949;
            }

    #logo {
    width: 272px;
    height: 214px;
    position: absolute;
    left: 49.5%;
    top: 11%; 
    margin-left: -150px;
    margin-top: -86px;
    z-index: 2;
    }

    #navigation {
    position: relative;
    height: 60px;
    }

        #navigation li {
        display: inline;
        width: 160px; 
        height: 60px; 
        float: left; 
        padding: 13px 0 0 16px;
        }

            #navigation li:nth-child(1) {
            margin: 0 0 0 -57px;
            }
            #navigation li:nth-child(2) {
            margin: 0 0 0 0;
            }
            #navigation li:nth-child(3) {
            margin: 0 0 0 0;
            }
            #navigation li:nth-child(4) {
            margin: 0 0 0 77px;
            }


    #content {
    height: 592px;
    background: url(../images/home/bg_body.png) top center;
    padding: 41px 69px 50px 28px; 
    overflow: hidden;
    position: relative;
    border-radius: 0px 0px 10px 10px;
    }

        #content h2 {
        font: 30px Helvetica, Arial, Sans-Serif; 
        letter-spacing: 2px; 
        margin: 0 0 20px 0;
        }

        #content h3 {
        font: 26px Helvetica, Arial, Sans-Serif; 
        letter-spacing: 2px; 
        margin: 0 0 20px 0;
        }

        #content p {
        margin: 0 0 30px 0;
        }

        #content a {
        color: #671111; 
        text-decoration: none;
        }
                #content a:hover {
                color: #a12121;
                }

                #content .portfolio-item {
                width: 190px; 
                padding: 1px; 
                background: #eee; 
                text-align: center; 
                float: left;
                margin: 0 7px 14px 7px;
                }

                #content .portfolio-item p.btn {
                margin: 0;
                }

                #content .portfolio-item p.btn a {
                display: block; 
                width: 183px; 
                height: 29px; 
                padding: 7px 0 0 0;
                background: url(images/images/background-seemore_03.gif);
                font-weight: bold; 
                text-align: center; 
                text-transform: uppercase;
                text-decoration: none;
                }

    #line {
    height: 4px;
    background: url(../images/home/line.gif) top center;
    position: relative;
    }

<!-- Usage example -->
<a href="big_image.jpg" rel="lightbox">See more</a>