Fancy box effect

Size
19,982 Kb
Views
22,264

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 Previews

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 &amp; Articles">Tips &amp; 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&reg;</a></dd>	<dd><a href="" title="Kiranti">Kiranti&reg;</a></dd>	<dd><a href="" title="Wafer Tango">Wafer Tango&reg;</a></dd>	<dd><a href="" title="Formula Oral Care">Formula Oral Care&reg;</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 &copy; 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));
Fancy box effect - Script Codes
Fancy box effect - Script Codes
Home Page Home
Developer Nugroho Indra Utomo
Username indra_z85
Uploaded October 16, 2022
Rating 3
Size 19,982 Kb
Views 22,264
Do you need developer help for Fancy box effect?

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!

Nugroho Indra Utomo (indra_z85) Script Codes
Name
Jquery effect
Task
Meiji
Js form
Slider hover
Responsive2
Javascript only
A Pen by nugroho indra utomo
Track2
Club t
Create amazing Facebook ads with AI!

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!