Welcome, Old Sport!

一款免费的画廊框架

by ilikecss ON 2011/08/02 15849

a framework gallery page

这两天研究了几个highlightbox技术的案列,自己尝试做了个highlightbox的画廊网页框架,这款效果除了highlightbox效果外还可以还原图片的尺寸,现在这个技术已经在各个领域被应用了,有些效果很炫,但会影响某些浏览器正常的运作,我个人比较喜欢最简单的那种效果。如果有同学喜欢的话可以留我Mail,今后我会提供各种免费的网页架构给大家分享。

Step1. 创建HTML

<a href="thumb_bg1.jpg" rel="prettyPhoto">
<img src="s01_thumb.jpg" width="445" height="190" alt="">
</a>

Step2. 创建CSS

.highlight pre {
	background-color: #f0f0f0;
	border: 1px solid #c2c2c2;
	padding: 10px;
	font-size: 14px;
	border-top-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-bottomright: 15px;
	-webkit-border-radius-topleft: 15px;
	-webkit-border-radius-topright: 15px;
}
.highlight .k,
.highlight .kn {
	font-weight: bold;
}
.highlight .nc,
.highlight .nf {
	color: #af5600;
	color: #db6500;
}

Step3. 插入jQuery和脚本包

$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
	overlay_gallery: false,
	deeplinking: false
});
});
<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/jquery_002.js"></script>
19条评论
  1. #1

    lz什么的最好了说道:

    这么说我又是第一个了???
    等LZ的好东西~

  2. #2

    lz什么的最好了说道:

    LZ不知道玩过这个网站没有,给你推荐一下·
    http://thepixelator.com/

  3. #3

    zdn说道:

    mark~

  4. #4

    ccamy说道:

    感谢分享~~

  5. #5

    jerry说道:

    zhengzanhuan@hotmail.com
    邮件地址
    欣赏一下作品!!

  6. #6

    eirc说道:

    我需要一份。谢谢!yikeseo@163.com

  7. #7

    rower说道:

    可以发我一份吗?rower1194@qq.com
    谢谢!

  8. #8

    不长毛的小毛说道:

    嘻嘻,效果赞!!求lz分享,谢谢啦,邮箱:huangjingbupt@gmail.com :roll: :roll:




TOP