2

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

我要更改的对象也在投资组合项下

这是网站的链接:

http://www.mmicgt.com/michael_g/portfolio.html

HTML:

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>{Michael Grace} Portfolio website - {Gracey design}</title>

    <link href="css/gallery.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="container">      


        <ul id="navigation">

        <li><a href="index.html"><img src="images/images/home_button2.gif" onmouseover="this.src='images/images/home_button1.gif'" onmouseout="this.src='images/images/home_button2.gif'"/></a>
        </li>

        <li><a href="about.html"><img src="images/images/about_button1.gif" onmouseover="this.src='images/images/about_button2.gif'" onmouseout="this.src='images/images/about_button1.gif'"/></a>
        </li>

            <li>
                <div id="logo" style="padding:16px">
                    <img src="images/images/logo.png" />
                </div>
            </li>    

        <li><a href="portfolio.html"><img src="images/images/gallery_button1.gif" onmouseover="this.src='images/images/gallery_button2.gif'" onmouseout="this.src='images/images/gallery_button1.gif'"/></a>
        </li>

        <li><a href="contact.html"><img src="images/images/contact_button1.gif" onmouseover="this.src='images/images/contact_button2.png'" onmouseout="this.src='images/images/contact_button1.gif'"/></a>
        </li>

        </ul>

      <div id="header">

          <h1><img src="images/images/gallery_03.png" /></h1>
          <h2>Portfolio.</h2>

      </div>

      <div id="line">
      </div>

      <div id="content">

        <p>Did I mention I design stuff? I've had plenty of fun creating a bunch of designs for both Univeristy and for myself as personal projects. Here's a collection of some of my favs.  
        </p>

            <div class="portfolio-item">
            <a href="#"><img src="images/home/image1.gif" alt="View more info" /></a>
            <p class="btn"><a href="#">SEE MORE</a></p>
            </div>

            <div class="portfolio-item">
            <a href="#"><img src="images/home/image2.gif" alt="View more info" /></a>
            <p class="btn"><a href="#">SEE MORE</a></p>
            </div>

            <div class="portfolio-item">
            <a href="#"><img src="images/home/image3.gif" alt="View more info" /></a>
            <p class="btn"><a href="#">SEE MORE</a></p>
            </div>

            <div class="portfolio-item">
            <a href="#"><img src="images/home/image4.gif" alt="View more info" /></a>
            <p class="btn"><a href="#">SEE MORE</a></p>
            </div>

            <div class="portfolio-item">
            <a href="#"><img src="images/home/image5.png" alt="View more info" /></a>
            <p class="btn"><a href="#">SEE MORE</a></p>
            </div>

            <div class="portfolio-item">
            <a href="#"><img src="images/home/image6.png" alt="View more info" /></a>
            <p class="btn"><a href="#">SEE MORE</a></p>
            </div>

            <div class="portfolio-item">
            <a href="#"><img src="images/home/image7.png" alt="View more info" /></a>
            <p class="btn"><a href="#">SEE MORE</a></p>
            </div>

            <div class="portfolio-item">
            <a href="#"><img src="images/home/image8.gif" alt="View more info" /></a>
            <p class="btn"><a href="#">SEE MORE</a></p>
            </div>

        </div>  

      </div>

    </div>

</body>

CSS:

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;
    }
4

1 回答 1

2

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

  • LightBox - 非常流行的库
  • FancyBox - 我在大部分项目中都使用它,它很轻巧,非常漂亮

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

编辑:

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

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

于 2013-06-14T07:26:35.350 回答