|
css Clickbox Gallery (盒子畫廊) >>原檔分享 (Original File Sharing) |
|
|
2010/03/05, Friday |
|
網頁設計製作教學分享 css Clickbox Gallery (盒子畫廊)
我們在網站上常常會看到照片的呈現方式，當然照片的呈現方式有非常多的製作方式，而最近比較常看到的方式則是 Clickbox Gallery
(盒子畫廊)，這種照片的呈現方式最主要是它的呈現質感比較誘人。以上貼於<head>與</head>之間的css程式碼則是
此程式的定義。<body>與</body>則是圖片的放置，如果要增加圖片則增加 <div id="pic7"
class="hz"><a class="left" href="#pic6"></a><img src="clickbox/pic7.jpg" alt="pic5" /><a class="right" href="#pic8"></a><p>Some more descriptive
text</p></div> 即可。
以下貼於<head>與</head>之間：
<style type="text/css">
a, a:visited, a:hover, a:active, a:focus {}
a.clickbox, a.clickbox:visited, a.clickbox:hover {text-decoration:none;
padding-left:10px; font:bold 20px/40px georgia, sans-serif; color:#00c;}
a.clickbox:hover {text-decoration:underline;}
a.clickbox img {display:block; border:0;}
a.clickbox + b {display:block;}
a.clickbox {float:left; display:inline;}
a.clickbox + .lightbox {position:absolute; left:-99999px; top:0; cursor:default; z-index:500;}
a.clickbox .lightbox {position:absolute; left:-99999px; top:0; cursor:default; z-index:500;}
a.clickbox + .lightbox .light {position:absolute; left:0; top:0; width:100%;}
a.clickbox + .lightbox .box {position:absolute; left:0; width:100%; text-align:center; height:300px; top:20px;}
/* trigger for IE6 */
a.clickbox:active, a.clickbox:focus {color:red}
a.clickbox:active + .lightbox {left:0; width:100%; height:100%;}
a.clickbox + .lightbox:hover,
a.clickbox:focus + .lightbox {position:fixed; left:0; width:100%; height:100%;}
a.clickbox + .lightbox:hover .light,
a.clickbox:active + .lightbox .light,
a.clickbox:focus + .lightbox .light {background:#000; width:100%; height:100%; filter: alpha(opacity=75);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); opacity:0.75;
}
.clear {clear:left;}
a.clickbox + .lightbox i {display:block; width:100px; height:20px;
position:fixed; right:-100px; top:0; z-index:500; color:#000;
font:normal normal 14px/20px arial, sans-serif; text-align:center;
background:#fff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
a.clickbox + .lightbox:hover i,
a.clickbox:active + .lightbox i,
a.clickbox:focus + .lightbox i {right:50%; margin-right:-50px; top:5px;}
a.clickbox + .lightbox + #close {display:block; position:fixed;
width:100px; height:20px; overflow:hidden; right:-100px; top:10px;
z-index:1000; background:url(clickbox/trans.gif); cursor:pointer;}
a.clickbox + .lightbox:hover + #close,
a.clickbox:active + .lightbox + #close,
a.clickbox:focus + .lightbox + #close {right:50%; margin-right:-50px; top:5px;}
#gallery {
display:inline-block;
position:relative;
overflow:hidden;
}
#gallery #fullsize {
width:480px;
height:480px;
overflow:scroll;
overflow-y:hidden;
margin-bottom:-18px;
}
#gallery #fullsize div {width:480px; height:480px; position:relative;}
#gallery #fullsize div img {display:block; margin:0 auto; border:0;
padding:10px 10px 0 10px; background:#fff; border:1px solid #000;
border-width:1px 1px 0 1px;}
#gallery #fullsize div a {display:block; top:20px; position:absolute;
outline:0; z-index:500; background:url(clickbox/trans.gif);}
#gallery #fullsize div.vt a.left {height:360px; width:135px; position:absolute; left:105px;}
#gallery #fullsize div.vt a.right {height:360px; width:135px; position:absolute; left:240px;}
#gallery #fullsize div.hz a.left {height:270px; width:180px; position:absolute; left:60px;}
#gallery #fullsize div.hz a.right {height:270px; width:180px; position:absolute; left:240px;}
#gallery #fullsize div a.left:hover {background:url(clickbox/prev.png) no-repeat left 20px;}
#gallery #fullsize div a.right:hover {background:url(clickbox/next.png) no-repeat right 20px;}
#gallery #fullsize div p {background:#fff; margin:0 auto; padding:10px;
border:1px solid #000; border-width:0 1px 1px 1px; font-weight:normal;
color:#444;}
#gallery #fullsize div.vt p {width:270px;}
#gallery #fullsize div.hz p {width:360px;}
</style>
以下貼於<body>與</body>之間：
<a class="clickbox" href="#url">Clickbox Gallery</a>
<b class="lightbox">
<b class="light"></b>
<b class="box">
<div id="gallery">
<div id="fullsize">
<div id="pic1" class="vt"><a class="left" href="#pic10"></a><img src="clickbox/pic1.jpg" alt="pic1" /><a class="right" href="#pic2"></a><p>Some descriptive text</p></div>
<div id="pic2" class="vt"><a class="left" href="#pic1"></a><img src="clickbox/pic2.jpg" alt="pic2" /><a class="right" href="#pic3"></a><p>Some more descriptive text</p></div>
<div id="pic3" class="hz"><a class="left" href="#pic2"></a><img src="clickbox/pic3.jpg" alt="pic3" /><a class="right" href="#pic4"></a><p>Another line of descriptive text</p></div>
<div id="pic4" class="vt"><a class="left" href="#pic3"></a><img src="clickbox/pic4.jpg" alt="pic4" /><a class="right" href="#pic5"></a><p>Some more descriptive text</p></div>
<div id="pic5" class="hz"><a class="left" href="#pic4"></a><img src="clickbox/pic5.jpg" alt="pic5" /><a class="right" href="#pic6"></a><p>This can be any text and as long as you like. It will wrap onto a second and third line if it is too long.</p></div>
<div id="pic6" class="vt"><a class="left" href="#pic5"></a><img src="clickbox/pic6.jpg" alt="pic5" /><a class="right" href="#pic7"></a><p>Further descriptive text</p></div>
<div id="pic7" class="hz"><a class="left" href="#pic6"></a><img src="clickbox/pic7.jpg" alt="pic5" /><a class="right" href="#pic8"></a><p>Some more descriptive text</p></div>
<div id="pic8" class="hz"><a class="left" href="#pic7"></a><img src="clickbox/pic8.jpg" alt="pic5" /><a class="right" href="#pic9"></a><p>Yet more descriptive text</p></div>
<div id="pic9" class="hz"><a class="left" href="#pic8"></a><img src="clickbox/pic9.jpg" alt="pic5" /><a class="right" href="#pic10"></a><p>Some more descriptive text</p></div>
<div id="pic10" class="hz"><a class="left" href="#pic9"></a><img src="clickbox/pic10.jpg" alt="pic5" /><a class="right" href="#pic1"></a><p>Some more descriptive text</p></div>
</div>
</div>
<i>CLOSE</i>
</b>
</b>
|
|
最後更新 ( 2010/03/05, Friday )
|
