3D灯箱插件FlipLightbox

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 3D灯箱插件FlipLightbox 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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="js/jquery.min.js"></script>
    <script src="js/fliplightbox.min.js?v=405881617"></script>
    <script src="js/app.js?v=405875367"></script>
</body>
</html>

JS代码(app.js):

$(document).ready(function(){
	$(".splash-gallery a").flipLightBox({
	type:"image",direction:"rl",speed:"1.2s",timingfunction:"ease",marginLeft:"10px",marginTop:"50px",fixedContentPos:false,hideOriginal:true,flipCount:1,modal:false,closeOnContentClick:true,backgroundAnimating:true,backgroundColor:"rgba(11,11,11,0.8)",closeButton:{
	enable:true,position:3}
,gallery:{
	enable:true,}
,when:{
	opening:function(flb){
	//before open event}
,opened:function(flb){
	//after open event}
,closing:function(flb){
	//before clsoe event}
,closed:function(flb){
	//after close event}
}
}
) $(".run-code-image").on("click",function(){
	$(this).hide();
	$(this).next().show();
	$(".image-example").flipLightBox({
	type:"image"}
);
	return false;
}
) $(".run-code-html").on("click",function(){
	$(this).hide();
	$(this).next().show();
	$(".html-example").flipLightBox({
	type:"html"}
);
	return false;
}
) $(".example-single a").flipLightBox({
	gallery:{
	enable:false}
}
);
	$(".example-gallery a").flipLightBox({
	gallery:{
	enable:true}
}
);
	$(".example-events a").flipLightBox({
	gallery:{
	enable:false}
,when:{
	opening:function(flb){
	//before open event alert("opening event");
}
,opened:function(flb){
	//after open event alert("opened event");
}
,closing:function(flb){
	//before clsoe event alert("closing event");
}
,closed:function(flb){
	//after close event alert("closed event");
}
}
}
);
	$(".example-closebutton a").flipLightBox({
	type:"html",modal:true,fixedContentPos:true,marginTop:"40px",closeOnContentClick:false,closeButton:{
	enable:false}
,gallery:{
	enable:false}
,when:{
	opening:function(flb){
	$(".my-closebutton",flb.backEl).on("click",{
	flb:flb}
,close);
}
}
}
);
	function close(e){
	e.data.flb.close();
}
// $(".flb-html").flipLightBox({
	//type:"html",// direction:"rl",// speed:"1.1s",// hideOriginal:true,// marginLeft:'8px',// marginTop:'100px',// fixedContentPos:false,// flipCount:1,// backgroundColor:'rgba(51,51,51,0.6)',// backgroundAnimating:false,// modal:true,// closeOnContentClick:false,// closeButton:{
	// enable:false,// position:3 //}
,// gallery:{
	//enable:false //}
,// when:{
	//getBacksideHtml:function(){
	//var html = // '<div class="dialog-preview"><div id="folioItemPreview-dialog"><div class="title"><div class="close-button"></div></div><div class="clear"></div><div class="main"><div class="left"><img id="folio-thumb" class="folio-thumb" width="180" height="250" src="http://edge.adobe-dcfs.com/ddp/issueServer/issues/39c5a4f6-08d0-4a65-9080-01895cbda4cb/libraryPreview/portrait"><div class="smallspacer"></div><div class="des"><div class="magazine-title"></div><div class="publication-date"></div><div class="minispacer"></div><div class="purchase-state">$9.99</div><div class="smallspacer"></div><div id="buy-button" class="action-button buy-button">Buy Issue</div></div></div>' + // '<div class="right pageswipe-container folio-preview">' + // '<div data-role="page" class="page" >' + // '<img src="http://store.commarts.com/content/adobedps/app/images/preview/393.png" width="100%" style="-webkit-transform:translate3d(0px,100px,0px);
	"></div></div>' + // '<div class="clear"></div></div></div>';
	//return html;
	//}
,//getBacksideWidth:function(){
	//return 964;
	//}
,//getBacksideHeight:function(){
	//return 631;
	//}
,// opening:function(flb) //{
	//console.log("beforeOpen event:");
	//$(".close-button",flb.backEl).on("click",{
	flb:flb}
,close);
	// $(".right",flb.backEl).pageSwipe({
	// swipeX:false,// getContainerHeight:function (){
	// return 594;
	//}
,// getContainerWidth:function(){
	// return 724;
	//}
,//}
);
	//}
,// opened:function(flb){
	// console.log("open event:");
	//}
,// closing:function(flb) //{
	// console.log("beforeClose event:");
	//}
,// closed:function(flb) //{
	//$(".close-button",flb.backEl).off("click",close);
	// console.log("close event:");
	//}
//}
//}
)// function close(e){
	//e.data.flb.close();
	//}
}
)

CSS代码(app.css):

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
a{background:transparent}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
.clear{width:100%;clear:both;}
.spacer{width:100%;height:20px;clear:both;}
.smallspacer{width:100%;height:10px;clear:both;}
/***content**/
body{background-color:#fff;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;color:#494949;}
a,a:visited{color:#C00;text-decoration:none;}
a:hover{color:#F00;text-decoration:underline;}
.header{color:#000;background:#f7f7f7;margin-bottom:16px;height:49px;}
.wrapper{width:1000px;margin:0 auto;}
#logo{display:block;font-size:24px;line-height:23px;float:left;padding:12px 13px 14px;background:#be2a2a;width:auto;color:#FFF;width:150px;text-align:center;}
#logo:hover{background-color:#C00;text-decoration:none;}
#getPlugin{float:right;margin-top:0px;font-weight:bold;padding:14px 10px;}
.splash{height:520px;}
.splash .left{float:left;width:400px;}
.splash .right{float:left;margin:40px 0px 0px 30px;width:570px;height:420px;}
.splash h2{font-family:'Open Sans Condensed',sans-serif;font-weight:normal;font-size:36px;}
.splash span{line-height:1.6em;}
.splash .left li{padding:6px 5px;}
.splash .right .splash-gallery{width:100%;height:100%;margin:0px;padding:0px;}
.splash .right .gallery-item{float:left;width:200px;height:200px;margin:0 0 10px 10px;padding:0px;-webkit-box-shadow:3px 3px 4px rgba(0,0,0,.1);-moz-box-shadow:3px 3px 4px rgba(0,0,0,.1);box-shadow:3px 3px 4px rgba(0,0,0,.1);}
.splash .right .small{width:140px;}
.splash .right .suggestion{font-size:16px;font-family:'Open Sans Condensed',sans-serif;color:#999;text-align:center;line-height:20px;}
.gradient{background:#ffffff;/* Old browsers */
background:-moz-linear-gradient(top,#ffffff 0%,#d7d7d7 100%);/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#d7d7d7));/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,#ffffff 0%,#d7d7d7 100%);/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#ffffff 0%,#d7d7d7 100%);/* Opera 11.10+ */
background:-ms-linear-gradient(top,#ffffff 0%,#d7d7d7 100%);/* IE10+ */
background:linear-gradient(to bottom,#ffffff 0%,#d7d7d7 100%);/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d7d7d7',GradientType=0 );/* IE6-9 */
}
.box-shadow{width:100%;height:50px;background:#fff;clear:both;-webkit-box-shadow:rgba(0,0,0,0.07) 0px -20px 14px;-moz-box-shadow:rgba(0,0,0,0.07) 0px -20px 14px;-ms-box-shadow:rgba(0,0,0,0.07) 0px -20px 14px;-o-box-shadow:rgba(0,0,0,0.07) 0px -20px 14px;box-shadow:rgba(0,0,0,0.07) 0px -20px 14px;}
.content{margin-bottom:50px;}
.section h3{margin:50px 0 10px 0;}
.first-section h3{margin:0px 0 10px 0;}
#section-code .left{float:left;width:600px;}
#section-code .right{float:right;text-align:center;width:400px;}
#section-code .code-example-wrapper{width:200px;height:200px;margin:50px 100px;}
#section-code .example-wrapper{display:none;width:200px;height:200px;}
.html-dialog-example{background:#fff;width:600px;height:400px;text-align:center;line-height:100px;display:none;}
#section-example .example{float:left;width:500px;}
#section-example h4{font-weight:normal;font-size:15px;}
#section-example .example-wrapper{width:100%;height:100%;margin:0px;padding:0px;}
#section-example .example-wrapper li{list-style:none;float:left;width:100px;height:100px;margin:0 0 5px 5px;padding:0px;-webkit-box-shadow:3px 3px 4px rgba(0,0,0,.1);-moz-box-shadow:3px 3px 4px rgba(0,0,0,.1);box-shadow:3px 3px 4px rgba(0,0,0,.1);}
#section-example .example-wrapper img{max-width:100%;}
#section-example .example-wrapper li.small{width:70px;}
#example-closebutton{width:800px;height:566px;padding:20px;background:#fff;display:none;}
#example-closebutton img{width:100%;}
#example-closebutton .my-closebutton{width:100px;line-height:30px;border:0px;background:#666;color:#fff;border-radius:15px;margin-top:5px;float:right;outline:0px;}
.option-table{width:970px;clear:both;background:#e0e0e0;border-radius:10px;padding:15px;-webkit-box-shadow:3px 3px 4px rgba(0,0,0,.1);-moz-box-shadow:3px 3px 4px rgba(0,0,0,.1);box-shadow:3px 3px 4px rgba(0,0,0,.1);}
.option-row-title{width:100%;text-align:left;line-height:40px;padding:5px 0;font-weight:bold;color:#fff;background:#666;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.option-row{width:100%;padding:20px 0px;text-align:left;border-bottom:1px solid #ccc;}
.option-row:hover{background:#d0d0d0;}
.option-table .col{float:left;}
.option-table .col1{color:#C00;width:130px;padding-left:20px;}
.option-table .col2{color:#080;text-align:center;width:150px;}
.option-table .col3{color:#080;width:250px;}
.option-table .col4{width:420px;}
.option-table .col-title{line-height:40px;font-weight:bold;color:#fff;background:#666;}
.option-table .col p{margin:0;padding:0px 0px 10px 0px;}
.option-table .col3 span{color:#494949;}
.option-table .row-level2{width:930px;margin-left:40px;}
.option-table .row-level2 .col1{width:90px;}
.option-table .row-object{border:none;}
.option-table .col1 .object-start{color:#999;margin-left:20px;}
.option-table .col1 .object-end{color:#999;}
/*.option-table .col1 span{cursor:pointer;border-bottom:1px dotted #900;}
*/
pre{background:#fff !important;border-radius:5px !important;-webkit-border-radius:5px !important;-moz-border-radius:5px !important;font-size:12px !important;margin:3px !important;border:none !important;}
pre div{padding:5px 5px 5px 0px;}
pre > .pln{display:none;}
@media(max-width:1023px){.wrapper{width:94%;}
.splash{height:auto;}
.splash .left{width:100%;float:none;}
.splash .right{width:570px;float:none;margin:0px auto;padding-bottom:40px;height:auto;}
#section-code .left{float:none;width:100%;}
#section-code .right{float:none;width:100%;margin:0 auto;}
#section-code .code-example-wrapper{margin:0;}
.option-table{width:550px;}
.option-table .row-level2{width:510px;}
.option-table .col4{display:none;}
}
@media(max-width:620px){.splash .small{display:none;}
.splash .right{width:420px;}
.option-table{width:400px;}
.option-table .row-level2{width:360px;}
.option-table .col2{display:none;}
}
@media(max-width:460px){.wrapper{width:360px;}
.splash .small{display:block;}
.splash .gallery-hide{display:none;}
}

附件:下载该文件资源,减少时间成本(增值服务)