Fancy box effect
How do I make an fancy box effect?
What is a fancy box effect? How do you make a fancy box effect? This script and codes were developed by Nugroho Indra Utomo on 16 October 2022, Sunday.
Fancy box effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fancy box effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Product Categories :.</title>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta name="description" content="Digital Marketing">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Transcosmos Indonesia">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/parts.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/jquery.fancybox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.fancybox.js" ></script>
<script type="text/javascript"> $(document).ready(function() { $('.fancybox').fancybox(); });
</script>
</head>
<body>
<!--#wrap-->
<div id="wrap"> <!--#wrapInner--> <div id="wrapInner"> <!-- #Header Area--> <div id="headerArea"> <div class="columnBlockA01"><img src="images/header_logo_001.png" alt="logo" /></div> <!--#gnavArea--> <div id="gnavArea"> <ul> <li><a href="" title="Product">Product</a></li> <li><a href="" title="Company">Company</a></li> <li><a href="" title="News & Event">News & Event</a></li> </ul> </div> <!--/#gnavArea--> <div class="columnBlockA02"> <ul> <li><a href="" title="Product">Halaman Utama</a></li> <li><a href="" title="Company">Peta Situs</a></li> <li><a href="" title="News & Event">FAQ</a></li> <li><a href="" title="Karir">Karir</a></li> <li><a href="" title="Contact Us">Contact Us</a></li> </ul> <form> <input class="radiusBlockA01" type="text" /> <input class="radiusBlockA01" type="submit" value="Cari" /> </form> </div> </div> <!-- /#Header Area--> <!--#dirPathArea--> <div id="dirPathArea"> </div> <!--/#dirPathArea--> <!-- Main Area--> <div id="mainArea"> <!-- #Content Area--> <div id="contentArea" class="withoutHomepage"> <div class="navBar"> <ul> <li><a href="index.html" title="Home">Home</a></li> <li><a href="#" title="Products">Products</a></li> <li><a href="#" title="Our Brands">Our Brands</a></li> </ul> </div> <h1>Product Categories</h1> <div class="columnBlockA01"> <ul> <li> <a class="fancybox" href="images/product1.png"data-fancybox-group="gallery" title="Wafer, Biscuits & Delicacies"><img src="images/main_img_001.png" alt="Wafer, Biscuits & Delicacies" title="Wafer, Biscuits & Delicacies" width="143" height="105" /> </a> <a href=""><h4>Wafer, Biscuits & Delicacies</h4></a> </li> <li> <a class="fancybox" href="images/main_img_002.png" data-fancybox-group="gallery" title="WAPER DAN BISKUIT"><img src="images/main_img_002.png" alt="Wafer, Biscuits & Delicacies" title="Wafer, Biscuits & Delicacies" width="143" height="105" /> </a> <a href=""><h4>Candy</h4></a> </li> <li> <img src="images/main_img_003.png" alt="Nut" title="Nut" width="143" height="105" /> <a href=""><h4>Nut</h4></a> </li> <li> <img src="images/main_img_004.png" alt="Minuman Sehat" title="Minuman Sehat" width="143" height="105" /> <a href=""><h4>Minuman Sehat</h4></a> </li> <li> <img src="images/main_img_005.png" alt="Fermented Milk" title="Fermented Milk" width="143" height="105" /> <a href=""><h4>Fermented Milk</h4></a> </li> <li> <img src="images/main_img_006.png" alt="Sweet Water" title="Sweet Water" width="143" height="105" /> <a href=""><h4>Sweet Water</h4></a> </li><li> <img src="images/main_img_007.png" alt="Liquid Milk" title="Liquid Milk" width="143" height="105" /> <a href=""><h4>Liquid Milk</h4></a> </li> <li> <img src="images/main_img_008.png" alt="Personal Care" title="Personal Care" width="143" height="105" /> <a href=""><h4>Personal Care</h4></a> </li> <li> <img src="images/main_img_009.png" alt="Minuman Nutrisi" title="Minuman Nutrisi" width="143" height="105" /> <a href=""><h4>Minuman Nutrisi</h4></a> </li> </ul> </div> </div> <!-- /#Content Area--> <!-- #Side Area--> <div id="sideArea"> <div class="column01"> <dl> <dt>Product</dt> <dd><a href="our-brands.html" title="our brand">Our Brand</a></dd> <dd><a href="" title="Tips & Articles">Tips & Articles</a></dd> <dd><a href="recipes.html" title="Recipes">Recipes</a></dd> <dd><a href="testi.html" title="Customer Testimony">Customer Testimony</a></dd> <dd><a href="Advertising.html" title="Advertising">Advertising</a></dd> <dd><a href="Promotion.html" title="Promotions">Promotions</a></dd> <dd><a href="" title="Fun Stuffs">Fun Stuffs</a></dd> </dl> </div> <div class="column02"> <dl> <dt>Micro Site</dt> <dd><a href="" title="Vitacharm">Vitacharm®</a></dd> <dd><a href="" title="Kiranti">Kiranti®</a></dd> <dd><a href="" title="Wafer Tango">Wafer Tango®</a></dd> <dd><a href="" title="Formula Oral Care">Formula Oral Care®</a></dd> </dl> </div> </div> <!-- /#Side Area--> </div> <!-- /#Main Area--> <!-- #Footer Area--> <div id="footerArea"> <p>Contact Us: 0800-107-7777 (Toll Free)</p> <p> <a href="" title="Terms & Conditions">Terms & Conditions</a> | <a href="" title="Privacy Policy">Privacy Policy</a></p> <p>Copyright © 2010, OT | Last Update: 21 Oktober 14</p> </div> <!-- /#Footer Area--> </div> <!--/#wrapInner-->
</div>
<!--/#wrap-->
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
Fancy box effect - Script Codes CSS Codes
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{ padding: 0; margin: 0; border: 0; outline: none; vertical-align: top;
}
.fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020;
}
.fancybox-skin { position: relative; background: #f9f9f9; color: #444; text-shadow: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
}
.fancybox-opened { z-index: 8030;
}
.fancybox-opened .fancybox-skin { -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner { position: relative;
}
.fancybox-inner { overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner { -webkit-overflow-scrolling: touch;
}
.fancybox-error { color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap;
}
.fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%;
}
.fancybox-image { max-width: 100%; max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url(../images/fancybox_sprite.png);
}
#fancybox-loading { position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060;
}
#fancybox-loading div { width: 44px; height: 44px; background:url(../images/fancybox_loading.gif) center center no-repeat;
}
.fancybox-close { position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040;
}
.fancybox-nav { position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url('../images/blank.gif'); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040;
}
.fancybox-prev { left: 0;
}
.fancybox-next { right: 0;
}
.fancybox-nav span { position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden;
}
.fancybox-prev span { left: 10px; background-position: 0 -36px;
}
.fancybox-next span { right: 10px; background-position: 0 -72px;
}
.fancybox-nav:hover span { visibility: visible;
}
.fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock { overflow: hidden !important; width: auto;
}
.fancybox-lock body { overflow: hidden !important;
}
.fancybox-lock-test { overflow-y: hidden !important;
}
.fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url('../images/fancybox_overlay.png');
}
.fancybox-overlay-fixed { position: fixed; bottom: 0; right: 0;
}
.fancybox-lock .fancybox-overlay { overflow: auto; overflow-y: scroll;
}
/* Title helper */
.fancybox-title { visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050;
}
.fancybox-opened .fancybox-title { visibility: visible;
}
.fancybox-title-float-wrap { position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center;
}
.fancybox-title-float-wrap .child { display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap;
}
.fancybox-title-outside-wrap { position: relative; margin-top: 10px; color: #fff;
}
.fancybox-title-inside-wrap { padding-top: 10px;
}
.fancybox-title-over-wrap { position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { background-image: url('[email protected]'); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ } #fancybox-loading div { background-image: url('[email protected]'); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ }
}
@charset "utf-8";
/*===============
contain : construct page layout like page background,
header, footer, global navigation and so on =====*/
/*----- contents ------- 1: Wrap Section 2: Header Area : gnavArea 3: Main Area : contentArea : sideArea 4: Footer Area
----------------------*/
/*
===== 1: Wrap Section ===========================*/
#wrap { margin: 0px; padding: 0px; background-image:url(../images/bg_001.jpg); background-repeat:no-repeat; background-position:center bottom; overflow:hidden;
}
#wrap #wrapInner { width: 940px; height: auto; margin: 0px auto;
}
/*
===== 2: Header Area ============================*/
#wrap #wrapInner #headerArea { position: relative; width: 100%; height: 110px; margin: 0px auto;
}
#wrap #wrapInner #headerArea:after { content: ""; display: block; position: absolute; top: 110px; width: 940px; height: 40px; background-image: url(../images/header_bg_001.png); background-position: center bottom;
}
#wrap #wrapInner #headerArea .columnBlockA01, #headerArea #gnavArea, #headerArea .columnBlockA02 { float:left;
}
/* logo
----------------------------*/
#wrap #wrapInner #headerArea .columnBlockA01 { width: 170px; height: 90px; margin: 0; padding: 20px 0 0 0;
}
/* #gnavArea
----------------------------*/
#wrap #wrapInner #headerArea #gnavArea { width: 470px; height: 110px; margin: 0; font-size:14px;
}
#wrap #wrapInner #headerArea #gnavArea ul { display:block; margin:77px 0 0 95px;
}
#wrap #wrapInner #headerArea #gnavArea ul li { display:block; float:left; margin:0 56px 0 0;
}
#wrap #wrapInner #headerArea #gnavArea ul li:last-child { margin:0 0 0 0;
}
#wrap #wrapInner #headerArea #gnavArea ul li a { color:#333335; display:block; text-decoration:none; text-transform:uppercase;
}
#wrap #wrapInner #headerArea #gnavArea ul li a:hover {
}
/* nav & search
----------------------------*/
#wrap #wrapInner #headerArea .columnBlockA02 { width: 300px; height: 110px; margin: 0px auto;
}
#wrap #wrapInner #headerArea .columnBlockA02 ul { margin:30px 0 0 0; font-size:12px; text-align:right;
}
#wrap #wrapInner #headerArea .columnBlockA02 ul li { display:inline-block; margin:0 0 0 0;
}
#wrap #wrapInner #headerArea .columnBlockA02 ul li:after { content:" | ";
}
#wrap #wrapInner #headerArea .columnBlockA02 ul li:last-child { margin:0 0 0 0;
}
#wrap #wrapInner #headerArea .columnBlockA02 ul li:last-child:after { content:"";
}
#wrap #wrapInner #headerArea .columnBlockA02 ul li a { color:#1d1c1c; text-decoration:none;
}
#wrap #wrapInner #headerArea .columnBlockA02 ul li a:hover {
}
#wrap #wrapInner #headerArea .columnBlockA02 form { margin:25px 0 0 10px;
}
#wrap #wrapInner #headerArea .columnBlockA02 form input[type='text']{ width:183px; height:30px; border:1px solid #d9d9d9; margin:0 10px 0 0; padding:0 10px;
}
#wrap #wrapInner #headerArea .columnBlockA02 form input[type='submit']{ color:#fff; font-size:14px; width:70px; height:32px; border:1px solid #d9d9d9; background-color:#00a7dd; cursor:pointer;
}
/*
===== 3: Main Area ===============================*/
#wrap #wrapInner #mainArea { width:100%; min-height:780px; margin:20px auto 0 auto; overflow:hidden;
}
#wrap #wrapInner #mainArea #contentArea .columnBlockA01 ul li a { text-decoration:none;
}
/* .columnBlockB01 - banner
----------------------------*/
#wrap #wrapInner #mainArea .columnBlockB01 { width:100%; height:312px; margin:22px 0 0 0;
}
/* .columnBlockB02 - product
----------------------------*/
#wrap #wrapInner #mainArea .columnBlockB02 { position: relative; width: 100%; height: 85px; margin: 3px 0 0 0;
}
#wrap #wrapInner #mainArea .columnBlockB02:after { content: ""; display: block; position: relative; top: 85px; width: 940px; height: 30px; background-image: url(../images/product_bg_001.png); background-position: center bottom;
}
#wrap #wrapInner #mainArea .columnBlockB02 .captionBlockB02, #mainArea .columnBlockB02 .sliderBlockB02 { display: block; float: left;
}
#wrap #wrapInner #mainArea .columnBlockB02 .captionBlockB02 { width: 130px; height: auto; color: #636363; font-size: 18px; margin: 30px 0 0 10px;
}
#wrap #wrapInner #mainArea .columnBlockB02 .sliderBlockB02 { position: relative; width: 800px; height: 85px; margin: 0 0 0 0; background-color: #ffffff;
}
.jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn { position: absolute; cursor: pointer; display: block; background: url(../images/arrow.png) no-repeat; overflow: hidden;
}
.jssora03l { background-position: -3px -33px; width: 55px; height: 55px; top: 123px; left: -10px;
}
.jssora03r { background-position: -63px -33px; width: 55px; height: 55px; top: 123px; right: -15px
}
.jssora03l:hover { background-position: -123px -33px;
}
.jssora03r:hover { background-position: -183px -33px;
}
.jssora03ldn { background-position: -243px -33px;
}
.jssora03rdn { background-position: -303px -33px;
}
/* .columnBlockB03 - news & event
----------------------------*/
#wrap #wrapInner #mainArea .columnBlockB03 { width: 100%; height: 64px; margin: 30px 0 0 0; border-top: 5px solid #e1e1e1; border-bottom: 5px solid #e1e1e1; overflow: hidden;
}
#wrap #wrapInner #mainArea .columnBlockB03 .captionBlockB03, #mainArea .columnBlockB03 .listBlockB03, #mainArea .columnBlockB03 .linkBlockB03 { display: block; float: left;
}
#wrap #wrapInner #mainArea .columnBlockB03 .captionBlockB03 { width: 130px; height: auto; color: #636363; font-size: 14px; text-transform: uppercase; margin: 18px 0 0 10px;
}
#wrap #wrapInner #mainArea .columnBlockB03 .listBlockB03 { width: 610px; height: 50px; margin: 0 0 0 0; padding: 14px 15px 0 15px;
}
#wrap #wrapInner #mainArea .columnBlockB03 .listBlockB03 li { margin: 0 0 5px 0; overflow: hidden;
}
#wrap #wrapInner #mainArea .columnBlockB03 .listBlockB03 li a { color: #00a7dd; font-size: 14px; text-decoration: none;
}
#wrap #wrapInner #mainArea .columnBlockB03 .listBlockB03 li a:after { content: ""; background-image: url(../images/left_arrow_blue_001.png); position: relative; display: inline-block; width: 7px; height: 12px; top: 1px; margin: 0 0 0 8px;
}
#wrap #wrapInner #mainArea .columnBlockB03 .linkBlockB03 { width: 154px; height: 25px; background-color: #00a7dd; border: 1px solid #d9d9d9; color: #fff; font-size: 14px; text-align: center; margin: 12px 1px 0 3px; padding: 5px 0 0 0; text-decoration: none;
}
/* .columnBlockB04 - news
----------------------------*/
#wrap #wrapInner #mainArea .columnBlockB04 { width:100%; height:95px; margin:42px 0 115px 0; font-size:12px;
}
#wrap #wrapInner #mainArea .columnBlockB04 ul {
}
#wrap #wrapInner #mainArea .columnBlockB04 ul li{ width:146px; display:block; float:left;
}
#wrap #wrapInner #mainArea .columnBlockB04 ul li:nth-child(2n){ margin:0 11px 0 10px;
}
#wrap #wrapInner #mainArea .columnBlockB04 ul li h3{ color:#00a7dd; font-weight:bold;
}
/* #contentArea
----------------------------*/
#mainArea #contentArea {
}
/* #sideArea
----------------------------*/
#mainArea #sideArea {
}
/* .columnBlockB05 - advertising
----------------------------*/
#wrap #wrapInner #mainArea #dirPathArea { margin: 0; font-size: 11px;
}
#wrap #wrapInner #mainArea #columnBlockB05 { width: 100%; height: auto; background: #FFFB96; margin: 0 0 115px 0; font-size: 12px;
}
/*================sideMenu=============*/
#wrap #wrapInner #mainArea .withoutHomepage{ width:720px; height:794px; float:right; background-image:url(../images/main_line_001.png); background-repeat:no-repeat; background-position:0px 20px; }
#wrap #wrapInner #mainArea #sideArea{ width:220px; height:auto; float:left; }
#wrap #wrapInner #mainArea #sideArea .column01,
#wrap #wrapInner #mainArea #sideArea .column02{ margin:20px 0px 0px 0px; }
#wrap #wrapInner #mainArea #sideArea .column01 dl,
#wrap #wrapInner #mainArea #sideArea .column02 dl{ display:block; margin:20}
#wrap #wrapInner #mainArea #sideArea .column01 dl dt,
#wrap #wrapInner #mainArea #sideArea .column02 dl dt{ margin: 0 0 15px 10px; font-size:18px; color:#636363; }
#wrap #wrapInner #mainArea #sideArea .column01 dl dd a,
#wrap #wrapInner #mainArea #sideArea .column02 dl dd a{ color:#00a7dd; font-size:14px; line-height:30px; margin: 0 0 0px 20px; text-decoration:none; }
/*===== 4: Footer Area =============================*/
#wrap #wrapInner #footerArea { width:930px; height:62px; margin:0px auto; background-image:url(../images/footer_bg_001.jpg); padding:15px 0 0 10px;
}
#wrap #wrapInner #footerArea p{ display:block; width:460px; float:left; color:#fff; margin:0 0 8px 0;
}
#wrap #wrapInner #footerArea p:nth-child(2){ text-align:right;
}
#wrap #wrapInner #footerArea p a{ color:#fff; text-decoration:none;
}
.clearfix { clear: both; overflow:hidden;
}
Fancy box effect - Script Codes JS Codes
/*! * fancyBox - jQuery Plugin * version: 2.1.5 (Fri, 14 Jun 2013) * @requires jQuery v1.6 or later * * Examples at http://fancyapps.com/fancybox/ * License: www.fancyapps.com/fancybox/#license * * Copyright 2012 Janis Skarnelis - [email protected] * */
(function (window, document, $, undefined) { "use strict"; var H = $("html"), W = $(window), D = $(document), F = $.fancybox = function () { F.open.apply( this, arguments ); }, IE = navigator.userAgent.match(/msie/i), didUpdate = null, isTouch = document.createTouch !== undefined, isQuery = function(obj) { return obj && obj.hasOwnProperty && obj instanceof $; }, isString = function(str) { return str && $.type(str) === "string"; }, isPercentage = function(str) { return isString(str) && str.indexOf('%') > 0; }, isScrollable = function(el) { return (el && !(el.style.overflow && el.style.overflow === 'hidden') && ((el.clientWidth && el.scrollWidth > el.clientWidth) || (el.clientHeight && el.scrollHeight > el.clientHeight))); }, getScalar = function(orig, dim) { var value = parseInt(orig, 10) || 0; if (dim && isPercentage(orig)) { value = F.getViewport()[ dim ] / 100 * value; } return Math.ceil(value); }, getValue = function(value, dim) { return getScalar(value, dim) + 'px'; }; $.extend(F, { // The current version of fancyBox version: '2.1.5', defaults: { padding : 15, margin : 20, width : 800, height : 600, minWidth : 100, minHeight : 100, maxWidth : 9999, maxHeight : 9999, pixelRatio: 1, // Set to 2 for retina display support autoSize : true, autoHeight : false, autoWidth : false, autoResize : true, autoCenter : !isTouch, fitToView : true, aspectRatio : false, topRatio : 0.5, leftRatio : 0.5, scrolling : 'auto', // 'auto', 'yes' or 'no' wrapCSS : '', arrows : true, closeBtn : true, closeClick : false, nextClick : false, mouseWheel : true, autoPlay : false, playSpeed : 700, preload : 3, modal : false, loop : true, ajax : { dataType : 'html', headers : { 'X-fancyBox': true } }, iframe : { scrolling : 'auto', preload : true }, swf : { wmode: 'transparent', allowfullscreen : 'true', allowscriptaccess : 'always' }, keys : { next : { 13 : 'left', // enter 34 : 'up', // page down 39 : 'left', // right arrow 40 : 'up' // down arrow }, prev : { 8 : 'right', // backspace 33 : 'down', // page up 37 : 'right', // left arrow 38 : 'down' // up arrow }, close : [27], // escape key play : [32], // space - start/stop slideshow toggle : [70] // letter "f" - toggle fullscreen }, direction : { next : 'left', prev : 'right' }, scrollOutside : true, // Override some properties index : 0, type : null, href : null, content : null, title : null, // HTML templates tpl: { wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>', image : '<img class="fancybox-image" src="{href}" alt="" />', iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen' + (IE ? ' allowtransparency="true"' : '') + '></iframe>', error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>', closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>', next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>', prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>' }, // Properties for each animation type // Opening fancyBox openEffect : 'elastic', // 'elastic', 'fade' or 'none' openSpeed : 300, openEasing : 'swing', openOpacity : true, openMethod : 'zoomIn', // Closing fancyBox closeEffect : 'elastic', // 'elastic', 'fade' or 'none' closeSpeed : 250, closeEasing : 'swing', closeOpacity : true, closeMethod : 'zoomOut', // Changing next gallery item nextEffect : 'elastic', // 'elastic', 'fade' or 'none' nextSpeed : 250, nextEasing : 'swing', nextMethod : 'changeIn', // Changing previous gallery item prevEffect : 'elastic', // 'elastic', 'fade' or 'none' prevSpeed : 250, prevEasing : 'swing', prevMethod : 'changeOut', // Enable default helpers helpers : { overlay : true, title : true }, // Callbacks onCancel : $.noop, // If canceling beforeLoad : $.noop, // Before loading afterLoad : $.noop, // After loading beforeShow : $.noop, // Before changing in current item afterShow : $.noop, // After opening beforeChange : $.noop, // Before changing gallery item beforeClose : $.noop, // Before closing afterClose : $.noop // After closing }, //Current state group : {}, // Selected group opts : {}, // Group options previous : null, // Previous element coming : null, // Element being loaded current : null, // Currently loaded element isActive : false, // Is activated isOpen : false, // Is currently open isOpened : false, // Have been fully opened at least once wrap : null, skin : null, outer : null, inner : null, player : { timer : null, isActive : false }, // Loaders ajaxLoad : null, imgPreload : null, // Some collections transitions : {}, helpers : {}, /* * Static methods */ open: function (group, opts) { if (!group) { return; } if (!$.isPlainObject(opts)) { opts = {}; } // Close if already active if (false === F.close(true)) { return; } // Normalize group if (!$.isArray(group)) { group = isQuery(group) ? $(group).get() : [group]; } // Recheck if the type of each element is `object` and set content type (image, ajax, etc) $.each(group, function(i, element) { var obj = {}, href, title, content, type, rez, hrefParts, selector; if ($.type(element) === "object") { // Check if is DOM element if (element.nodeType) { element = $(element); } if (isQuery(element)) { obj = { href : element.data('fancybox-href') || element.attr('href'), title : element.data('fancybox-title') || element.attr('title'), isDom : true, element : element }; if ($.metadata) { $.extend(true, obj, element.metadata()); } } else { obj = element; } } href = opts.href || obj.href || (isString(element) ? element : null); title = opts.title !== undefined ? opts.title : obj.title || ''; content = opts.content || obj.content; type = content ? 'html' : (opts.type || obj.type); if (!type && obj.isDom) { type = element.data('fancybox-type'); if (!type) { rez = element.prop('class').match(/fancybox\.(\w+)/); type = rez ? rez[1] : null; } } if (isString(href)) { // Try to guess the content type if (!type) { if (F.isImage(href)) { type = 'image'; } else if (F.isSWF(href)) { type = 'swf'; } else if (href.charAt(0) === '#') { type = 'inline'; } else if (isString(element)) { type = 'html'; content = element; } } // Split url into two pieces with source url and content selector, e.g, // "/mypage.html #my_id" will load "/mypage.html" and display element having id "my_id" if (type === 'ajax') { hrefParts = href.split(/\s+/, 2); href = hrefParts.shift(); selector = hrefParts.shift(); } } if (!content) { if (type === 'inline') { if (href) { content = $( isString(href) ? href.replace(/.*(?=#[^\s]+$)/, '') : href ); //strip for ie7 } else if (obj.isDom) { content = element; } } else if (type === 'html') { content = href; } else if (!type && !href && obj.isDom) { type = 'inline'; content = element; } } $.extend(obj, { href : href, type : type, content : content, title : title, selector : selector }); group[ i ] = obj; }); // Extend the defaults F.opts = $.extend(true, {}, F.defaults, opts); // All options are merged recursive except keys if (opts.keys !== undefined) { F.opts.keys = opts.keys ? $.extend({}, F.defaults.keys, opts.keys) : false; } F.group = group; return F._start(F.opts.index); }, // Cancel image loading or abort ajax request cancel: function () { var coming = F.coming; if (!coming || false === F.trigger('onCancel')) { return; } F.hideLoading(); if (F.ajaxLoad) { F.ajaxLoad.abort(); } F.ajaxLoad = null; if (F.imgPreload) { F.imgPreload.onload = F.imgPreload.onerror = null; } if (coming.wrap) { coming.wrap.stop(true, true).trigger('onReset').remove(); } F.coming = null; // If the first item has been canceled, then clear everything if (!F.current) { F._afterZoomOut( coming ); } }, // Start closing animation if is open; remove immediately if opening/closing close: function (event) { F.cancel(); if (false === F.trigger('beforeClose')) { return; } F.unbindEvents(); if (!F.isActive) { return; } if (!F.isOpen || event === true) { $('.fancybox-wrap').stop(true).trigger('onReset').remove(); F._afterZoomOut(); } else { F.isOpen = F.isOpened = false; F.isClosing = true; $('.fancybox-item, .fancybox-nav').remove(); F.wrap.stop(true, true).removeClass('fancybox-opened'); F.transitions[ F.current.closeMethod ](); } }, // Manage slideshow: // $.fancybox.play(); - toggle slideshow // $.fancybox.play( true ); - start // $.fancybox.play( false ); - stop play: function ( action ) { var clear = function () { clearTimeout(F.player.timer); }, set = function () { clear(); if (F.current && F.player.isActive) { F.player.timer = setTimeout(F.next, F.current.playSpeed); } }, stop = function () { clear(); D.unbind('.player'); F.player.isActive = false; F.trigger('onPlayEnd'); }, start = function () { if (F.current && (F.current.loop || F.current.index < F.group.length - 1)) { F.player.isActive = true; D.bind({ 'onCancel.player beforeClose.player' : stop, 'onUpdate.player' : set, 'beforeLoad.player' : clear }); set(); F.trigger('onPlayStart'); } }; if (action === true || (!F.player.isActive && action !== false)) { start(); } else { stop(); } }, // Navigate to next gallery item next: function ( direction ) { var current = F.current; if (current) { if (!isString(direction)) { direction = current.direction.next; } F.jumpto(current.index + 1, direction, 'next'); } }, // Navigate to previous gallery item prev: function ( direction ) { var current = F.current; if (current) { if (!isString(direction)) { direction = current.direction.prev; } F.jumpto(current.index - 1, direction, 'prev'); } }, // Navigate to gallery item by index jumpto: function ( index, direction, router ) { var current = F.current; if (!current) { return; } index = getScalar(index); F.direction = direction || current.direction[ (index >= current.index ? 'next' : 'prev') ]; F.router = router || 'jumpto'; if (current.loop) { if (index < 0) { index = current.group.length + (index % current.group.length); } index = index % current.group.length; } if (current.group[ index ] !== undefined) { F.cancel(); F._start(index); } }, // Center inside viewport and toggle position type to fixed or absolute if needed reposition: function (e, onlyAbsolute) { var current = F.current, wrap = current ? current.wrap : null, pos; if (wrap) { pos = F._getPosition(onlyAbsolute); if (e && e.type === 'scroll') { delete pos.position; wrap.stop(true, true).animate(pos, 200); } else { wrap.css(pos); current.pos = $.extend({}, current.dim, pos); } } }, update: function (e) { var type = (e && e.type), anyway = !type || type === 'orientationchange'; if (anyway) { clearTimeout(didUpdate); didUpdate = null; } if (!F.isOpen || didUpdate) { return; } didUpdate = setTimeout(function() { var current = F.current; if (!current || F.isClosing) { return; } F.wrap.removeClass('fancybox-tmp'); if (anyway || type === 'load' || (type === 'resize' && current.autoResize)) { F._setDimension(); } if (!(type === 'scroll' && current.canShrink)) { F.reposition(e); } F.trigger('onUpdate'); didUpdate = null; }, (anyway && !isTouch ? 0 : 300)); }, // Shrink content to fit inside viewport or restore if resized toggle: function ( action ) { if (F.isOpen) { F.current.fitToView = $.type(action) === "boolean" ? action : !F.current.fitToView; // Help browser to restore document dimensions if (isTouch) { F.wrap.removeAttr('style').addClass('fancybox-tmp'); F.trigger('onUpdate'); } F.update(); } }, hideLoading: function () { D.unbind('.loading'); $('#fancybox-loading').remove(); }, showLoading: function () { var el, viewport; F.hideLoading(); el = $('<div id="fancybox-loading"><div></div></div>').click(F.cancel).appendTo('body'); // If user will press the escape-button, the request will be canceled D.bind('keydown.loading', function(e) { if ((e.which || e.keyCode) === 27) { e.preventDefault(); F.cancel(); } }); if (!F.defaults.fixed) { viewport = F.getViewport(); el.css({ position : 'absolute', top : (viewport.h * 0.5) + viewport.y, left : (viewport.w * 0.5) + viewport.x }); } }, getViewport: function () { var locked = (F.current && F.current.locked) || false, rez = { x: W.scrollLeft(), y: W.scrollTop() }; if (locked) { rez.w = locked[0].clientWidth; rez.h = locked[0].clientHeight; } else { // See https://bugs.jquery.com/ticket/6724 rez.w = isTouch && window.innerWidth ? window.innerWidth : W.width(); rez.h = isTouch && window.innerHeight ? window.innerHeight : W.height(); } return rez; }, // Unbind the keyboard / clicking actions unbindEvents: function () { if (F.wrap && isQuery(F.wrap)) { F.wrap.unbind('.fb'); } D.unbind('.fb'); W.unbind('.fb'); }, bindEvents: function () { var current = F.current, keys; if (!current) { return; } // Changing document height on iOS devices triggers a 'resize' event, // that can change document height... repeating infinitely W.bind('orientationchange.fb' + (isTouch ? '' : ' resize.fb') + (current.autoCenter && !current.locked ? ' scroll.fb' : ''), F.update); keys = current.keys; if (keys) { D.bind('keydown.fb', function (e) { var code = e.which || e.keyCode, target = e.target || e.srcElement; // Skip esc key if loading, because showLoading will cancel preloading if (code === 27 && F.coming) { return false; } // Ignore key combinations and key events within form elements if (!e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && !(target && (target.type || $(target).is('[contenteditable]')))) { $.each(keys, function(i, val) { if (current.group.length > 1 && val[ code ] !== undefined) { F[ i ]( val[ code ] ); e.preventDefault(); return false; } if ($.inArray(code, val) > -1) { F[ i ] (); e.preventDefault(); return false; } }); } }); } if ($.fn.mousewheel && current.mouseWheel) { F.wrap.bind('mousewheel.fb', function (e, delta, deltaX, deltaY) { var target = e.target || null, parent = $(target), canScroll = false; while (parent.length) { if (canScroll || parent.is('.fancybox-skin') || parent.is('.fancybox-wrap')) { break; } canScroll = isScrollable( parent[0] ); parent = $(parent).parent(); } if (delta !== 0 && !canScroll) { if (F.group.length > 1 && !current.canShrink) { if (deltaY > 0 || deltaX > 0) { F.prev( deltaY > 0 ? 'down' : 'left' ); } else if (deltaY < 0 || deltaX < 0) { F.next( deltaY < 0 ? 'up' : 'right' ); } e.preventDefault(); } } }); } }, trigger: function (event, o) { var ret, obj = o || F.coming || F.current; if (!obj) { return; } if ($.isFunction( obj[event] )) { ret = obj[event].apply(obj, Array.prototype.slice.call(arguments, 1)); } if (ret === false) { return false; } if (obj.helpers) { $.each(obj.helpers, function (helper, opts) { if (opts && F.helpers[helper] && $.isFunction(F.helpers[helper][event])) { F.helpers[helper][event]($.extend(true, {}, F.helpers[helper].defaults, opts), obj); } }); } D.trigger(event); }, isImage: function (str) { return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i); }, isSWF: function (str) { return isString(str) && str.match(/\.(swf)((\?|#).*)?$/i); }, _start: function (index) { var coming = {}, obj, href, type, margin, padding; index = getScalar( index ); obj = F.group[ index ] || null; if (!obj) { return false; } coming = $.extend(true, {}, F.opts, obj); // Convert margin and padding properties to array - top, right, bottom, left margin = coming.margin; padding = coming.padding; if ($.type(margin) === 'number') { coming.margin = [margin, margin, margin, margin]; } if ($.type(padding) === 'number') { coming.padding = [padding, padding, padding, padding]; } // 'modal' propery is just a shortcut if (coming.modal) { $.extend(true, coming, { closeBtn : false, closeClick : false, nextClick : false, arrows : false, mouseWheel : false, keys : null, helpers: { overlay : { closeClick : false } } }); } // 'autoSize' property is a shortcut, too if (coming.autoSize) { coming.autoWidth = coming.autoHeight = true; } if (coming.width === 'auto') { coming.autoWidth = true; } if (coming.height === 'auto') { coming.autoHeight = true; } /* * Add reference to the group, so it`s possible to access from callbacks, example: * afterLoad : function() { * this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); * } */ coming.group = F.group; coming.index = index; // Give a chance for callback or helpers to update coming item (type, title, etc) F.coming = coming; if (false === F.trigger('beforeLoad')) { F.coming = null; return; } type = coming.type; href = coming.href; if (!type) { F.coming = null; //If we can not determine content type then drop silently or display next/prev item if looping through gallery if (F.current && F.router && F.router !== 'jumpto') { F.current.index = index; return F[ F.router ]( F.direction ); } return false; } F.isActive = true; if (type === 'image' || type === 'swf') { coming.autoHeight = coming.autoWidth = false; coming.scrolling = 'visible'; } if (type === 'image') { coming.aspectRatio = true; } if (type === 'iframe' && isTouch) { coming.scrolling = 'scroll'; } // Build the neccessary markup coming.wrap = $(coming.tpl.wrap).addClass('fancybox-' + (isTouch ? 'mobile' : 'desktop') + ' fancybox-type-' + type + ' fancybox-tmp ' + coming.wrapCSS).appendTo( coming.parent || 'body' ); $.extend(coming, { skin : $('.fancybox-skin', coming.wrap), outer : $('.fancybox-outer', coming.wrap), inner : $('.fancybox-inner', coming.wrap) }); $.each(["Top", "Right", "Bottom", "Left"], function(i, v) { coming.skin.css('padding' + v, getValue(coming.padding[ i ])); }); F.trigger('onReady'); // Check before try to load; 'inline' and 'html' types need content, others - href if (type === 'inline' || type === 'html') { if (!coming.content || !coming.content.length) { return F._error( 'content' ); } } else if (!href) { return F._error( 'href' ); } if (type === 'image') { F._loadImage(); } else if (type === 'ajax') { F._loadAjax(); } else if (type === 'iframe') { F._loadIframe(); } else { F._afterLoad(); } }, _error: function ( type ) { $.extend(F.coming, { type : 'html', autoWidth : true, autoHeight : true, minWidth : 0, minHeight : 0, scrolling : 'no', hasError : type, content : F.coming.tpl.error }); F._afterLoad(); }, _loadImage: function () { // Reset preload image so it is later possible to check "complete" property var img = F.imgPreload = new Image(); img.onload = function () { this.onload = this.onerror = null; F.coming.width = this.width / F.opts.pixelRatio; F.coming.height = this.height / F.opts.pixelRatio; F._afterLoad(); }; img.onerror = function () { this.onload = this.onerror = null; F._error( 'image' ); }; img.src = F.coming.href; if (img.complete !== true) { F.showLoading(); } }, _loadAjax: function () { var coming = F.coming; F.showLoading(); F.ajaxLoad = $.ajax($.extend({}, coming.ajax, { url: coming.href, error: function (jqXHR, textStatus) { if (F.coming && textStatus !== 'abort') { F._error( 'ajax', jqXHR ); } else { F.hideLoading(); } }, success: function (data, textStatus) { if (textStatus === 'success') { coming.content = data; F._afterLoad(); } } })); }, _loadIframe: function() { var coming = F.coming, iframe = $(coming.tpl.iframe.replace(/\{rnd\}/g, new Date().getTime())) .attr('scrolling', isTouch ? 'auto' : coming.iframe.scrolling) .attr('src', coming.href); // This helps IE $(coming.wrap).bind('onReset', function () { try { $(this).find('iframe').hide().attr('src', '//about:blank').end().empty(); } catch (e) {} }); if (coming.iframe.preload) { F.showLoading(); iframe.one('load', function() { $(this).data('ready', 1); // iOS will lose scrolling if we resize if (!isTouch) { $(this).bind('load.fb', F.update); } // Without this trick: // - iframe won't scroll on iOS devices // - IE7 sometimes displays empty iframe $(this).parents('.fancybox-wrap').width('100%').removeClass('fancybox-tmp').show(); F._afterLoad(); }); } coming.content = iframe.appendTo( coming.inner ); if (!coming.iframe.preload) { F._afterLoad(); } }, _preloadImages: function() { var group = F.group, current = F.current, len = group.length, cnt = current.preload ? Math.min(current.preload, len - 1) : 0, item, i; for (i = 1; i <= cnt; i += 1) { item = group[ (current.index + i ) % len ]; if (item.type === 'image' && item.href) { new Image().src = item.href; } } }, _afterLoad: function () { var coming = F.coming, previous = F.current, placeholder = 'fancybox-placeholder', current, content, type, scrolling, href, embed; F.hideLoading(); if (!coming || F.isActive === false) { return; } if (false === F.trigger('afterLoad', coming, previous)) { coming.wrap.stop(true).trigger('onReset').remove(); F.coming = null; return; } if (previous) { F.trigger('beforeChange', previous); previous.wrap.stop(true).removeClass('fancybox-opened') .find('.fancybox-item, .fancybox-nav') .remove(); } F.unbindEvents(); current = coming; content = coming.content; type = coming.type; scrolling = coming.scrolling; $.extend(F, { wrap : current.wrap, skin : current.skin, outer : current.outer, inner : current.inner, current : current, previous : previous }); href = current.href; switch (type) { case 'inline': case 'ajax': case 'html': if (current.selector) { content = $('<div>').html(content).find(current.selector); } else if (isQuery(content)) { if (!content.data(placeholder)) { content.data(placeholder, $('<div class="' + placeholder + '"></div>').insertAfter( content ).hide() ); } content = content.show().detach(); current.wrap.bind('onReset', function () { if ($(this).find(content).length) { content.hide().replaceAll( content.data(placeholder) ).data(placeholder, false); } }); } break; case 'image': content = current.tpl.image.replace('{href}', href); break; case 'swf': content = '<object id="fancybox-swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="movie" value="' + href + '"></param>'; embed = ''; $.each(current.swf, function(name, val) { content += '<param name="' + name + '" value="' + val + '"></param>'; embed += ' ' + name + '="' + val + '"'; }); content += '<embed src="' + href + '" type="application/x-shockwave-flash" width="100%" height="100%"' + embed + '></embed></object>'; break; } if (!(isQuery(content) && content.parent().is(current.inner))) { current.inner.append( content ); } // Give a chance for helpers or callbacks to update elements F.trigger('beforeShow'); // Set scrolling before calculating dimensions current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling)); // Set initial dimensions and start position F._setDimension(); F.reposition(); F.isOpen = false; F.coming = null; F.bindEvents(); if (!F.isOpened) { $('.fancybox-wrap').not( current.wrap ).stop(true).trigger('onReset').remove(); } else if (previous.prevMethod) { F.transitions[ previous.prevMethod ](); } F.transitions[ F.isOpened ? current.nextMethod : current.openMethod ](); F._preloadImages(); }, _setDimension: function () { var viewport = F.getViewport(), steps = 0, canShrink = false, canExpand = false, wrap = F.wrap, skin = F.skin, inner = F.inner, current = F.current, width = current.width, height = current.height, minWidth = current.minWidth, minHeight = current.minHeight, maxWidth = current.maxWidth, maxHeight = current.maxHeight, scrolling = current.scrolling, scrollOut = current.scrollOutside ? current.scrollbarWidth : 0, margin = current.margin, wMargin = getScalar(margin[1] + margin[3]), hMargin = getScalar(margin[0] + margin[2]), wPadding, hPadding, wSpace, hSpace, origWidth, origHeight, origMaxWidth, origMaxHeight, ratio, width_, height_, maxWidth_, maxHeight_, iframe, body; // Reset dimensions so we could re-check actual size wrap.add(skin).add(inner).width('auto').height('auto').removeClass('fancybox-tmp'); wPadding = getScalar(skin.outerWidth(true) - skin.width()); hPadding = getScalar(skin.outerHeight(true) - skin.height()); // Any space between content and viewport (margin, padding, border, title) wSpace = wMargin + wPadding; hSpace = hMargin + hPadding; origWidth = isPercentage(width) ? (viewport.w - wSpace) * getScalar(width) / 100 : width; origHeight = isPercentage(height) ? (viewport.h - hSpace) * getScalar(height) / 100 : height; if (current.type === 'iframe') { iframe = current.content; if (current.autoHeight && iframe.data('ready') === 1) { try { if (iframe[0].contentWindow.document.location) { inner.width( origWidth ).height(9999); body = iframe.contents().find('body'); if (scrollOut) { body.css('overflow-x', 'hidden'); } origHeight = body.outerHeight(true); } } catch (e) {} } } else if (current.autoWidth || current.autoHeight) { inner.addClass( 'fancybox-tmp' ); // Set width or height in case we need to calculate only one dimension if (!current.autoWidth) { inner.width( origWidth ); } if (!current.autoHeight) { inner.height( origHeight ); } if (current.autoWidth) { origWidth = inner.width(); } if (current.autoHeight) { origHeight = inner.height(); } inner.removeClass( 'fancybox-tmp' ); } width = getScalar( origWidth ); height = getScalar( origHeight ); ratio = origWidth / origHeight; // Calculations for the content minWidth = getScalar(isPercentage(minWidth) ? getScalar(minWidth, 'w') - wSpace : minWidth); maxWidth = getScalar(isPercentage(maxWidth) ? getScalar(maxWidth, 'w') - wSpace : maxWidth); minHeight = getScalar(isPercentage(minHeight) ? getScalar(minHeight, 'h') - hSpace : minHeight); maxHeight = getScalar(isPercentage(maxHeight) ? getScalar(maxHeight, 'h') - hSpace : maxHeight); // These will be used to determine if wrap can fit in the viewport origMaxWidth = maxWidth; origMaxHeight = maxHeight; if (current.fitToView) { maxWidth = Math.min(viewport.w - wSpace, maxWidth); maxHeight = Math.min(viewport.h - hSpace, maxHeight); } maxWidth_ = viewport.w - wMargin; maxHeight_ = viewport.h - hMargin; if (current.aspectRatio) { if (width > maxWidth) { width = maxWidth; height = getScalar(width / ratio); } if (height > maxHeight) { height = maxHeight; width = getScalar(height * ratio); } if (width < minWidth) { width = minWidth; height = getScalar(width / ratio); } if (height < minHeight) { height = minHeight; width = getScalar(height * ratio); } } else { width = Math.max(minWidth, Math.min(width, maxWidth)); if (current.autoHeight && current.type !== 'iframe') { inner.width( width ); height = inner.height(); } height = Math.max(minHeight, Math.min(height, maxHeight)); } // Try to fit inside viewport (including the title) if (current.fitToView) { inner.width( width ).height( height ); wrap.width( width + wPadding ); // Real wrap dimensions width_ = wrap.width(); height_ = wrap.height(); if (current.aspectRatio) { while ((width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight) { if (steps++ > 19) { break; } height = Math.max(minHeight, Math.min(maxHeight, height - 10)); width = getScalar(height * ratio); if (width < minWidth) { width = minWidth; height = getScalar(width / ratio); } if (width > maxWidth) { width = maxWidth; height = getScalar(width / ratio); } inner.width( width ).height( height ); wrap.width( width + wPadding ); width_ = wrap.width(); height_ = wrap.height(); } } else { width = Math.max(minWidth, Math.min(width, width - (width_ - maxWidth_))); height = Math.max(minHeight, Math.min(height, height - (height_ - maxHeight_))); } } if (scrollOut && scrolling === 'auto' && height < origHeight && (width + wPadding + scrollOut) < maxWidth_) { width += scrollOut; } inner.width( width ).height( height ); wrap.width( width + wPadding ); width_ = wrap.width(); height_ = wrap.height(); canShrink = (width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight; canExpand = current.aspectRatio ? (width < origMaxWidth && height < origMaxHeight && width < origWidth && height < origHeight) : ((width < origMaxWidth || height < origMaxHeight) && (width < origWidth || height < origHeight)); $.extend(current, { dim : { width : getValue( width_ ), height : getValue( height_ ) }, origWidth : origWidth, origHeight : origHeight, canShrink : canShrink, canExpand : canExpand, wPadding : wPadding, hPadding : hPadding, wrapSpace : height_ - skin.outerHeight(true), skinSpace : skin.height() - height }); if (!iframe && current.autoHeight && height > minHeight && height < maxHeight && !canExpand) { inner.height('auto'); } }, _getPosition: function (onlyAbsolute) { var current = F.current, viewport = F.getViewport(), margin = current.margin, width = F.wrap.width() + margin[1] + margin[3], height = F.wrap.height() + margin[0] + margin[2], rez = { position: 'absolute', top : margin[0], left : margin[3] }; if (current.autoCenter && current.fixed && !onlyAbsolute && height <= viewport.h && width <= viewport.w) { rez.position = 'fixed'; } else if (!current.locked) { rez.top += viewport.y; rez.left += viewport.x; } rez.top = getValue(Math.max(rez.top, rez.top + ((viewport.h - height) * current.topRatio))); rez.left = getValue(Math.max(rez.left, rez.left + ((viewport.w - width) * current.leftRatio))); return rez; }, _afterZoomIn: function () { var current = F.current; if (!current) { return; } F.isOpen = F.isOpened = true; F.wrap.css('overflow', 'visible').addClass('fancybox-opened'); F.update(); // Assign a click event if ( current.closeClick || (current.nextClick && F.group.length > 1) ) { F.inner.css('cursor', 'pointer').bind('click.fb', function(e) { if (!$(e.target).is('a') && !$(e.target).parent().is('a')) { e.preventDefault(); F[ current.closeClick ? 'close' : 'next' ](); } }); } // Create a close button if (current.closeBtn) { $(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', function(e) { e.preventDefault(); F.close(); }); } // Create navigation arrows if (current.arrows && F.group.length > 1) { if (current.loop || current.index > 0) { $(current.tpl.prev).appendTo(F.outer).bind('click.fb', F.prev); } if (current.loop || current.index < F.group.length - 1) { $(current.tpl.next).appendTo(F.outer).bind('click.fb', F.next); } } F.trigger('afterShow'); // Stop the slideshow if this is the last item if (!current.loop && current.index === current.group.length - 1) { F.play( false ); } else if (F.opts.autoPlay && !F.player.isActive) { F.opts.autoPlay = false; F.play(); } }, _afterZoomOut: function ( obj ) { obj = obj || F.current; $('.fancybox-wrap').trigger('onReset').remove(); $.extend(F, { group : {}, opts : {}, router : false, current : null, isActive : false, isOpened : false, isOpen : false, isClosing : false, wrap : null, skin : null, outer : null, inner : null }); F.trigger('afterClose', obj); } }); /* * Default transitions */ F.transitions = { getOrigPosition: function () { var current = F.current, element = current.element, orig = current.orig, pos = {}, width = 50, height = 50, hPadding = current.hPadding, wPadding = current.wPadding, viewport = F.getViewport(); if (!orig && current.isDom && element.is(':visible')) { orig = element.find('img:first'); if (!orig.length) { orig = element; } } if (isQuery(orig)) { pos = orig.offset(); if (orig.is('img')) { width = orig.outerWidth(); height = orig.outerHeight(); } } else { pos.top = viewport.y + (viewport.h - height) * current.topRatio; pos.left = viewport.x + (viewport.w - width) * current.leftRatio; } if (F.wrap.css('position') === 'fixed' || current.locked) { pos.top -= viewport.y; pos.left -= viewport.x; } pos = { top : getValue(pos.top - hPadding * current.topRatio), left : getValue(pos.left - wPadding * current.leftRatio), width : getValue(width + wPadding), height : getValue(height + hPadding) }; return pos; }, step: function (now, fx) { var ratio, padding, value, prop = fx.prop, current = F.current, wrapSpace = current.wrapSpace, skinSpace = current.skinSpace; if (prop === 'width' || prop === 'height') { ratio = fx.end === fx.start ? 1 : (now - fx.start) / (fx.end - fx.start); if (F.isClosing) { ratio = 1 - ratio; } padding = prop === 'width' ? current.wPadding : current.hPadding; value = now - padding; F.skin[ prop ]( getScalar( prop === 'width' ? value : value - (wrapSpace * ratio) ) ); F.inner[ prop ]( getScalar( prop === 'width' ? value : value - (wrapSpace * ratio) - (skinSpace * ratio) ) ); } }, zoomIn: function () { var current = F.current, startPos = current.pos, effect = current.openEffect, elastic = effect === 'elastic', endPos = $.extend({opacity : 1}, startPos); // Remove "position" property that breaks older IE delete endPos.position; if (elastic) { startPos = this.getOrigPosition(); if (current.openOpacity) { startPos.opacity = 0.1; } } else if (effect === 'fade') { startPos.opacity = 0.1; } F.wrap.css(startPos).animate(endPos, { duration : effect === 'none' ? 0 : current.openSpeed, easing : current.openEasing, step : elastic ? this.step : null, complete : F._afterZoomIn }); }, zoomOut: function () { var current = F.current, effect = current.closeEffect, elastic = effect === 'elastic', endPos = {opacity : 0.1}; if (elastic) { endPos = this.getOrigPosition(); if (current.closeOpacity) { endPos.opacity = 0.1; } } F.wrap.animate(endPos, { duration : effect === 'none' ? 0 : current.closeSpeed, easing : current.closeEasing, step : elastic ? this.step : null, complete : F._afterZoomOut }); }, changeIn: function () { var current = F.current, effect = current.nextEffect, startPos = current.pos, endPos = { opacity : 1 }, direction = F.direction, distance = 200, field; startPos.opacity = 0.1; if (effect === 'elastic') { field = direction === 'down' || direction === 'up' ? 'top' : 'left'; if (direction === 'down' || direction === 'right') { startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance); endPos[ field ] = '+=' + distance + 'px'; } else { startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance); endPos[ field ] = '-=' + distance + 'px'; } } // Workaround for https://bugs.jquery.com/ticket/12273 if (effect === 'none') { F._afterZoomIn(); } else { F.wrap.css(startPos).animate(endPos, { duration : current.nextSpeed, easing : current.nextEasing, complete : F._afterZoomIn }); } }, changeOut: function () { var previous = F.previous, effect = previous.prevEffect, endPos = { opacity : 0.1 }, direction = F.direction, distance = 200; if (effect === 'elastic') { endPos[ direction === 'down' || direction === 'up' ? 'top' : 'left' ] = ( direction === 'up' || direction === 'left' ? '-' : '+' ) + '=' + distance + 'px'; } previous.wrap.animate(endPos, { duration : effect === 'none' ? 0 : previous.prevSpeed, easing : previous.prevEasing, complete : function () { $(this).trigger('onReset').remove(); } }); } }; /* * Overlay helper */ F.helpers.overlay = { defaults : { closeClick : true, // if true, fancyBox will be closed when user clicks on the overlay speedOut : 200, // duration of fadeOut animation showEarly : true, // indicates if should be opened immediately or wait until the content is ready css : {}, // custom CSS properties locked : !isTouch, // if true, the content will be locked into overlay fixed : true // if false, the overlay CSS position property will not be set to "fixed" }, overlay : null, // current handle fixed : false, // indicates if the overlay has position "fixed" el : $('html'), // element that contains "the lock" // Public methods create : function(opts) { opts = $.extend({}, this.defaults, opts); if (this.overlay) { this.close(); } this.overlay = $('<div class="fancybox-overlay"></div>').appendTo( F.coming ? F.coming.parent : opts.parent ); this.fixed = false; if (opts.fixed && F.defaults.fixed) { this.overlay.addClass('fancybox-overlay-fixed'); this.fixed = true; } }, open : function(opts) { var that = this; opts = $.extend({}, this.defaults, opts); if (this.overlay) { this.overlay.unbind('.overlay').width('auto').height('auto'); } else { this.create(opts); } if (!this.fixed) { W.bind('resize.overlay', $.proxy( this.update, this) ); this.update(); } if (opts.closeClick) { this.overlay.bind('click.overlay', function(e) { if ($(e.target).hasClass('fancybox-overlay')) { if (F.isActive) { F.close(); } else { that.close(); } return false; } }); } this.overlay.css( opts.css ).show(); }, close : function() { var scrollV, scrollH; W.unbind('resize.overlay'); if (this.el.hasClass('fancybox-lock')) { $('.fancybox-margin').removeClass('fancybox-margin'); scrollV = W.scrollTop(); scrollH = W.scrollLeft(); this.el.removeClass('fancybox-lock'); W.scrollTop( scrollV ).scrollLeft( scrollH ); } $('.fancybox-overlay').remove().hide(); $.extend(this, { overlay : null, fixed : false }); }, // Private, callbacks update : function () { var width = '100%', offsetWidth; // Reset width/height so it will not mess this.overlay.width(width).height('100%'); // jQuery does not return reliable result for IE if (IE) { offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth); if (D.width() > offsetWidth) { width = D.width(); } } else if (D.width() > W.width()) { width = D.width(); } this.overlay.width(width).height(D.height()); }, // This is where we can manipulate DOM, because later it would cause iframes to reload onReady : function (opts, obj) { var overlay = this.overlay; $('.fancybox-overlay').stop(true, true); if (!overlay) { this.create(opts); } if (opts.locked && this.fixed && obj.fixed) { if (!overlay) { this.margin = D.height() > W.height() ? $('html').css('margin-right').replace("px", "") : false; } obj.locked = this.overlay.append( obj.wrap ); obj.fixed = false; } if (opts.showEarly === true) { this.beforeShow.apply(this, arguments); } }, beforeShow : function(opts, obj) { var scrollV, scrollH; if (obj.locked) { if (this.margin !== false) { $('*').filter(function(){ return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") ); }).addClass('fancybox-margin'); this.el.addClass('fancybox-margin'); } scrollV = W.scrollTop(); scrollH = W.scrollLeft(); this.el.addClass('fancybox-lock'); W.scrollTop( scrollV ).scrollLeft( scrollH ); } this.open(opts); }, onUpdate : function() { if (!this.fixed) { this.update(); } }, afterClose: function (opts) { // Remove overlay if exists and fancyBox is not opening // (e.g., it is not being open using afterClose callback) //if (this.overlay && !F.isActive) { if (this.overlay && !F.coming) { this.overlay.fadeOut(opts.speedOut, $.proxy( this.close, this )); } } }; /* * Title helper */ F.helpers.title = { defaults : { type : 'float', // 'float', 'inside', 'outside' or 'over', position : 'bottom' // 'top' or 'bottom' }, beforeShow: function (opts) { var current = F.current, text = current.title, type = opts.type, title, target; if ($.isFunction(text)) { text = text.call(current.element, current); } if (!isString(text) || $.trim(text) === '') { return; } title = $('<div class="fancybox-title fancybox-title-' + type + '-wrap">' + text + '</div>'); switch (type) { case 'inside': target = F.skin; break; case 'outside': target = F.wrap; break; case 'over': target = F.inner; break; default: // 'float' target = F.skin; title.appendTo('body'); if (IE) { title.width( title.width() ); } title.wrapInner('<span class="child"></span>'); //Increase bottom margin so this title will also fit into viewport F.current.margin[2] += Math.abs( getScalar(title.css('margin-bottom')) ); break; } title[ (opts.position === 'top' ? 'prependTo' : 'appendTo') ](target); } }; // jQuery plugin initialization $.fn.fancybox = function (options) { var index, that = $(this), selector = this.selector || '', run = function(e) { var what = $(this).blur(), idx = index, relType, relVal; if (!(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) && !what.is('.fancybox-wrap')) { relType = options.groupAttr || 'data-fancybox-group'; relVal = what.attr(relType); if (!relVal) { relType = 'rel'; relVal = what.get(0)[ relType ]; } if (relVal && relVal !== '' && relVal !== 'nofollow') { what = selector.length ? $(selector) : that; what = what.filter('[' + relType + '="' + relVal + '"]'); idx = what.index(this); } options.index = idx; // Stop an event from bubbling if everything is fine if (F.open(what, options) !== false) { e.preventDefault(); } } }; options = options || {}; index = options.index || 0; if (!selector || options.live === false) { that.unbind('click.fb-start').bind('click.fb-start', run); } else { D.undelegate(selector, 'click.fb-start').delegate(selector + ":not('.fancybox-item, .fancybox-nav')", 'click.fb-start', run); } this.filter('[data-fancybox-start=1]').trigger('click'); return this; }; // Tests that need a body at doc ready D.ready(function() { var w1, w2; if ( $.scrollbarWidth === undefined ) { // http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth $.scrollbarWidth = function() { var parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body'), child = parent.children(), width = child.innerWidth() - child.height( 99 ).innerWidth(); parent.remove(); return width; }; } if ( $.support.fixedPosition === undefined ) { $.support.fixedPosition = (function() { var elem = $('<div style="position:fixed;top:20px;"></div>').appendTo('body'), fixed = ( elem[0].offsetTop === 20 || elem[0].offsetTop === 15 ); elem.remove(); return fixed; }()); } $.extend(F.defaults, { scrollbarWidth : $.scrollbarWidth(), fixed : $.support.fixedPosition, parent : $('body') }); //Get real width of page scroll-bar w1 = $(window).width(); H.addClass('fancybox-lock-test'); w2 = $(window).width(); H.removeClass('fancybox-lock-test'); $("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head"); });
}(window, document, jQuery));
Developer | Nugroho Indra Utomo |
Username | indra_z85 |
Uploaded | October 16, 2022 |
Rating | 3 |
Size | 19,982 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Jquery effect | 2,139 Kb |
Task | 5,383 Kb |
Meiji | 8,051 Kb |
Js form | 1,753 Kb |
Slider hover | 2,000 Kb |
Responsive2 | 7,059 Kb |
Javascript only | 2,016 Kb |
A Pen by nugroho indra utomo | 7,925 Kb |
Track2 | 10,828 Kb |
Club t | 8,583 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
Css3 slide | Nakome | 3,190 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Sass Radar | Jlong | 6,887 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Z-index demo | Kblh | 1,534 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!