<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>3D灯箱插件FlipLightbox - 网页模板</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/app.css?v=405855542" />
</head>
<body>
<div class="clear"></div>
<div class="splash gradient">
<div class="wrapper">
<div class="left">
<h2>Make a flip lightbox with CSS3</h2>
<span>FlipLightBox.js is a responsive jQuery lightbox plugin that is focused on providing fancy 3d flipping effect with css3 and javascript. Main Features include: </span>
<ul>
<li>3D Flipping Effect with CSS3</li>
<li>Support both Image Lightbox and HTML Dialog</li>
<li>Image Gallery</li>
<li>Responsive jQuery Plugin</li>
<li>15+ Options for Customization</li>
<li>Support All Modern Browsers (chrome 16+, firefox 12+, safari 5+, opera 12+, and IE10+)</li>
<li>Support PC, Mac, iPad, iPhone</li>
<li>Keyboard shortcuts for close, navigation left and right</li>
</ul>
</div>
<div class="right">
<div class="splash-gallery">
<div class="gallery-item">
<a href="images/CharlesRiver2.jpg" title="Charles River @Boston">
<img src="images/CharlesRiver2_200X200.jpg" />
</a>
</div>
<div class="gallery-item">
<a href="images/CharlesRiver3.jpg" title="Charles River @Boston">
<img src="images/CharlesRiver3_200X200.jpg" />
</a>
</div>
<div class="gallery-item small">
<a href="images/Fall.jpg" title="Fall @Boston">
<img src="images/Fall_140X200.jpg" />
</a>
</div>
<div class="gallery-item">
<a href="images/Monterey2.jpg" title="Monterey Bay">
<img src="images/Monterey2_200X200.jpg" />
</a>
</div>
<div class="gallery-item small">
<a href="images/Monterey.jpg" title="Monterey Bay">
<img src="images/Monterey_140X200.jpg" />
</a>
</div>
<div class="gallery-item">
<a href="images/CharlesRiver.jpg" title="Charles River @Boston">
<img src="images/CharlesRiver_200X200.jpg" />
</a>
</div>
</div>
<div class="suggestion">↑ Click an image to see flipLightbox.js in action</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="content wrapper">
<section id="section-example" class="section">
<h3>More Examples</h3>
<div class="example">
<h4>Single Image Lightbox</h4>
<ul class="example-single example-wrapper">
<li>
<a href="images/CharlesRiver2.jpg" title="Charles River @Boston">
<img src="images/CharlesRiver2_200X200.jpg" />
</a>
</li>
<li>
<a href="images/CharlesRiver3.jpg" title="Charles River @Boston">
<img src="images/CharlesRiver3_200X200.jpg" />
</a>
</li>
<li class="small">
<a href="images/Fall.jpg" title="Fall @Boston">
<img src="images/Fall_140X200.jpg" />
</a>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="example">
<h4>Lightbox Gallery</h4>
<ul class="example-gallery example-wrapper">
<li>
<a href="images/Monterey2.jpg" title="Monterey Bay">
<img src="images/Monterey2_200X200.jpg" />
</a>
</li>
<li class="small">
<a href="images/Monterey.jpg" title="Monterey Bay">
<img src="images/Monterey_140X200.jpg" />
</a>
</li>
<li>
<a href="images/CharlesRiver.jpg" title="Charles River @Boston">
<img src="images/CharlesRiver_200X200.jpg" />
</a>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="example">
<h4>Open / Close events callback</h4>
<ul class="example-events example-wrapper">
<li>
<a href="images/CharlesRiver2.jpg" title="Charles River @Boston">
<img src="images/CharlesRiver2_200X200.jpg" />
</a>
</li>
<li>
<a href="images/CharlesRiver3.jpg" title="Charles River @Boston">
<img src="images/CharlesRiver3_200X200.jpg" />
</a>
</li>
<li class="small">
<a href="images/Fall.jpg" title="Fall @Boston">
<img src="images/Fall_140X200.jpg" />
</a>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="example">
<h4>Html Dialog and customized close button</h4>
<ul class="example-closebutton example-wrapper">
<li>
<a href="#example-closebutton">
<img src="images/Monterey_200X200.jpg" />
</a>
</li>
</ul>
<div id="example-closebutton">
<img src="images/Monterey.jpg" />
<button class="my-closebutton">Close</button>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</section>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
3D灯箱插件FlipLightbox.zip （20个子文件） 
3D灯箱插件FlipLightbox 
3D灯箱插件FlipLightbox.jpg 64KB jiaoben1652 css 
app.css 9KB images CharlesRiver_200X200.jpg 16KB CharlesRiver.jpg 133KB DownloadFile.tmp.jpg 153KB CharlesRiver3.jpg 116KB Monterey2_200X200.jpg 22KB Fall.jpg 266KB Monterey2.jpg 179KB Fall_140X200.jpg 41KB Monterey.jpg 160KB CharlesRiver3_200X200.jpg 15KB Monterey_140X200.jpg 25KB Monterey_200X200.jpg 31KB CharlesRiver2_200X200.jpg 20KB CharlesRiver2.jpg 153KB
index.html 8KB js jquery.min.js 92KB app.js 6KB fliplightbox.min.js 21KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 自适应窗口 dll winform .net
- 在R语言中实现带有边缘直方图、箱线图和密度图的散点图，以及连续变量直方图的多图展示
- 汽车维修技术指南-发动机管理系统与车载系统问题分析
- 基于机器学习的德国地区气候变化数据挖掘与可视化系统设计与实现
- 2015年奥迪服务技术部SoST培训-Feedback系统Portal升级与应用
- 技术资料分享SDpart2很好的技术资料.zip
- navicat permium 12
- 人口普查数据的应用研究及实现在Django框架下的设计与实现
- 连接sqlserver时报ODBC驱动程序管理器错误 sqlncli-64.msi
- 基于MATLAB软件的车牌识别实现车牌定位平台【GUI界面版本】.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
