CSS3 Gallery Lightbox

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3 Gallery Lightbox

这个Gallery Lightbox同样没有使用js脚本代码仅使用了CSS代码实现,这个效果初看有些许复杂,一开始不太清楚其实现原理,但仔细看看代码,还是能整明白的。功能主要依赖于css的选择器,以及配合锚点定位来实现。其中很关键一步是HTML的结构,特别是图片的点击播放效果,顺序不能搞错,不然效果无法实现。不过这个效果有一个致命的缺点,那就是对图片的大小有所限制,无法实现图片的自应大小,如果你够有信心的话,可以尝试一下不限制宽度,能否实现这个效果。另外一点,CSS实现的效果,当然没有js实现的效果那么流畅,不过当作挑战性的学习,还是不错的,你不仿一试。

demodownload

HTML Code:

<a href="#url" class="clickbox"><img src="1.jpg" alt="pic1"><span>Click Here</span></a>
<b class="lightbox">
  <b class="light"></b>
  <b class="box">
    <div id="gallery">
      <div id="fullsize">
	<div id="pic1" class="hz">
	  <a class="left" href="#pic10"></a>
	  <img src="1.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="2.jpg" alt="pic2">
	  <a class="right" href="#pic3"></a>
	  <p>Some more descriptive text</p>
	</div>
	<div id="pic3" class="vt">
	  <a class="left" href="#pic2"></a>
	  <img src="3.jpg" alt="pic3">
	  <a class="right" href="#pic4"></a>
	  <p>Another line of descriptive text</p>
	</div>
	<div id="pic4" class="hz">
	  <a class="left" href="#pic3"></a>
	  <img src="4.jpg" alt="pic4">
	  <a class="right" href="#pic5"></a>
	  <p>Some more descriptive text</p>
	</div>
	<div id="pic5" class="vt">
	  <a class="left" href="#pic4"></a>
	  <img src="5.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="6.jpg" alt="pic7">
	  <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="7.jpg" alt="pic7">
	  <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="8.jpg" alt="pic8">
	  <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="9.jpg" alt="pic9">
	  <a class="right" href="#pic10"></a>
	  <p>Some more descriptive text</p>
	</div>
	<div id="pic10" class="vt">
	  <a class="left" href="#pic9"></a>
	  <img src="10.jpg" alt="pic10">
	  <a class="right" href="#pic1"></a>
	  <p>Some more descriptive text</p>
	</div>
      </div>
    </div>
    <i>CLOSE</i>
  </b>
</b>

CSS CODE

body {
  background: url(black-bg.png) repeat 0 0;
}
.clickbox,
.clickbox:visited,
.clickbox:hover {
  text-decoration: none;
  font:bold 20px/40px georgia, sans-serif;
  color: #00c;
}
.clickbox:hover {
  text-decoration: underline;
}

.clickbox img {
  display:block;
  border: 0;
}
.clickbox + b {
  display: block;
}
.clickbox {
  border: 5px solid #fff;
  border-radius: 5px;
  margin: 50px auto;
  background: #fff;
  display: block;
  width: 360px;
}

.clickbox img,
.clickbox span {
  display:block;
  text-align: center;
}

.clickbox + .lightbox {
  position:absolute; 
  left:-99999px; 
  top:0; 
  cursor:default; 
  z-index:500;
}


.clickbox + .lightbox .light {
  position:absolute; 
  left:0; 
  top:0; 
  width:100%;
}
.clickbox + .lightbox .box {
  position:absolute; 
  left:0; 
  width:100%; 
  text-align:center; 
  height:300px; 
  top:20px;
}

.clickbox:active, 
.clickbox:focus {
  color:red
}

.clickbox:active + .lightbox {
  left:0; 
  width:100%; 
  height:100%;
}
.clickbox + .lightbox:hover,
.clickbox:focus + .lightbox {
  position:fixed; 
  left:0; 
  width:100%; 
  height:100%;
}

.clickbox + .lightbox:hover .light,
.clickbox:active + .lightbox .light,
.clickbox:focus + .lightbox .light {
  background:#000; 
  width:100%; 
  height:100%; 
  filter: alpha(opacity=75);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); 
  opacity:0.75;
}

.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;
  border-radius: 6px;
}

.clickbox + .lightbox:hover i,
.clickbox:active + .lightbox i,
.clickbox:focus + .lightbox i {
  right:50%; 
  margin-right:-50px; 
  top:5px;
}

.clickbox + .lightbox + #close {
  display:block; 
  position:fixed; 
  width:100px; 
  height:20px; 
  overflow:hidden; 
  right:-100px; 
  top:10px; 
  z-index:1000; 
  background:url(trans.gif); 
  cursor:pointer;
}

.clickbox + .lightbox:hover + #close,
.clickbox:active + .lightbox + #close,
.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(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(prev.png) no-repeat left 20px;
}
#gallery #fullsize div a.right:hover {
  background:url(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;
}

demodownload

如需转载,烦请注明出处:http://www.w3cplus.com/demo/css3-gallery-lightbox.html

Nike Tanjun SE BR Running Shoe Deep Blue 844908-401 P

如需转载,烦请注明出处:https://www.w3cplus.com/demo/487.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部