<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Simple Bootstrap Product Zoom Box - <small><em>by</em></small> <a href="https://www.facebook.com/SOJITRAHIREN">Hiren Sojitra</a></h2>
</div>
<div class="">
<ul id="glasscase" class="gc-start">
<li><img src="http://www.pngall.com/wp-content/uploads/2016/03/Smartphone-Transparent.png" alt="Text" data-gc-caption="Your caption text" /></li>
<li><img src="https://amanandandroid.files.wordpress.com/2013/01/samsung_galaxy_s_ii_plus.png" alt="Text" /></li>
</ul>
</div><a href="http://tinycomp.net/products/glasscase-jquery-product-image-zoom-plugin/examples.aspx">For More Guide</a>
</div>
<script type="text/javascript">
$(document).ready( function () {
//If your <ul> has the id "glasscase"
$('#glasscase').glassCase({ 'thumbsPosition': 'bottom', 'widthDisplay' : 560});
});
</script>
.glass-case * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
padding: 0;
margin: 0;
border: 0;
}
.glass-case *:before, .glass-case *:after {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.glass-case {
position: relative;
}
/*********************DISPLAY***************************/
.gc-display-area {
position: absolute;
overflow: hidden;
border: 2px solid #F5F5F5;
padding: 2px;
background-color: #fff;
}
.gc-display-container {
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.gc-display-display {
position: relative;
height: 100%;
width: 100%;
max-height: 100%;
max-width: 100%;
cursor: crosshair;
opacity: 1;
}
/*********************LENS***************************/
.gc-lens {
position: absolute;
overflow: hidden;
z-index: 1000;
cursor: crosshair;
background: #CECECE;
opacity: .5 !important; /* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */
filter: alpha(opacity=50) !important; /* Netscape */
-moz-opacity: 0.5; /* Safari 1.x */
-khtml-opacity: 0.5;
}
/*********************ZOOM***************************/
.gc-zoom {
position: absolute;
/overflow: hidden;
width: 100%;
height: auto;
z-index: 1040 !important;
border: 2px solid #f5f5f5;
padding: 2px;
background-color: #fff;
}
.gc-zoom-inner {
cursor: crosshair;
border: 0 !important;
left: -2px !important;
top: -2px !important;
margin: 0 !important;
z-index: 1010 !important;
}
.gc-zoom-container {
position: relative;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.gc-zoom-container img {
position: relative;
max-width: none !important;
}
/*********************CAPTION**********************/
.gc-caption-container {
position: absolute;
overflow: hidden;
width: 100%;
padding: 2px;
z-index: 1050 !important;
background-color: rgba(255, 255, 255, 0.5);
line-height: 1.6;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #333;
font-size: 0.9em;
}
.gc-caption-container div {
position: relative;
padding: 0 12px 0 12px;
}
.gc-caption-intop {
left: 0;
top: 0;
}
.gc-caption-inbottom {
left: 0;
bottom: 0;
}
.gc-caption-outtop, .gc-caption-outbottom {
width: 100%;
width: calc(100% + 4px);
border: 2px solid #f5f5f5;
background: #fff;
}
.gc-caption-outtop {
top: 0;
left: -2px;
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
-o-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.gc-caption-outbottom {
bottom: 0;
left: -2px;
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.gc-alignment-center {
text-align: center;
}
.gc-alignment-left {
text-align: left;
}
.gc-alignment-right {
text-align: right;
}
/*********************UL***************************/
.gc-thumbs-area {
position: absolute;
overflow: hidden;
background-color: transparent;
}
.gc-thumbs-area-prev, .gc-thumbs-area-next {
position: absolute;
z-index: 1010;
}
.gc-thumbs-area.gc-hz .gc-thumbs-area-prev, .gc-thumbs-area.gc-hz .gc-thumbs-area-next {
top: 0;
height: 100%;
min-height: 100%;
width: 5%;
}
.gc-thumbs-area.gc-vt .gc-thumbs-area-prev, .gc-thumbs-area.gc-vt .gc-thumbs-area-next {
left: 0;
width: 100%;
min-width: 100%;
height: 5%;
}
.gc-thumbs-area.gc-hz .gc-thumbs-area-prev {
left: 0;
}
.gc-thumbs-area.gc-hz .gc-thumbs-area-next {
right: 0;
}
.gc-thumbs-area.gc-vt .gc-thumbs-area-prev {
top: 0;
}
.gc-thumbs-area.gc-vt .gc-thumbs-area-next {
bottom: 0;
}
.gc-thumbs-area-prev:hover, .gc-thumbs-area-next:hover {
opacity: 1;
cursor: pointer;
cursor: hand;
}
.gc-thumbs-area-prev .gc-disabled, .gc-thumbs-area-next .gc-disabled, .gc-thumbs-area-prev .gc-disabled:hover, .gc-thumbs-area-next .gc-disabled:hover {
opacity: .3; /* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE 5-7 */
filter: alpha(opacity=30); /* Netscape */
-moz-opacity: 0.3; /* Safari 1.x */
-khtml-opacity: 0.3;
cursor: default;
}
.glass-case ul {
position: relative;
top: 0;
left: 0;
margin: 0;
border: 0;
padding: 0;
height: 100%;
list-style: none;
}
.glass-case ul li {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
border: 2px solid #f5f5f5;
padding: 2px;
background-color: #fff;
}
.gc-thumbs-area.gc-hz li {
display: inline;
float: left;
max-width: 100%;
max-height: 100%;
margin-right: 5px;
}
.gc-thumbs-area.gc-vt li {
margin-bottom: 5px;
}
.glass-case ul li .gc-li-display-container {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
display: inline-block;
}
.glass-case ul li:hover {
border-color: #4f4f4f;
cursor: pointer;
cursor: hand;
}
.glass-case ul li.gc-active, .glass-case ul li.gc-active:hover {
border-color: #669966;
cursor: default;
}
.glass-case ul li .gc-li-display-container img {
position: relative;
top: 50%;
left: 50%;
}
/*********************OVERLAY***************************/
.gc-overlay-area {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2147483647 !important;
background-color: rgb(204, 204, 204); /*the falback for ie7, ie8*/
background-color: rgba(51, 51, 51, 0.95);
}
.gc-overlay-gcontainer {
position: relative;
width: 100%;
height: 100%;
padding: 0;
}
.gc-overlay-container {
position: relative;
overflow: auto;
width: 100%;
height: 100%;
padding: 0;
}
.gc-overlay-container-display {
position: absolute;
overflow: auto;
width: 100%;
height: 100%;
padding: 0;
}
.gc-ocd-top {
top: 0;
}
.gc-ocd-bottom {
bottom: 0;
}
.gc-overlay-fit {
padding: 4em 5.5em 1em 5.5em;
overflow: hidden;
}
.gc-overlay-display {
position: relative;
top: 0;
left: 0;
display: block;
cursor: crosshair;
}
.gc-overlay-display-center {
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.gc-overlay-display-vcenter {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.gc-overlay-display-hcenter {
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.gc-overlay-top-icons {
position: absolute;
top: 0;
padding: 1em 1.5em 1em 0;
width: 100%;
height: 4em;
}
.gc-overlay-left-icons {
position: absolute;
height: 100%;
top: 0;
left: 0;
padding: 0 1em 0 1.5em;
height: 100%;
width: 5.5em;
}
.gc-overlay-right-icons {
position: absolute;
top: 0;
right: 0;
padding: 0 1.5em 0 1em;
height: 100%;
width: 5.5em;
}
/*********************ICONS***************************/
@charset "UTF-8";
@font-face {
font-family: "linea-arrows-10";
src: url("../fonts/linea-arrows-10.eot");
src: url("../fonts/linea-arrows-10.eot?#iefix") format("embedded-opentype"), url("../fonts/linea-arrows-10.woff") format("woff"), url("../fonts/linea-arrows-10.ttf") format("truetype"), url("../fonts/linea-arrows-10.svg#linea-arrows-10") format("svg");
font-weight: normal;
font-style: normal;
}
.gc-icon:before {
line-height: 1;
}
.gc-icon {
font-family: "linea-arrows-10" !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
z-index: 1020;
cursor: pointer;
cursor: hand;
color: #fff;
opacity: .7; /* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 5-7 */
filter: alpha(opacity=70); /* Netscape */
-moz-opacity: 0.7; /* Safari 1.x */
-khtml-opacity: 0.7;
height: 1em;
width: 1em;
line-height: 0;
background: rgb(204, 204, 204);
background: rgba(204, 204, 204, 0.5);
border: 2px solid #F5F5F5;
}
.gc-icon:hover {
opacity: 1; /* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 5-7 */
filter: alpha(opacity=100); /* Netscape */
-moz-opacity: 1; /* Safari 1.x */
-khtml-opacity: 1;
}
.gc-disabled .gc-icon:hover, .gc-disabled .gc-icon:hover, .gc-disabled .gc-icon, .gc-disabled .gc-icon {
opacity: .3; /* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /* IE 5-7 */
filter: alpha(opacity=30); /* Netscape */
-moz-opacity: 0.3; /* Safari 1.x */
-khtml-opacity: 0.3;
cursor: default;
}
/* *** ICON NEXT *** */
.gc-icon-next {
top: 50%;
right: -2px;
}
.gc-icon-next:before {
position: absolute;
top: -2px;
right: -2px;
content: "\e04b";
}
.gc-icon-next-vt {
bottom: 0;
left: 50%;
}
.gc-icon-next-vt:before {
position: absolute;
top: -2px;
left: -2px;
content: "\e019";
}
.gc-display-area .gc-icon-next {
font-size: 2em !important;
}
.gc-thumbs-area-next .gc-icon-next {
right: 0;
font-size: 2em !important;
}
.gc-thumbs-area-next .gc-icon-next-vt {
font-size: 1.5em !important;
}
.gc-overlay-area .gc-icon-next {
position: relative;
right: 0;
font-size: 3em;
}
/* *** ICON PREV *** */
.gc-icon-prev {
top: 50%;
left: -2px;
}
.gc-icon-prev:before {
position: absolute;
top: -2px;
left: -2px;
content: "\e03f";
}
.gc-icon-prev-vt {
top: 0;
left: 50%;
}
.gc-icon-prev-vt:before {
position: absolute;
top: -2px;
left: -2px;
content: "\e083";
}
.gc-display-area .gc-icon-prev {
font-size: 2em !important;
}
.gc-thumbs-area-prev .gc-icon-prev {
font-size: 2em !important;
}
.gc-thumbs-area-prev .gc-icon-prev-vt {
font-size: 1.5em !important;
}
.gc-overlay-area .gc-icon-prev {
position: relative;
left: 0;
font-size: 3em;
}
/* *** ICON DOWNLOAD *** */
.gc-icon-download {
right: -2px;
bottom: 0;
font-size: 2em;
overflow: hidden;
}
.gc-icon-download:before {
position: absolute;
top: -4px;
left: -2px;
content: "\e064";
}
/* *** ICON CLOSE *** */
.gc-icon-close {
position: relative;
font-size: 2em;
float: right;
}
.gc-icon-close:before {
position: absolute;
content: "\e04a";
top: -2px;
right: -2px;
}
.gc-icon-enlarge {
position: relative;
float: right;
margin-right: 0.25em;
font-size: 2em;
}
.gc-icon-enlarge:before {
position: absolute;
content: '\e017';
top: -2px;
right: -2px;
}
.gc-icon-compress {
position: relative;
float: right;
margin-right: 0.25em;
font-size: 2em;
}
.gc-icon-compress:before {
position: absolute;
content: '\e053';
top: -2px;
right: -2px;
}
/*********************LOADING***************************/
.gc-loading {
position: absolute;
top: 50%;
left: 50%;
width: 31px;
height: 31px;
margin-left: -15px;
margin-top: -15px;
background-image: url(../images/loader.gif);
}
.gc-loading3 {
position: absolute;
top: 50%;
left: 50%;
margin-left: -15px;
margin-top: -15px;
font-size: 0.25em;
text-indent: -9999em;
border-top: 1.1em solid rgba(102, 153, 102, 0.2);
border-right: 1.1em solid rgba(102, 153, 102, 0.2);
border-bottom: 1.1em solid rgba(102, 153, 102, 0.2);
border-left: 1.1em solid #669966;
-webkit-animation: loadGC 1.1s infinite linear;
animation: loadGC 1.1s infinite linear;
}
.gc-loading3,
.gc-loading3:after {
border-radius: 50%;
width: 30px;
height: 30px;
}
@-webkit-keyframes loadGC {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loadGC {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*********************GENERAL***************************/
.gc-hide {
display: none;
z-index: 0;
opacity: 0; /* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */
filter: alpha(opacity=0); /* Netscape */
-moz-opacity: 0; /* Safari 1.x */
-khtml-opacity: 0;
}
.gc-noscroll {
overflow: hidden;
}
.gc-start {
display: none;
z-index: 0;
opacity: 0; /* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */
filter: alpha(opacity=0); /* Netscape */
-moz-opacity: 0; /* Safari 1.x */
-khtml-opacity: 0;
}
/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-flexboxlegacy-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
*/
; window.Modernizr = function (a, b, c) { function C(a) { j.cssText = a } function D(a, b) { return C(n.join(a + ";") + (b || "")) } function E(a, b) { return typeof a === b } function F(a, b) { return !! ~("" + a).indexOf(b) } function G(a, b) { for (var d in a) { var e = a[d]; if (!F(e, "-") && j[e] !== c) return b == "pfx" ? e : !0 } return !1 } function H(a, b, d) { for (var e in a) { var f = b[a[e]]; if (f !== c) return d === !1 ? a[e] : E(f, "function") ? f.bind(d || b) : f } return !1 } function I(a, b, c) { var d = a.charAt(0).toUpperCase() + a.slice(1), e = (a + " " + p.join(d + " ") + d).split(" "); return E(b, "string") || E(b, "undefined") ? G(e, b) : (e = (a + " " + q.join(d + " ") + d).split(" "), H(e, b, c)) } function J() { e.input = function (c) { for (var d = 0, e = c.length; d < e; d++) u[c[d]] = c[d] in k; return u.list && (u.list = !!b.createElement("datalist") && !!a.HTMLDataListElement), u } ("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")), e.inputtypes = function (a) { for (var d = 0, e, f, h, i = a.length; d < i; d++) k.setAttribute("type", f = a[d]), e = k.type !== "text", e && (k.value = l, k.style.cssText = "position:absolute;visibility:hidden;", /^range$/.test(f) && k.style.WebkitAppearance !== c ? (g.appendChild(k), h = b.defaultView, e = h.getComputedStyle && h.getComputedStyle(k, null).WebkitAppearance !== "textfield" && k.offsetHeight !== 0, g.removeChild(k)) : /^(search|tel)$/.test(f) || (/^(url|email)$/.test(f) ? e = k.checkValidity && k.checkValidity() === !1 : e = k.value != l)), t[a[d]] = !!e; return t } ("search tel url email datetime date month week time datetime-local number range color".split(" ")) } var d = "2.8.3", e = {}, f = !0, g = b.documentElement, h = "modernizr", i = b.createElement(h), j = i.style, k = b.createElement("input"), l = ":)", m = {}.toString, n = " -webkit- -moz- -o- -ms- ".split(" "), o = "Webkit Moz O ms", p = o.split(" "), q = o.toLowerCase().split(" "), r = { svg: "http://www.w3.org/2000/svg" }, s = {}, t = {}, u = {}, v = [], w = v.slice, x, y = function (a, c, d, e) { var f, i, j, k, l = b.createElement("div"), m = b.body, n = m || b.createElement("body"); if (parseInt(d, 10)) while (d--) j = b.createElement("div"), j.id = e ? e[d] : h + (d + 1), l.appendChild(j); return f = ["", '<style id="s', h, '">', a, "</style>"].join(""), l.id = h, (m ? l : n).innerHTML += f, n.appendChild(l), m || (n.style.background = "", n.style.overflow = "hidden", k = g.style.overflow, g.style.overflow = "hidden", g.appendChild(n)), i = c(l, a), m ? l.parentNode.removeChild(l) : (n.parentNode.removeChild(n), g.style.overflow = k), !!i }, z = function () { function d(d, e) { e = e || b.createElement(a[d] || "div"), d = "on" + d; var f = d in e; return f || (e.setAttribute || (e = b.createElement("div")), e.setAttribute && e.removeAttribute && (e.setAttribute(d, ""), f = E(e[d], "function"), E(e[d], "undefined") || (e[d] = c), e.removeAttribute(d))), e = null, f } var a = { select: "input", change: "input", submit: "form", reset: "form", error: "img", load: "img", abort: "img" }; return d } (), A = {}.hasOwnProperty, B; !E(A, "undefined") && !E(A.call, "undefined") ? B = function (a, b) { return A.call(a, b) } : B = function (a, b) { return b in a && E(a.constructor.prototype[b], "undefined") }, Function.prototype.bind || (Function.prototype.bind = function (b) { var c = this; if (typeof c != "function") throw new TypeError; var d = w.call(arguments, 1), e = function () { if (this instanceof e) { var a = function () { }; a.prototype = c.prototype; var f = new a, g = c.apply(f, d.concat(w.call(arguments))); return Object(g) === g ? g : f } return c.apply(b, d.concat(w.call(arguments))) }; return e }), s.flexbox = function () { return I("flexWrap") }, s.flexboxlegacy = function () { return I("boxDirection") }, s.canvas = function () { var a = b.createElement("canvas"); return !!a.getContext && !!a.getContext("2d") }, s.canvastext = function () { return !!e.canvas && !!E(b.createElement("canvas").getContext("2d").fillText, "function") }, s.webgl = function () { return !!a.WebGLRenderingContext }, s.touch = function () { var c; return "ontouchstart" in a || a.DocumentTouch && b instanceof DocumentTouch ? c = !0 : y(["@media (", n.join("touch-enabled),("), h, ")", "{#modernizr{top:9px;position:absolute}}"].join(""), function (a) { c = a.offsetTop === 9 }), c }, s.geolocation = function () { return "geolocation" in navigator }, s.postmessage = function () { return !!a.postMessage }, s.websqldatabase = function () { return !!a.openDatabase }, s.indexedDB = function () { return !!I("indexedDB", a) }, s.hashchange = function () { return z("hashchange", a) && (b.documentMode === c || b.documentMode > 7) }, s.history = function () { return !!a.history && !!history.pushState }, s.draganddrop = function () { var a = b.createElement("div"); return "draggable" in a || "ondragstart" in a && "ondrop" in a }, s.websockets = function () { return "WebSocket" in a || "MozWebSocket" in a }, s.rgba = function () { return C("background-color:rgba(150,255,150,.5)"), F(j.backgroundColor, "rgba") }, s.hsla = function () { return C("background-color:hsla(120,40%,100%,.5)"), F(j.backgroundColor, "rgba") || F(j.backgroundColor, "hsla") }, s.multiplebgs = function () { return C("background:url(https://),url(https://),red url(https://)"), /(url\s*\(.*?){3}/.test(j.background) }, s.backgroundsize = function () { return I("backgroundSize") }, s.borderimage = function () { return I("borderImage") }, s.borderradius = function () { return I("borderRadius") }, s.boxshadow = function () { return I("boxShadow") }, s.textshadow = function () { return b.createElement("div").style.textShadow === "" }, s.opacity = function () { return D("opacity:.55"), /^0.55$/.test(j.opacity) }, s.cssanimations = function () { return I("animationName") }, s.csscolumns = function () { return I("columnCount") }, s.cssgradients = function () { var a = "background-image:", b = "gradient(linear,left top,right bottom,from(#9f9),to(white));", c = "linear-gradient(left top,#9f9, white);"; return C((a + "-webkit- ".split(" ").join(b + a) + n.join(c + a)).slice(0, -a.length)), F(j.backgroundImage, "gradient") }, s.cssreflections = function () { return I("boxReflect") }, s.csstransforms = function () { return !!I("transform") }, s.csstransforms3d = function () { var a = !!I("perspective"); return a && "webkitPerspective" in g.style && y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}", function (b, c) { a = b.offsetLeft === 9 && b.offsetHeight === 3 }), a }, s.csstransitions = function () { return I("transition") }, s.fontface = function () { var a; return y('@font-face {font-family:"font";src:url("https://")}', function (c, d) { var e = b.getElementById("smodernizr"), f = e.sheet || e.styleSheet, g = f ? f.cssRules && f.cssRules[0] ? f.cssRules[0].cssText : f.cssText || "" : ""; a = /src/i.test(g) && g.indexOf(d.split(" ")[0]) === 0 }), a }, s.generatedcontent = function () { var a; return y(["#", h, "{font:0/0 a}#", h, ':after{content:"', l, '";visibility:hidden;font:3px/1 a}'].join(""), function (b) { a = b.offsetHeight >= 3 }), a }, s.video = function () { var a = b.createElement("video"), c = !1; try { if (c = !!a.canPlayType) c = new Boolean(c), c.ogg = a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/, ""), c.h264 = a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/, ""), c.webm = a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/, "") } catch (d) { } return c }, s.audio = function () { var a = b.createElement("audio"), c = !1; try { if (c = !!a.canPlayType) c = new Boolean(c), c.ogg = a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/, ""), c.mp3 = a.canPlayType("audio/mpeg;").replace(/^no$/, ""), c.wav = a.canPlayType('audio/wav; codecs="1"').replace(/^no$/, ""), c.m4a = (a.canPlayType("audio/x-m4a;") || a.canPlayType("audio/aac;")).replace(/^no$/, "") } catch (d) { } return c }, s.localstorage = function () { try { return localStorage.setItem(h, h), localStorage.removeItem(h), !0 } catch (a) { return !1 } }, s.sessionstorage = function () { try { return sessionStorage.setItem(h, h), sessionStorage.removeItem(h), !0 } catch (a) { return !1 } }, s.webworkers = function () { return !!a.Worker }, s.applicationcache = function () { return !!a.applicationCache }, s.svg = function () { return !!b.createElementNS && !!b.createElementNS(r.svg, "svg").createSVGRect }, s.inlinesvg = function () { var a = b.createElement("div"); return a.innerHTML = "<svg/>", (a.firstChild && a.firstChild.namespaceURI) == r.svg }, s.smil = function () { return !!b.createElementNS && /SVGAnimate/.test(m.call(b.createElementNS(r.svg, "animate"))) }, s.svgclippaths = function () { return !!b.createElementNS && /SVGClipPath/.test(m.call(b.createElementNS(r.svg, "clipPath"))) }; for (var K in s) B(s, K) && (x = K.toLowerCase(), e[x] = s[K](), v.push((e[x] ? "" : "no-") + x)); return e.input || J(), e.addTest = function (a, b) { if (typeof a == "object") for (var d in a) B(a, d) && e.addTest(d, a[d]); else { a = a.toLowerCase(); if (e[a] !== c) return e; b = typeof b == "function" ? b() : b, typeof f != "undefined" && f && (g.className += " " + (b ? "" : "no-") + a), e[a] = b } return e }, C(""), i = k = null, function (a, b) { function l(a, b) { var c = a.createElement("p"), d = a.getElementsByTagName("head")[0] || a.documentElement; return c.innerHTML = "x<style>" + b + "</style>", d.insertBefore(c.lastChild, d.firstChild) } function m() { var a = s.elements; return typeof a == "string" ? a.split(" ") : a } function n(a) { var b = j[a[h]]; return b || (b = {}, i++, a[h] = i, j[i] = b), b } function o(a, c, d) { c || (c = b); if (k) return c.createElement(a); d || (d = n(c)); var g; return d.cache[a] ? g = d.cache[a].cloneNode() : f.test(a) ? g = (d.cache[a] = d.createElem(a)).cloneNode() : g = d.createElem(a), g.canHaveChildren && !e.test(a) && !g.tagUrn ? d.frag.appendChild(g) : g } function p(a, c) { a || (a = b); if (k) return a.createDocumentFragment(); c = c || n(a); var d = c.frag.cloneNode(), e = 0, f = m(), g = f.length; for (; e < g; e++) d.createElement(f[e]); return d } function q(a, b) { b.cache || (b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag()), a.createElement = function (c) { return s.shivMethods ? o(c, a, b) : b.createElem(c) }, a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + m().join().replace(/[\w\-]+/g, function (a) { return b.createElem(a), b.frag.createElement(a), 'c("' + a + '")' }) + ");return n}")(s, b.frag) } function r(a) { a || (a = b); var c = n(a); return s.shivCSS && !g && !c.hasCSS && (c.hasCSS = !!l(a, "article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")), k || q(a, c), a } var c = "3.7.0", d = a.html5 || {}, e = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i, f = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i, g, h = "_html5shiv", i = 0, j = {}, k; (function () { try { var a = b.createElement("a"); a.innerHTML = "<xyz></xyz>", g = "hidden" in a, k = a.childNodes.length == 1 || function () { b.createElement("a"); var a = b.createDocumentFragment(); return typeof a.cloneNode == "undefined" || typeof a.createDocumentFragment == "undefined" || typeof a.createElement == "undefined" } () } catch (c) { g = !0, k = !0 } })(); var s = { elements: d.elements || "abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video", version: c, shivCSS: d.shivCSS !== !1, supportsUnknownElements: k, shivMethods: d.shivMethods !== !1, type: "default", shivDocument: r, createElement: o, createDocumentFragment: p }; a.html5 = s, r(b) } (this, b), e._version = d, e._prefixes = n, e._domPrefixes = q, e._cssomPrefixes = p, e.hasEvent = z, e.testProp = function (a) { return G([a]) }, e.testAllProps = I, e.testStyles = y, g.className = g.className.replace(/(^|\s)no-js(\s|$)/, "$1$2") + (f ? " js " + v.join(" ") : ""), e } (this, this.document), function (a, b, c) { function d(a) { return "[object Function]" == o.call(a) } function e(a) { return "string" == typeof a } function f() { } function g(a) { return !a || "loaded" == a || "complete" == a || "uninitialized" == a } function h() { var a = p.shift(); q = 1, a ? a.t ? m(function () { ("c" == a.t ? B.injectCss : B.injectJs)(a.s, 0, a.a, a.x, a.e, 1) }, 0) : (a(), h()) : q = 0 } function i(a, c, d, e, f, i, j) { function k(b) { if (!o && g(l.readyState) && (u.r = o = 1, !q && h(), l.onload = l.onreadystatechange = null, b)) { "img" != a && m(function () { t.removeChild(l) }, 50); for (var d in y[c]) y[c].hasOwnProperty(d) && y[c][d].onload() } } var j = j || B.errorTimeout, l = b.createElement(a), o = 0, r = 0, u = { t: d, s: c, e: f, a: i, x: j }; 1 === y[c] && (r = 1, y[c] = []), "object" == a ? l.data = c : (l.src = c, l.type = a), l.width = l.height = "0", l.onerror = l.onload = l.onreadystatechange = function () { k.call(this, r) }, p.splice(e, 0, u), "img" != a && (r || 2 === y[c] ? (t.insertBefore(l, s ? null : n), m(k, j)) : y[c].push(l)) } function j(a, b, c, d, f) { return q = 0, b = b || "j", e(a) ? i("c" == b ? v : u, a, b, this.i++, c, d, f) : (p.splice(this.i++, 0, a), 1 == p.length && h()), this } function k() { var a = B; return a.loader = { load: j, i: 0 }, a } var l = b.documentElement, m = a.setTimeout, n = b.getElementsByTagName("script")[0], o = {}.toString, p = [], q = 0, r = "MozAppearance" in l.style, s = r && !!b.createRange().compareNode, t = s ? l : n.parentNode, l = a.opera && "[object Opera]" == o.call(a.opera), l = !!b.attachEvent && !l, u = r ? "object" : l ? "script" : "img", v = l ? "script" : u, w = Array.isArray || function (a) { return "[object Array]" == o.call(a) }, x = [], y = {}, z = { timeout: function (a, b) { return b.length && (a.timeout = b[0]), a } }, A, B; B = function (a) { function b(a) { var a = a.split("!"), b = x.length, c = a.pop(), d = a.length, c = { url: c, origUrl: c, prefixes: a }, e, f, g; for (f = 0; f < d; f++) g = a[f].split("="), (e = z[g.shift()]) && (c = e(c, g)); for (f = 0; f < b; f++) c = x[f](c); return c } function g(a, e, f, g, h) { var i = b(a), j = i.autoCallback; i.url.split(".").pop().split("?").shift(), i.bypass || (e && (e = d(e) ? e : e[a] || e[g] || e[a.split("/").pop().split("?")[0]]), i.instead ? i.instead(a, e, f, g, h) : (y[i.url] ? i.noexec = !0 : y[i.url] = 1, f.load(i.url, i.forceCSS || !i.forceJS && "css" == i.url.split(".").pop().split("?").shift() ? "c" : c, i.noexec, i.attrs, i.timeout), (d(e) || d(j)) && f.load(function () { k(), e && e(i.origUrl, h, g), j && j(i.origUrl, h, g), y[i.url] = 2 }))) } function h(a, b) { function c(a, c) { if (a) { if (e(a)) c || (j = function () { var a = [].slice.call(arguments); k.apply(this, a), l() }), g(a, j, b, 0, h); else if (Object(a) === a) for (n in m = function () { var b = 0, c; for (c in a) a.hasOwnProperty(c) && b++; return b } (), a) a.hasOwnProperty(n) && (!c && ! --m && (d(j) ? j = function () { var a = [].slice.call(arguments); k.apply(this, a), l() } : j[n] = function (a) { return function () { var b = [].slice.call(arguments); a && a.apply(this, b), l() } } (k[n])), g(a[n], j, b, n, h)) } else !c && l() } var h = !!a.test, i = a.load || a.both, j = a.callback || f, k = j, l = a.complete || f, m, n; c(h ? a.yep : a.nope, !!i), i && c(i) } var i, j, l = this.yepnope.loader; if (e(a)) g(a, 0, l, 0); else if (w(a)) for (i = 0; i < a.length; i++) j = a[i], e(j) ? g(j, 0, l, 0) : w(j) ? B(j) : Object(j) === j && h(j, l); else Object(a) === a && h(a, l) }, B.addPrefix = function (a, b) { z[a] = b }, B.addFilter = function (a) { x.push(a) }, B.errorTimeout = 1e4, null == b.readyState && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", A = function () { b.removeEventListener("DOMContentLoaded", A, 0), b.readyState = "complete" }, 0)), a.yepnope = k(), a.yepnope.executeStack = h, a.yepnope.injectJs = function (a, c, d, e, i, j) { var k = b.createElement("script"), l, o, e = e || B.errorTimeout; k.src = a; for (o in d) k.setAttribute(o, d[o]); c = j ? h : c || f, k.onreadystatechange = k.onload = function () { !l && g(k.readyState) && (l = 1, c(), k.onload = k.onreadystatechange = null) }, m(function () { l || (l = 1, c(1)) }, e), i ? k.onload() : n.parentNode.insertBefore(k, n) }, a.yepnope.injectCss = function (a, c, d, e, g, i) { var e = b.createElement("link"), j, c = i ? h : c || f; e.href = a, e.rel = "stylesheet", e.type = "text/css"; for (j in d) e.setAttribute(j, d[j]); g || (n.parentNode.insertBefore(e, n), m(c, 0)) } } (this, document), Modernizr.load = function () { yepnope.apply(window, [].slice.call(arguments, 0)) };
(function ($, window, document, undefined) {
'use strict';
var Modernizr = window.Modernizr;
//1. Plugin constructor
function GlassCase(element, options) {
var gcBase = this;
gcBase.element = element.wrap('<div class="glass-case"></div>').parent();
gcBase.init(options);
}
//2. Object with the default options of the plugin
GlassCase.defaults = {
//DISPLAY AREA
widthDisplay: 600, // Default width of the display image
heightDisplay: 534, // Default height of the display image
isAutoScaleDisplay: true,
isAutoScaleHeight: true,
isDownloadEnabled: true,
downloadPosition: 3,
isShowAlwaysIcons: false,
speedHideIcons: 3000,
mouseEnterDisplayCB: function () { },
mouseLeaveDisplayCB: function () { },
//THUMBS AREA
thumbsPosition: 'bottom', // Default position of thumbs. Position is relative to the image display. Can take the values: top; bottom
nrThumbsPerRow: 5, // Number of images per row
isThumbsOneRow: true, // Show one row or all images: true -> will be shown only one row; false -> will be shown all images
isOneThumbShown: false,
firstThumbSelected: 0, // Current element's index
colorActiveThumb: -1,
thumbsMargin: 4, // in px
isHoverShowThumbs: false,
//ZOOM AREA
zoomPosition: 'right', // Default position for the zoom. It can take values: right; left; inner
autoInnerZoom: true, // true; false
isZoomEnabled: true,
isSlowZoom: false,
speedSlowZoom: 1200,
isZoomDiffWH: false,
zoomWidth: 0,
zoomHeight: 0,
zoomAlignment: 'displayImage', //displayImage, displayArea
zoomMargin: 4, // in px
//LENS AREA
isSlowLens: false,
speedSlowLens: 600,
//OVERLAY AREA
isOverlayEnabled: true,
isOverlayFullImage: false,
//GENERAL
speed: 400, // Default speed
easing: 'linear', // Default easing
isKeypressEnabled: true,
colorIcons: -1, // The color of the icons
colorLoading: -1,
textImageNotLoaded: 'NO IMAGE',
//CAPTION
isZCapEnabled: true,
capZType: 'in', // in, out
capZPos: 'bottom', // top, bottom
capZAlign: 'center' // left, center, right
};
//3. Adding methods to the plugin object
GlassCase.prototype = {
init: function (options) {
var gcBase = this;
// Merging user's options with the default options
gcBase.config = $.extend(true, {}, GlassCase.defaults, options);
// Saving user's options to a private object
gcBase._options = options;
// GlassCase defaults
gcBase._defaults = GlassCase.defaults;
gcBase.iOS = false;
var p = window.navigator.platform;
if (p === 'iPad' || p === 'iPhone' || p === 'iPod') {
gcBase.iOS = true;
}
gcBase.supportCanvas = Modernizr.canvas;
var ctntDisplayArea = "<div class='gc-display-area'>" +
"<div class='gc-icon gc-icon-download'></div>" +
"<div class='gc-icon gc-icon-next'></div>" +
"<div class='gc-icon gc-icon-prev'></div>" +
"<div class='gc-display-container'>" +
"<div class='gc-lens'></div>" +
"<img class='gc-display-display' alt=' ' />" +
"</div>" +
"</div>";
var ctntZoomArea = "<div class='gc-zoom'>" +
"<div class='gc-zoom-container'><img alt=' ' /></div>" +
"</div>";
var ctntOverlayArea = "<div class='gc-overlay-area'>" +
"<div class='gc-overlay-top-icons'>" +
"<div class='gc-icon gc-icon-close'> </div>" +
"<div class='gc-icon gc-icon-enlarge'> </div>" +
"<div class='gc-icon gc-icon-compress'> </div>" +
"</div>" +
"<div class='gc-overlay-left-icons'>" +
"<div class='gc-icon gc-icon-prev'> </div>" +
"</div>" +
"<div class='gc-overlay-right-icons'>" +
"<div class='gc-icon gc-icon-next'> </div>" +
"</div>" +
"<div class='gc-overlay-gcontainer'>" +
"<div class='gc-overlay-container'>" +
"<div class='gc-overlay-container-display'>" +
"<img class='gc-overlay-display' alt=' ' />" +
"</div>" +
"</div>" +
"</div>" +
"</div>";
var sVT = (gcBase.config.thumbsPosition == 'right' || gcBase.config.thumbsPosition == 'left') ? '-vt' : '';
var ctntThumbsPrevNext = "<div class='gc-thumbs-area-prev'><div class='gc-icon gc-icon-prev" + sVT + "'></div></div>" +
"<div class='gc-thumbs-area-next'><div class='gc-icon gc-icon-next" + sVT + "'></div></div>";
// Setting the position of the thumb images
gcBase.widthDisplayPerc = 100;
if (gcBase.config.thumbsPosition == 'top' || gcBase.config.thumbsPosition == 'left') {
gcBase.element.append(ctntDisplayArea);
}
else {
gcBase.element.prepend(ctntDisplayArea);
}
gcBase.element.prepend(ctntZoomArea).prepend(ctntOverlayArea);
// Plugin variables
// Loading
gcBase.gcLoadingClass = (Modernizr.csstransforms == true) ? 'gc-loading3' : 'gc-loading';
gcBase.gcLoader = $("<div class='" + gcBase.gcLoadingClass + "'></div>");
gcBase.gcLoading = gcBase.element.find('.' + gcBase.gcLoadingClass);
if (gcBase.config.colorLoading != -1 && Modernizr.csstransforms == true) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(gcBase.config.colorLoading);
if (result) {
var sC = 'rgba(' + parseInt(result[1], 16) + ', ' + parseInt(result[2], 16) + ', ' + parseInt(result[3], 16) + ', ';
gcBase.gcLoader.css({ 'border-top-color': sC + '0.2)', 'border-right-color': sC + '0.2)', 'border-bottom-color': sC + '0.2)', 'border-left-color': sC + '1)' });
}
}
// gcImageData: Array that will hold the sizes of all the images
gcBase.gcImageData = [];
// Display: Area, Container, Display, Lens, Download Icon
gcBase.gcDisplayArea = gcBase.element.find('.gc-display-area');
gcBase.gcDisplayContainer = gcBase.gcDisplayArea.find('.gc-display-container');
gcBase.gcDisplayDisplay = gcBase.gcDisplayContainer.find('.gc-display-display');
gcBase.gcLens = gcBase.gcDisplayContainer.find('.gc-lens').hide();
gcBase.gcDisplayDownload = gcBase.gcDisplayArea.find('.gc-icon-download');
gcBase.gcDisplayPrevious = gcBase.gcDisplayArea.find('.gc-icon-prev');
gcBase.gcDisplayNext = gcBase.gcDisplayArea.find('.gc-icon-next');
// Zoom: Area, Display
gcBase.gcZoom = gcBase.element.find('.gc-zoom').hide();
gcBase.gcZoomContainer = gcBase.gcZoom.find('.gc-zoom-container');
gcBase.gcZoomDisplay = gcBase.gcZoomContainer.find('img');
// Overlay: Area, Display, Close Icon, Previous Icon, Next Icon
gcBase.gcOverlayArea = gcBase.element.find('.gc-overlay-area').hide();
gcBase.gcOverlayGContainer = gcBase.gcOverlayArea.find('.gc-overlay-gcontainer');
gcBase.gcOverlayContainer = gcBase.gcOverlayArea.find('.gc-overlay-container');
gcBase.gcOverlayContainerDisplay = gcBase.gcOverlayContainer.find('.gc-overlay-container-display');
gcBase.gcOverlayDisplay = gcBase.gcOverlayContainer.find('.gc-overlay-display');
gcBase.gcOverlayPrevious = gcBase.gcOverlayArea.find('.gc-icon-prev');
gcBase.gcOverlayNext = gcBase.gcOverlayArea.find('.gc-icon-next');
gcBase.gcOverlayClose = gcBase.gcOverlayArea.find('.gc-icon-close');
gcBase.gcOverlayEnlarge = gcBase.gcOverlayArea.find('.gc-icon-enlarge').hide();
gcBase.gcOverlayCompress = gcBase.gcOverlayArea.find('.gc-icon-compress').hide();
// Thumbs: Area, Ul, Li, AreaPrevious, AreaNext, Previous, Next, Img, LiDiv
gcBase.gcThumbsUl = gcBase.element.find('ul');
gcBase.gcThumbsUl.wrap("<div class='gc-thumbs-area'></div>");
gcBase.gcThumbsArea = gcBase.element.find('.gc-thumbs-area');
gcBase.gcThumbsArea.append(ctntThumbsPrevNext);
gcBase.gcThumbsAreaPrevious = gcBase.gcThumbsArea.find('.gc-thumbs-area-prev');
gcBase.gcThumbsPrevious = gcBase.gcThumbsAreaPrevious.find('.gc-icon-prev' + sVT);
gcBase.gcThumbsAreaNext = gcBase.gcThumbsArea.find('.gc-thumbs-area-next');
gcBase.gcThumbsNext = gcBase.gcThumbsAreaNext.find('.gc-icon-next' + sVT);
gcBase.gcThumbsLi = gcBase.gcThumbsUl.find('li');
gcBase.gcThumbsLi.each(function (index) {
var iSrc = $.trim($(this).find('img').attr('src'));
var els = gcBase.gcThumbsLi.find('img[src="' + iSrc + '"]');
while (els.length > 1) {
els.last().parent().remove();
gcBase.gcThumbsLi = gcBase.gcThumbsUl.find('li');
els = gcBase.gcThumbsLi.find('img[src="' + iSrc + '"]');
}
});
gcBase.gcThumbsLi = gcBase.gcThumbsUl.find('li');
gcBase.gcThumbsImg = gcBase.gcThumbsLi.find('img');
gcBase.gcThumbsImg.wrap('<div class="gc-li-display-container"></div>');
gcBase.gcThumbsLiDiv = gcBase.gcThumbsLi.find('.gc-li-display-container');
gcBase.gcThumbsUl.removeClass('gc-start');
gcBase.gcTotalThumbsImg = gcBase.gcThumbsImg.length;
// Caption
var cssClass;
if (gcBase.config.isZCapEnabled === true) {
gcBase.gcCaption = $('<div class="gc-caption-container"><div></div></div>');
gcBase.gcCaptionDisplay = gcBase.gcCaption.find('div');
if (gcBase.config.zoomPosition === 'inner') gcBase.config.capZType = 'in';
cssClass = 'gc-caption-' + gcBase.config.capZType + gcBase.config.capZPos;
if ($.inArray(cssClass, ['gc-caption-outtop', 'gc-caption-outbottom', 'gc-caption-intop', 'gc-caption-inbottom']) === -1) {
cssClass = 'gc-caption-' + gcBase._defaults.capZType + gcBase._defaults.capZPos;
}
$.inArray(gcBase.config.capZAlign, ['left', 'right', 'center']) === -1 ?
cssClass += ' gc-alignment-' + gcBase._defaults.capZAlign :
cssClass += ' gc-alignment-' + gcBase.config.capZAlign;
gcBase.gcCaption.addClass(cssClass).appendTo(gcBase.gcZoom);
}
gcBase.isMouseEventsOn = false;
gcBase.isTouchMove = false;
gcBase.mouseTimer = 0;
if (gcBase.config.isShowAlwaysIcons != true) {
gcBase.gcDisplayDownload.hide();
gcBase.gcDisplayPrevious.hide();
gcBase.gcDisplayNext.hide();
}
gcBase.isAutoInnerZooming = false;
if (gcBase.config.zoomPosition == 'inner') {
gcBase.config.isZoomDiffWH = true; gcBase.config.zoomWidth = 0; gcBase.config.zoomHeight = 0;
}
if (gcBase.config.thumbsPosition == 'left' || gcBase.config.thumbsPosition == 'right') {
gcBase.gcThumbsArea.addClass('gc-vt');
} else {
gcBase.gcThumbsArea.addClass('gc-hz');
}
if (gcBase.config.colorIcons != -1) {
gcBase.element.find('.gc-icon').css('color', gcBase.config.colorIcons);
}
if (gcBase.config.isDownloadEnabled == false || gcBase.supportCanvas == false) {
gcBase.gcDisplayDownload.addClass('gc-hide');
}
else {
var cssDownloadPosition = { top: '', bottom: '', right: '', left: '' };
var bW = '-' + gcBase.gcDisplayArea.css('border-left-width');
switch (gcBase.config.downloadPosition) {
case 1:
cssDownloadPosition.top = bW;
cssDownloadPosition.left = bW;
break;
case 2:
cssDownloadPosition.top = bW;
cssDownloadPosition.right = bW;
break;
case 4:
cssDownloadPosition.bottom = bW;
cssDownloadPosition.right = bW;
break;
default:
cssDownloadPosition.bottom = bW;
cssDownloadPosition.left = bW;
break;
}
gcBase.gcDisplayDownload.css(cssDownloadPosition);
}
if (isNaN(gcBase.config.firstThumbSelected) == false &&
parseFloat(gcBase.config.firstThumbSelected) > -1 &&
parseFloat(gcBase.config.firstThumbSelected) <= (gcBase.gcThumbsLi.length - 1)) {
gcBase.current = gcBase.config.firstThumbSelected;
}
else {
gcBase.current = gcBase._defaults.firstThumbSelected;
}
gcBase.currentSlide = Math.floor(gcBase.current / gcBase.config.nrThumbsPerRow);
gcBase.old = 0;
gcBase.currentMousePos = { x: -1, y: -1 };
gcBase.resizeTimer = 0;
gcBase.zooming = false;
gcBase.newZoom = { left: 0, top: 0 };
gcBase.currentZoom = { left: 0, top: 0 };
gcBase.slowZoomTimer = 0;
gcBase.newLens = { left: 0, top: 0 };
gcBase.currentLens = { left: 0, top: 0 };
gcBase.slowLensTimer = 0;
var altTxt = gcBase.gcThumbsLi.eq(gcBase.current).find('img').attr('alt');
if (altTxt === undefined) altTxt = 'image';
gcBase.gcDisplayDisplay.attr('src', gcBase.gcThumbsImg.eq(gcBase.current).attr('src'))
.attr('alt', altTxt);
gcBase.setup();
$.when(gcBase.preloadImages()).done(function () {
gcBase.update();
gcBase.initEvents();
});
},
preloadImages: function () {
var gcBase = this;
var countLoadedImages = 0,
countTotalImages = gcBase.gcTotalThumbsImg;
// Object that will hold the natural sizes of the image
function GCImageData(width, height, isLoaded, src) {
this.width = width;
this.height = height;
this.isLoaded = isLoaded;
};
return $.Deferred(
function (dfd) {
gcBase.gcThumbsImg.each(function (index) {
$('<img/>')
.on('load', function () {
var lWidth = this.width,
lHeight = this.height,
lGCImageData = new GCImageData(lWidth, lHeight, true),
index = gcBase.gcThumbsLi.find("img[src*='" + $(this).attr('src') + "']").parents('li').index();
gcBase.gcImageData[index] = lGCImageData;
gcBase.processThumbImage(index);
if (++countLoadedImages === countTotalImages) { dfd.resolve(); }
})
.on('error', function () {
var index = gcBase.gcThumbsLi.find("img[src*='" + $(this).attr('src') + "']").parents('li').index(),
lWidth = gcBase.gcThumbsLi.width(),
lHeight = gcBase.gcThumbsLi.height(),
lGCImageData = new GCImageData(lWidth, lHeight, false);
gcBase.gcImageData[index] = lGCImageData;
this.onerror = "";
if (Modernizr.svg) {
var iEDB64 = window.btoa("<svg xmlns='http://www.w3.org/2000/svg' width='" + lWidth + "' height='" + lHeight + "'><rect width='" + lWidth + "' height='" + lHeight + "' fill='#eee'/><text text-anchor='middle' x='" + lWidth / 2 + "' y='" + lHeight / 2 + "' style='fill:#aaa;font-weight:bold;font-size:8px;font-family:Arial,Helvetica,sans-serif;dominant-baseline:central'>" + gcBase.config.textImageNotLoaded + "</text></svg>");
gcBase.gcThumbsImg.eq(index).attr('src', "data:image/svg+xml;base64," + iEDB64);
}
gcBase.processThumbImage(index);
if (++countLoadedImages === countTotalImages) { dfd.resolve(); }
}).attr('src', $(this).attr('src'));
});
}
).promise();
},
processThumbImage: function (index) {
var gcBase = this;
gcBase.setupThumbImg(gcBase.gcThumbsLi.eq(index), index);
gcBase.removeLoader(gcBase.gcThumbsLi.eq(index));
gcBase.gcThumbsLi.eq(index).find('.gc-li-display-container').removeClass('gc-hide');
if (gcBase.current == index) {
gcBase.removeLoader(gcBase.gcDisplayArea);
gcBase.gcDisplayContainer.removeClass('gc-hide');
gcBase.setupDisplayDisplay();
gcBase.setupLens();
}
},
setup: function () {
var gcBase = this;
var gcWidth;
if ((gcBase.config.thumbsPosition == 'right' || gcBase.config.thumbsPosition == 'left') &&
(gcBase.config.isOneThumbShown == false && (gcBase.gcThumbsLi.length > 1))) {
var liMargin = parseFloat(gcBase.gcThumbsLi.css('margin-bottom')),
heightLi = (parseFloat(gcBase.config.heightDisplay) / gcBase.config.nrThumbsPerRow - (gcBase.config.nrThumbsPerRow - 1) * liMargin / gcBase.config.nrThumbsPerRow),
ratio = gcBase.config.widthDisplay / gcBase.config.heightDisplay,
widthLi = heightLi * ratio;
var wE = widthLi + gcBase.config.thumbsMargin + parseFloat(gcBase.config.widthDisplay);
gcBase.widthDisplayPerc = Math.round(gcBase.config.widthDisplay * 100 / wE);
gcWidth = gcBase.element.parent().width() > wE ? wE : gcBase.element.parent().width();
} else {
gcWidth = gcBase.element.parent().width() > gcBase.config.widthDisplay ? (gcBase.config.widthDisplay) : gcBase.element.parent().width();
}
gcBase.element.css({ 'width': gcWidth });
// DISPLAY
gcBase.setupDisplayArea();
// THUMBS
if (gcBase.config.isOneThumbShown == false && gcBase.gcTotalThumbsImg == 1) {
gcBase.gcThumbsArea.outerHeight(0);
gcBase.gcThumbsArea.addClass('gc-hide');
gcBase.config.isKeypressEnabled = false;
}
else {
gcBase.config.isOneThumbShown = true;
gcBase.setupThumbs();
}
// OVERLAY: Setting centered position for NAVIGATION BUTTONS: previous/next
if (gcBase.gcTotalThumbsImg == 1) {
gcBase.gcOverlayPrevious.addClass('gc-hide');
gcBase.gcOverlayNext.addClass('gc-hide');
}
else {
gcBase.gcOverlayPrevious.css('margin-top', -(gcBase.gcOverlayPrevious.outerHeight() / 2));
gcBase.gcOverlayNext.css('margin-top', -(gcBase.gcOverlayNext.outerHeight() / 2));
}
// COMPONENT
if (gcBase.config.thumbsPosition == 'top' || gcBase.config.thumbsPosition == 'bottom') {
var hThumbs = gcBase.config.isOneThumbShown == false ? 0 : gcBase.gcThumbsArea.outerHeight();
gcBase.element.css({ 'height': hThumbs + gcBase.gcDisplayArea.outerHeight() + parseFloat(gcBase.config.thumbsMargin) });
}
else {
var wThumbs = gcBase.config.isOneThumbShown == false ? 0 : gcBase.gcThumbsArea.outerWidth();
gcBase.element.css({ 'width': wThumbs + gcBase.gcDisplayArea.outerWidth() + parseFloat(gcBase.config.thumbsMargin) });
gcBase.element.css({ 'height': gcBase.gcDisplayArea.outerHeight() });
}
},
setupDisplayArea: function () {
var gcBase = this;
var currentDisplayAreaWidth, currentDisplayAreaHeight,
nextDisplayAreaWidth, nextDisplayAreaHeight,
asWidth = gcBase.config.widthDisplay, asHeight = gcBase.config.heightDisplay;
gcBase.gcDisplayArea.css({ 'height': '0', 'width': '0' });
nextDisplayAreaWidth = gcBase.widthDisplayPerc * gcBase.element.outerWidth() / 100;
nextDisplayAreaHeight = nextDisplayAreaWidth * (asHeight / asWidth);
gcBase.gcDisplayArea.css({ 'height': Math.ceil(nextDisplayAreaHeight), 'width': Math.ceil(nextDisplayAreaWidth) });
// Display: Setting centered position for NAVIGATION BUTTONS: previous/next
gcBase.gcDisplayPrevious.css('margin-top', -(gcBase.gcDisplayPrevious.outerHeight() / 2));
gcBase.gcDisplayNext.css('margin-top', -(gcBase.gcDisplayNext.outerHeight() / 2));
if (gcBase.gcTotalThumbsImg == 1) {
gcBase.gcDisplayPrevious.addClass('gc-hide');
gcBase.gcDisplayNext.addClass('gc-hide');
}
gcBase.gcDisplayContainer.addClass('gc-hide');
gcBase.addLoader(gcBase.gcDisplayArea);
},
setupDisplayDisplay: function () {
var gcBase = this;
gcBase.gcDisplayContainer.css({ 'width': '0', 'height': '0' });
gcBase.gcDisplayContainer.css({ 'width': gcBase.gcDisplayArea.outerWidth(), 'height': gcBase.gcDisplayArea.outerHeight() });
var widthRatio = gcBase.gcDisplayContainer.outerWidth() / gcBase.gcImageData[gcBase.current].width,
heightRatio = gcBase.gcDisplayContainer.outerHeight() / gcBase.gcImageData[gcBase.current].height,
ratio, ddWidth, ddHeight;
if ((widthRatio < 1 || heightRatio < 1)) {
gcBase.config.isZoomEnabled === true ? gcBase.isMouseEventsOn = true : gcBase.isMouseEventsOn = false;
widthRatio < heightRatio ? ratio = widthRatio : ratio = heightRatio;
ddWidth = ratio * gcBase.gcImageData[gcBase.current].width;
ddHeight = ratio * gcBase.gcImageData[gcBase.current].height;
}
else { // In case that the image's width and height are smaller than the container's windth and height
gcBase.gcDisplayContainer.trigger('mouseleave.glasscase');
gcBase.isMouseEventsOn = false;
ddWidth = gcBase.gcImageData[gcBase.current].width;
ddHeight = gcBase.gcImageData[gcBase.current].height;
}
gcBase.gcDisplayDisplay.css({ 'width': ddWidth, 'height': ddHeight });
gcBase.gcDisplayContainer.css({ 'width': ddWidth, 'height': ddHeight });
// Positioning the container in the center of DisplayArea
var borderVal = parseFloat(gcBase.gcDisplayArea.css('border-left-width')) * 2,
paddingVal = parseFloat(gcBase.gcDisplayArea.css('padding-top')) * 2;
var percMarginLeft = ((gcBase.gcDisplayContainer.outerWidth() / 2) * 100) / (gcBase.gcDisplayArea.outerWidth() - borderVal - paddingVal),
percMarginTop = ((gcBase.gcDisplayContainer.outerHeight() / 2) * 100) / (gcBase.gcDisplayArea.outerWidth() - borderVal - paddingVal);
gcBase.gcDisplayContainer.css({
'margin-left': "-" + percMarginLeft + "%",
'margin-top': "-" + percMarginTop + "%"
});
},
setupZoom: function () {
var gcBase = this;
gcBase.gcZoomDisplay.attr('src', gcBase.gcDisplayDisplay.attr('src'))
.attr('alt', gcBase.gcDisplayDisplay.attr('alt'));
if (gcBase.config.zoomPosition != 'inner') {
gcBase.isAutoInnerZooming = false;
gcBase.config = $.extend(true, {}, gcBase._defaults, gcBase._options);
gcBase.gcZoom.appendTo(gcBase.element).removeClass('gc-zoom-inner');
}
var borderVal = parseFloat(gcBase.gcZoom.css('border-left-width')) * 2,
paddingVal = parseFloat(gcBase.gcDisplayArea.css('padding-top')) * 2,
zoomWidth = (gcBase.config.zoomPosition == 'inner') ? paddingVal : (borderVal + paddingVal),
zoomHeight = (gcBase.config.zoomPosition == 'inner') ? paddingVal : (borderVal + paddingVal);
for (var i = 0; i < 2; i++) {
if (gcBase.config.isZoomDiffWH && gcBase.config.zoomWidth > 0) {
zoomWidth += parseFloat(gcBase.config.zoomWidth) < gcBase.gcImageData[gcBase.current].width ?
parseFloat(gcBase.config.zoomWidth) : gcBase.gcImageData[gcBase.current].width;
} else { zoomWidth += gcBase.gcDisplayContainer.outerWidth(); }
if (gcBase.config.isZoomDiffWH && gcBase.config.zoomHeight > 0) {
zoomHeight += parseFloat(gcBase.config.zoomHeight) < gcBase.gcImageData[gcBase.current].height ?
parseFloat(gcBase.config.zoomHeight) : gcBase.gcImageData[gcBase.current].height;
} else { zoomHeight += gcBase.gcDisplayContainer.outerHeight(); }
if (gcBase.config.isZoomDiffWH == false) {
zoomWidth = zoomHeight;
}
if (gcBase.config.autoInnerZoom == true && gcBase.config.zoomPosition != 'inner') {
if (gcBase.element.outerWidth() + zoomWidth > $(window).width()) {
gcBase.isAutoInnerZooming = true;
gcBase.config.isZoomDiffWH = true; gcBase.config.zoomWidth = 0; gcBase.config.zoomHeight = 0;
if (i == 0) { zoomWidth = zoomHeight = paddingVal; }
} else { break; }
} else { break; }
if (gcBase.config.zoomPosition == 'inner') { break; }
}
gcBase.gcZoomContainer.css({ 'width': 0, 'height': 0 });
gcBase.gcZoom.css({ 'width': zoomWidth, 'height': zoomHeight });
gcBase.gcZoomContainer.css({ 'width': gcBase.gcZoom.outerWidth(), 'height': gcBase.gcZoom.outerHeight() });
if (gcBase.config.isZCapEnabled === true) {
var capTxt = $(gcBase.gcThumbsImg[gcBase.current]).data('gc-caption');
capTxt === undefined ? gcBase.gcCaption.hide() : (gcBase.gcCaption.show(), gcBase.gcCaptionDisplay.empty().append(capTxt));
var cssClass;
if (gcBase.isAutoInnerZooming === true) {
if (gcBase.config.capZType === 'out') {
gcBase.gcCaption.removeClass('gc-caption-outtop gc-caption-outbottom');
cssClass = gcBase.config.capZPos === 'top' ? 'gc-caption-intop' : 'gc-caption-inbottom';
gcBase.gcCaption.addClass(cssClass);
}
} else {
if ((gcBase.config.capZType === 'out') &&
(gcBase.gcCaption.hasClass('gc-caption-intop') || gcBase.gcCaption.hasClass('gc-caption-inbottom'))) {
gcBase.gcCaption.removeClass('gc-caption-intop gc-caption-inbottom');
cssClass = gcBase.config.capZPos === 'top' ? 'gc-caption-outtop' : 'gc-caption-outbottom';
gcBase.gcCaption.addClass(cssClass);
}
}
}
},
setupZoomPos: function () {
var gcBase = this;
if (gcBase.config.zoomPosition == 'inner' || gcBase.isAutoInnerZooming == true) {
gcBase.gcZoom.appendTo(gcBase.gcDisplayContainer).addClass('gc-zoom-inner');
}
else {
gcBase.gcZoom.appendTo(gcBase.element).removeClass('gc-zoom-inner');
if (gcBase.config.zoomPosition == 'left') {
gcBase.gcZoom.css({ 'right': (gcBase.element.outerWidth(true)), 'margin-right': gcBase.config.zoomMargin + 'px' });
}
else {
gcBase.gcZoom.css({ 'left': (gcBase.element.outerWidth(true)), 'margin-left': gcBase.config.zoomMargin + 'px' });
}
var topZ = gcBase.config.zoomAlignment == 'displayArea' ? 0 : gcBase.gcDisplayContainer.position().top
+ parseFloat(gcBase.gcDisplayContainer.css('margin-top'))
- parseFloat(gcBase.gcDisplayArea.css('padding-top'));
if (gcBase.config.thumbsPosition == 'top') {
var topT = gcBase.gcThumbsArea.outerHeight() + parseFloat(gcBase.config.thumbsMargin);
gcBase.gcZoom.css({ 'top': topZ + topT });
}
else {
gcBase.gcZoom.css({ 'top': topZ });
}
}
},
setupLens: function () {
var gcBase = this;
var percZoomWidth = Math.round(gcBase.gcZoomContainer.outerWidth() / gcBase.gcImageData[gcBase.current].width * 100);
var valueLensW = Math.round(gcBase.gcDisplayDisplay.outerWidth() * percZoomWidth / 100);
var percZoomHeight = Math.round(gcBase.gcZoomContainer.outerHeight() / gcBase.gcImageData[gcBase.current].height * 100);
var valueLensH = Math.round(gcBase.gcDisplayDisplay.outerHeight() * percZoomHeight / 100);
gcBase.gcLens.css({ 'width': (valueLensW), 'height': (valueLensH) });
gcBase.mousemoveHandler();
},
addLoader: function (obj) { //obj - the object that will contain the loader
var gcBase = this;
$(obj).prepend(gcBase.gcLoader.clone());
},
removeLoader: function (obj) {
var gcBase = this;
var loader = $(obj).find('.' + gcBase.gcLoadingClass);
if (loader.length) {
loader.remove();
}
},
setupThumbImg: function (obj, index) { // obj - li element
var gcBase = this;
var widthImg = gcBase.gcThumbsLi.outerWidth(),
heightImg = gcBase.gcThumbsLi.outerHeight(),
ratioImg, listItem = $(obj),
wRatio = widthImg / gcBase.gcImageData[index].width,
hRatio = heightImg / gcBase.gcImageData[index].height;
ratioImg = wRatio > hRatio ? wRatio : hRatio;
gcBase.gcThumbsImg[index].width = Math.ceil(gcBase.gcImageData[index].width * ratioImg, 10);
gcBase.gcThumbsImg[index].height = Math.ceil(gcBase.gcImageData[index].height * ratioImg, 10);
var percMarginLeft = ((gcBase.gcThumbsImg.eq(index).outerWidth() / 2) * 100) / (gcBase.gcThumbsLiDiv.outerWidth()),
percMarginTop = ((gcBase.gcThumbsImg.eq(index).outerHeight() / 2) * 100) / (gcBase.gcThumbsLiDiv.outerWidth());
gcBase.gcThumbsImg.eq(index).css({
'margin-top': "-" + percMarginTop + "%",
'margin-left': "-" + percMarginLeft + "%"
});
gcBase.gcThumbsLiDiv.eq(index).removeClass('gc-hide');
gcBase.removeLoader(gcBase.gcThumbsLi.eq(index));
gcBase.gcThumbsLiDiv.eq(index).removeClass('gc-hide');
gcBase.removeLoader(gcBase.gcThumbsLi.eq(index));
},
setupThumbs: function () {
var gcBase = this;
if (gcBase.config.thumbsPosition == 'right') {
gcBase.setupThumbsLR();
gcBase.gcDisplayArea.css({ 'top': '0', 'left': '0' });
gcBase.gcThumbsArea.css({ 'top': '0', 'left': gcBase.gcDisplayArea.outerWidth() + parseFloat(gcBase.config.thumbsMargin) });
}
if (gcBase.config.thumbsPosition == 'left') {
gcBase.setupThumbsLR();
gcBase.gcThumbsArea.css({ 'top': '0', 'left': '0' });
gcBase.gcDisplayArea.css({ 'top': '0', 'left': gcBase.gcThumbsArea.outerWidth() + parseFloat(gcBase.config.thumbsMargin) });
}
if (gcBase.config.thumbsPosition == 'bottom') {
gcBase.setupThumbsTB();
gcBase.gcDisplayArea.css({ 'top': '0', 'left': '0' });
gcBase.gcThumbsArea.css({ 'top': gcBase.gcDisplayArea.outerHeight() + parseFloat(gcBase.config.thumbsMargin), 'left': '0' });
}
if (gcBase.config.thumbsPosition == 'top') {
gcBase.setupThumbsTB();
gcBase.gcThumbsArea.css({ 'top': '0', 'left': '0' });
gcBase.gcDisplayArea.css({ 'top': gcBase.gcThumbsArea.outerHeight() + parseFloat(gcBase.config.thumbsMargin), 'left': '0' });
}
},
setupThumbsTB: function () {
var gcBase = this;
gcBase.gcThumbsArea.css('width', gcBase.gcDisplayArea.outerWidth());
var liMarginRight = parseFloat(gcBase.gcThumbsLi.css('margin-right')),
ratio = gcBase.config.widthDisplay / gcBase.config.heightDisplay,
widthLi = (gcBase.gcThumbsArea.outerWidth() / gcBase.config.nrThumbsPerRow - (gcBase.config.nrThumbsPerRow - 1) * liMarginRight / gcBase.config.nrThumbsPerRow),
heightLi = widthLi / ratio, widthLiPerc;
if (gcBase.config.isThumbsOneRow == true) {
widthLiPerc = (widthLi * 100) / (((widthLi + liMarginRight) * gcBase.gcThumbsLi.length) - liMarginRight);
}
else {
widthLiPerc = (widthLi * 100) / gcBase.gcThumbsArea.outerWidth();
}
gcBase.gcThumbsLi.css({ 'width': widthLiPerc + "%", 'height': heightLi });
gcBase.gcThumbsLiDiv.addClass('gc-hide');
for (var i = 0; i < gcBase.gcThumbsLi.length; i++) {
gcBase.addLoader(gcBase.gcThumbsLi[i]);
}
if (gcBase.config.isThumbsOneRow == true) {
gcBase.gcThumbsLi.last().css('margin-right', 0);
}
else {
gcBase.gcThumbsUl.find(':nth-child(' + gcBase.config.nrThumbsPerRow + 'n)').css('margin-right', 0);
gcBase.gcThumbsUl.find(':nth-child(n +' + (parseFloat(gcBase.config.nrThumbsPerRow) + 1) + ')').css('margin-top', liMarginRight + 'px');
}
if (gcBase.config.isThumbsOneRow == true) {
gcBase.gcThumbsUl.css({
'width': Math.ceil((widthLi * gcBase.gcThumbsLi.length + (gcBase.gcThumbsLi.length - 1) * liMarginRight)),
'height': Math.ceil(heightLi)
});
gcBase.gcThumbsArea.css('height', Math.ceil(heightLi));
}
else {
var totalRows = Math.ceil((gcBase.gcThumbsLi.length) / gcBase.config.nrThumbsPerRow);
var lHeight = Math.ceil(heightLi * totalRows + liMarginRight * (totalRows - 1));
gcBase.gcThumbsUl.css({ 'width': gcBase.gcThumbsArea.outerWidth(), 'height': lHeight });
gcBase.gcThumbsArea.css('height', lHeight);
}
if (gcBase.config.isThumbsOneRow == true) {
gcBase.gcThumbsAreaPrevious.removeClass('gc-hide');
gcBase.gcThumbsPrevious.css('margin-top', (-gcBase.gcThumbsPrevious.outerHeight() / 2));
gcBase.gcThumbsAreaNext.removeClass('gc-hide');
gcBase.gcThumbsNext.css('margin-top', (-gcBase.gcThumbsNext.outerHeight() / 2));
gcBase.setupSlider();
}
else {
gcBase.gcThumbsAreaPrevious.addClass('gc-hide');
gcBase.gcThumbsAreaNext.addClass('gc-hide');
}
if (gcBase.iOS) {
var brwLiWidth = gcBase.gcThumbsLi.outerWidth(), brwDiff = gcBase.gcThumbsArea.outerWidth() - (brwLiWidth * gcBase.config.nrThumbsPerRow + (gcBase.config.nrThumbsPerRow - 1) * liMarginRight);
gcBase.gcThumbsUl.find(':nth-child(' + gcBase.config.nrThumbsPerRow + 'n)').css('width', brwLiWidth + brwDiff);
}
},
setupThumbsLR: function () {
var gcBase = this;
gcBase.gcThumbsArea.css('height', gcBase.gcDisplayArea.outerHeight());
var liMargin = parseFloat(gcBase.gcThumbsLi.css('margin-bottom')),
ratio = gcBase.config.widthDisplay / gcBase.config.heightDisplay,
heightLi = (gcBase.gcThumbsArea.outerHeight() / gcBase.config.nrThumbsPerRow - (gcBase.config.nrThumbsPerRow - 1) * liMargin / gcBase.config.nrThumbsPerRow),
widthLi = heightLi * ratio, heightLiPerc;
heightLiPerc = (heightLi * 100) / (((heightLi + liMargin) * gcBase.gcThumbsLi.length) - liMargin);
gcBase.gcThumbsLi.css({ 'width': widthLi, 'height': heightLiPerc + "%" });
gcBase.gcThumbsLiDiv.addClass('gc-hide');
for (var i = 0; i < gcBase.gcThumbsLi.length; i++) {
gcBase.addLoader(gcBase.gcThumbsLi[i]);
}
gcBase.gcThumbsLi.last().css('margin-bottom', 0);
gcBase.gcThumbsUl.css({
'width': Math.ceil(widthLi),
'height': Math.ceil((((heightLi + liMargin) * gcBase.gcThumbsLi.length) - liMargin))
});
gcBase.gcThumbsArea.css('width', Math.ceil(widthLi));
gcBase.gcThumbsAreaPrevious.removeClass('gc-hide');
gcBase.gcThumbsPrevious.css('margin-left', (-gcBase.gcThumbsPrevious.outerWidth() / 2));
gcBase.gcThumbsAreaNext.removeClass('gc-hide');
gcBase.gcThumbsNext.css('margin-left', (-gcBase.gcThumbsNext.outerWidth() / 2));
gcBase.setupSlider();
if (gcBase.iOS) {
var brwLiHeight = gcBase.gcThumbsLi.outerHeight();
var brwDiff = gcBase.gcThumbsArea.outerHeight() - (brwLiHeight * gcBase.config.nrThumbsPerRow + (gcBase.config.nrThumbsPerRow - 1) * liMargin);
gcBase.gcThumbsUl.find(':nth-child(' + gcBase.config.nrThumbsPerRow + 'n)').css('height', brwLiHeight + brwDiff);
}
},
setupSlider: function () {
var gcBase = this;
if (gcBase.gcTotalThumbsImg <= gcBase.config.nrThumbsPerRow) {
gcBase.gcThumbsAreaPrevious.addClass('gc-hide');
gcBase.gcThumbsAreaNext.addClass('gc-hide');
return;
}
gcBase.gcThumbsAreaPrevious.removeClass('gc-disabled');
gcBase.gcThumbsAreaNext.removeClass('gc-disabled');
if (gcBase.currentSlide == 0) {
gcBase.gcThumbsAreaPrevious.addClass('gc-disabled');
}
if (gcBase.currentSlide == Math.floor((gcBase.gcThumbsLi.length - 1) / gcBase.config.nrThumbsPerRow)) {
gcBase.gcThumbsAreaNext.addClass('gc-disabled');
}
},
update: function () {
var gcBase = this;
var altTxt;
//1.
if (gcBase.config.colorActiveThumb != -1) {
gcBase.element.find('.gc-active').css('border-color', "");
}
gcBase.gcThumbsLi.removeClass('gc-active').eq(gcBase.current).addClass('gc-active');
if (gcBase.config.colorActiveThumb != -1) {
gcBase.element.find('.gc-active').css('border-color', gcBase.config.colorActiveThumb);
}
//2.
altTxt = gcBase.gcThumbsLi.eq(gcBase.current).find('img').attr('alt');
if (altTxt === undefined) altTxt = 'image';
gcBase.gcDisplayDisplay.attr('src', gcBase.gcThumbsLi.eq(gcBase.current).find('img').attr('src'))
.attr('alt', altTxt);
//3.
gcBase.setupDisplayDisplay();
gcBase.setupZoom();
gcBase.setupLens();
gcBase.setupZoomPos();
},
animateImage: function () {
var gcBase = this;
gcBase.gcDisplayDisplay.stop(true).animate({ opacity: 0.5 }, 200, function () {
if ($('body').hasClass('gc-noscroll')) { // If OverlayArea is shown
gcBase.gcOverlayDisplay.animate({ opacity: 0 }, 200, function () {
gcBase.update();
gcBase.setupOverlay();
gcBase.gcOverlayDisplay.animate({ opacity: 1 }, 500);
});
}
if (!$('body').hasClass('gc-noscroll')) {
gcBase.update();
}
gcBase.gcDisplayDisplay.animate({ opacity: 1 }, 500, function () {
gcBase.gcZoomDisplay.attr('src', gcBase.gcDisplayDisplay.attr('src'))
.attr('alt', gcBase.gcDisplayDisplay.attr('alt'));
});
});
},
nextImage: function () {
var gcBase = this;
gcBase.old = gcBase.current;
gcBase.current = (gcBase.current == (gcBase.gcThumbsLi.length - 1)) ? 0 : gcBase.current + 1;
gcBase.slide('true', '');
gcBase.animateImage();
},
previousImage: function () {
var gcBase = this;
gcBase.old = gcBase.current;
gcBase.current = (gcBase.current == 0) ? (gcBase.gcThumbsLi.length - 1) : gcBase.current - 1;
gcBase.slide('true', '');
gcBase.animateImage();
},
slide: function (isImageChange, slideChange) {//isImageChange: true || false; slideChange: previous || next
var gcBase = this;
if (gcBase.config.isThumbsOneRow == false && (gcBase.config.thumbsPosition == 'bottom' || gcBase.config.thumbsPosition == 'top')) {
return;
}
var nextSlide = 0;
if (isImageChange == 'true') {
nextSlide = Math.floor(gcBase.current / gcBase.config.nrThumbsPerRow);
}
else {
if (slideChange == 'previous') {
nextSlide = 0;
if (gcBase.currentSlide > 0) {
nextSlide = gcBase.currentSlide - 1;
}
}
else {
nextSlide = Math.floor((gcBase.gcThumbsLi.length - 1) / gcBase.config.nrThumbsPerRow);
if (gcBase.currentSlide < nextSlide) {
nextSlide = gcBase.currentSlide + 1;
}
}
}
if (nextSlide == gcBase.currentSlide)
return;
gcBase.currentSlide = nextSlide;
var vMargin;
//Making the slide
if (gcBase.config.thumbsPosition == 'bottom' || gcBase.config.thumbsPosition == 'top') {
vMargin = gcBase.gcThumbsArea.outerWidth() + parseFloat(gcBase.gcThumbsLi.css('margin-right'));
gcBase.gcThumbsUl.animate({ left: (-(nextSlide * vMargin)) + 'px' }, gcBase.config.speed);
} else {
vMargin = gcBase.gcThumbsArea.outerHeight() + parseFloat(gcBase.gcThumbsLi.css('margin-bottom'));
gcBase.gcThumbsUl.animate({ top: (-(nextSlide * vMargin)) + 'px' }, gcBase.config.speed);
}
var transitionendfn = $.proxy(function () {
this.isAnimating = false;
this.setupSlider();
}, gcBase);
transitionendfn.call();
},
mousemoveHandler: function (event) {
var gcBase = this;
if (event !== undefined) {
if (gcBase.isTouchMove == true) {
if (event.originalEvent.touches.length == 1) {
var touch = event.originalEvent.touches[0];
gcBase.currentMousePos.x = touch.pageX;
gcBase.currentMousePos.y = touch.pageY;
}
}
else {
gcBase.currentMousePos.x = event.pageX;
gcBase.currentMousePos.y = event.pageY;
}
}
if (gcBase.currentMousePos.x == -1 && gcBase.currentMousePos.y == -1) {
return;
}
gcBase.calcMousePos(gcBase.currentMousePos);
if ((gcBase.config.isSlowZoom == false) || (gcBase.config.isSlowZoom == true && event == undefined)) {
gcBase.gcZoomDisplay.css({ 'top': gcBase.newZoom.top, 'left': gcBase.newZoom.left });
}
if ((gcBase.config.isSlowLens == false) || (gcBase.config.isSlowLens == true && event == undefined)) {
gcBase.gcLens.css({ 'top': gcBase.newLens.top, 'left': gcBase.newLens.left });
}
},
mouseenterHandler: function (event, oEventTrigger) {
var gcBase = this;
if (gcBase.isMouseEventsOn === false) return;
if (oEventTrigger !== undefined) event = oEventTrigger;
if (event !== undefined) {
if (gcBase.isTouchMove === true) {
if (event.originalEvent.touches.length == 1) {
var touch = event.originalEvent.touches[0];
gcBase.currentMousePos.x = touch.pageX;
gcBase.currentMousePos.y = touch.pageY;
}
}
else {
gcBase.currentMousePos.x = event.pageX;
gcBase.currentMousePos.y = event.pageY;
}
}
gcBase.calcMousePos(gcBase.currentMousePos);
gcBase.currentZoom.top = gcBase.newZoom.top; gcBase.currentZoom.left = gcBase.newZoom.left;
gcBase.currentLens.top = gcBase.newLens.top; gcBase.currentLens.left = gcBase.newLens.left;
gcBase.gcZoomDisplay.css({ 'top': gcBase.newZoom.top, 'left': gcBase.newZoom.left });
gcBase.gcLens.css({ 'top': gcBase.newLens.top, 'left': gcBase.newLens.left });
if (gcBase.zooming == false) {
if (gcBase.config.zoomPosition == 'inner' || gcBase.isAutoInnerZooming == true) {
gcBase.gcZoom.fadeIn(gcBase.config.speed);
} else {
gcBase.gcLens.fadeIn(gcBase.config.speed);
gcBase.gcZoom.fadeIn(gcBase.config.speed);
}
}
if (gcBase.config.isSlowZoom == true) {
clearTimeout(gcBase.slowZoomTimer);
gcBase.zoomSlowDown();
}
if (gcBase.config.isSlowLens == true) {
clearTimeout(gcBase.slowLensTimer);
gcBase.lensSlowDown();
}
gcBase.zooming = true;
},
mouseleaveHandler: function (event) {
var gcBase = this;
gcBase.gcLens.stop()
.hide();
gcBase.gcZoom.stop()
.fadeOut(gcBase.config.speed);
if (event !== undefined) {
if (gcBase.isTouchMove == true) {
if (event.originalEvent.touches.length == 1) {
var touch = event.originalEvent.touches[0];
gcBase.currentMousePos.x = touch.pageX;
gcBase.currentMousePos.y = touch.pageY;
}
}
else {
gcBase.currentMousePos.x = event.pageX;
gcBase.currentMousePos.y = event.pageY;
}
}
if (gcBase.config.isSlowZoom == true) {
clearTimeout(gcBase.slowZoomTimer);
}
if (gcBase.config.isSlowLens == true) {
clearTimeout(gcBase.slowLensTimer);
}
gcBase.zooming = false;
},
touchstartDC: function (event) {
event.preventDefault();
},
touchmoveDC: function (event) {
var gcBase = this;
if (gcBase.isTouchMove == false) {
gcBase.isTouchMove = true;
gcBase.gcDisplayContainer.trigger('mouseenter.glasscase', event);
}
gcBase.mousemoveHandler(event);
event.preventDefault();
},
touchendDC: function (event) {
var gcBase = this;
if (gcBase.isTouchMove == true) {
gcBase.mouseleaveHandler(event);
gcBase.isTouchMove = false;
}
else { gcBase.toggleOverlay(); }
event.preventDefault();
},
calcMousePos: function (currentMousePos) {
var gcBase = this;
var imageContainerOffset = gcBase.gcDisplayContainer.offset();
var mouseXRelative = gcBase.currentMousePos.x - imageContainerOffset.left,
mouseYRelative = gcBase.currentMousePos.y - imageContainerOffset.top;
var imageDisplayWidth = gcBase.gcDisplayDisplay.outerWidth(),
imageDisplayHeight = gcBase.gcDisplayDisplay.outerHeight();
var lensWidth = gcBase.gcLens.outerWidth(),
lensHeight = gcBase.gcLens.outerHeight(),
lensTop = mouseYRelative - Math.round(lensHeight / 2),
lensLeft = mouseXRelative - Math.round(lensWidth / 2); // 2 -> the middle
var ratio = gcBase.gcImageData[gcBase.current].width / imageDisplayWidth,
zoomTop = -lensTop * ratio, zoomLeft = -lensLeft * ratio;
if (mouseYRelative - lensHeight / 2 < 0) {
lensTop = 0; zoomTop = 0;
}
if (mouseYRelative + lensHeight / 2 > 0 + imageDisplayHeight) {
lensTop = imageDisplayHeight - lensHeight;
zoomTop = -(gcBase.gcImageData[gcBase.current].height - gcBase.gcZoom.outerHeight());
}
if (mouseXRelative - lensWidth / 2 < 0) {
lensLeft = 0;
zoomLeft = 0;
}
if (mouseXRelative + lensWidth / 2 > 0 + imageDisplayWidth) {
lensLeft = imageDisplayWidth - lensWidth;
zoomLeft = -(gcBase.gcImageData[gcBase.current].width - gcBase.gcZoom.outerWidth());
}
gcBase.newZoom.left = zoomLeft;
gcBase.newZoom.top = zoomTop;
gcBase.newLens.left = lensLeft;
gcBase.newLens.top = lensTop;
},
zoomSlowDown: function () {
var gcBase = this;
var diffZoomPos = { left: 0, top: 0 },
moveZoomPos = { left: 0, top: 0 };
//1.
diffZoomPos.left = gcBase.newZoom.left - gcBase.currentZoom.left;
diffZoomPos.top = gcBase.newZoom.top - gcBase.currentZoom.top;
//2.
moveZoomPos.left = -diffZoomPos.left / (gcBase.config.speedSlowZoom / 100);
moveZoomPos.top = -diffZoomPos.top / (gcBase.config.speedSlowZoom / 100);
//3.
gcBase.currentZoom.left = gcBase.currentZoom.left - moveZoomPos.left;
gcBase.currentZoom.top = gcBase.currentZoom.top - moveZoomPos.top;
//4.
if (diffZoomPos.left < 1 && diffZoomPos.left > -1) {
gcBase.currentZoom.left = gcBase.newZoom.left;
}
if (diffZoomPos.top < 1 && diffZoomPos.top > -1) {
gcBase.currentZoom.top = gcBase.newZoom.top;
}
//5.
gcBase.gcZoomDisplay.css({ 'top': gcBase.currentZoom.top, 'left': gcBase.currentZoom.left });
gcBase.slowZoomTimer = setTimeout(function () { gcBase.zoomSlowDown(); }, 25);
},
lensSlowDown: function () {
var gcBase = this;
var diffLensPos = { left: 0, top: 0 },
moveLensPos = { left: 0, top: 0 };
//1.
diffLensPos.left = gcBase.newLens.left - gcBase.currentLens.left;
diffLensPos.top = gcBase.newLens.top - gcBase.currentLens.top;
//2.
moveLensPos.left = -diffLensPos.left / (gcBase.config.speedSlowLens / 100);
moveLensPos.top = -diffLensPos.top / (gcBase.config.speedSlowLens / 100);
//3.
gcBase.currentLens.left = gcBase.currentLens.left - moveLensPos.left;
gcBase.currentLens.top = gcBase.currentLens.top - moveLensPos.top;
//4.
if (diffLensPos.left < 1 && diffLensPos.left > -1) {
gcBase.currentLens.left = gcBase.newLens.left;
}
if (diffLensPos.top < 1 && diffLensPos.top > -1) {
gcBase.currentLens.top = gcBase.newLens.top;
}
//5.
gcBase.gcLens.css('top', gcBase.currentLens.top);
gcBase.gcLens.css('left', gcBase.currentLens.left);
gcBase.slowLensTimer = setTimeout(function () { gcBase.lensSlowDown(); }, 25);
},
setupOverlay: function () {
var gcBase = this;
var isNatSizeSMScr = ((gcBase.gcImageData[gcBase.current].width <= gcBase.gcOverlayArea.outerWidth()) &&
(gcBase.gcImageData[gcBase.current].height <= gcBase.gcOverlayArea.outerHeight()));
gcBase.gcOverlayDisplay.attr('src', gcBase.gcDisplayDisplay.attr('src'))
.attr('alt', gcBase.gcDisplayDisplay.attr('alt'));
if (isNatSizeSMScr || (gcBase.config.isOverlayFullImage == true)) {
gcBase.gcOverlayCompress.hide();
gcBase.gcOverlayEnlarge.hide();
gcBase.overlayNatSizes();
}
else {
gcBase.gcOverlayCompress.hide();
gcBase.gcOverlayEnlarge.show();
gcBase.gcOverlayArea.removeClass('gc-natsize');
gcBase.overlayFitSizes();
}
},
overlayNatSizes: function () {
var gcBase = this;
var hOC = gcBase.gcOverlayContainer.outerHeight();
var wOC = gcBase.gcOverlayContainer.outerWidth();
gcBase.gcOverlayGContainer.removeClass('gc-overlay-fit');
gcBase.gcOverlayDisplay.removeClass('gc-overlay-display-center gc-overlay-display-hcenter gc-overlay-display-vcenter');
if (gcBase.gcImageData[gcBase.current].height <= hOC &&
gcBase.gcImageData[gcBase.current].width <= wOC) {
gcBase.gcOverlayDisplay.addClass('gc-overlay-display-center');
} else {
if (gcBase.gcImageData[gcBase.current].height <= hOC) {
gcBase.gcOverlayDisplay.addClass('gc-overlay-display-vcenter');
}
if (gcBase.gcImageData[gcBase.current].width <= wOC) {
gcBase.gcOverlayDisplay.addClass('gc-overlay-display-hcenter');
}
}
},
overlayFitSizes: function () {
var gcBase = this;
gcBase.gcOverlayGContainer.addClass('gc-overlay-fit');
gcBase.gcOverlayDisplay.removeClass('gc-overlay-display-hcenter gc-overlay-display-vcenter')
.addClass('gc-overlay-display-center');
},
toggleOverlayImgSize: function () {
var gcBase = this;
if (!gcBase.gcOverlayArea.hasClass('gc-natsize')) {
gcBase.gcOverlayArea.addClass('gc-natsize');
gcBase.gcOverlayEnlarge.hide();
gcBase.gcOverlayCompress.show();
gcBase.overlayNatSizes();
}
else {
gcBase.gcOverlayEnlarge.show();
gcBase.gcOverlayCompress.hide();
gcBase.gcOverlayArea.removeClass('gc-natsize');
gcBase.overlayFitSizes();
}
},
toggleOverlay: function () {
var gcBase = this;
if ($('body').hasClass('gc-noscroll')) { //overlay on
gcBase.fadeOutOverlay();
}
else {
if (gcBase.config.isOverlayEnabled == false)
return;
gcBase.gcOverlayArea.fadeIn(gcBase.config.speed);
$('body').addClass('gc-noscroll');
gcBase.setupOverlay();
}
},
fadeOutOverlay: function () {
var gcBase = this;
$('body').removeClass('gc-noscroll');
gcBase.gcOverlayArea.fadeOut(gcBase.config.speed);
},
resizeGC: function () {
var gcBase = this;
gcBase.element.css({ 'height': '0', 'width': '0' });
gcBase.setup();
gcBase.gcThumbsImg.each(function (index) {
//2.
gcBase.setupThumbImg(gcBase.gcThumbsLi.eq(index), index);
//3.
gcBase.removeLoader(gcBase.gcThumbsLi.eq(index));
gcBase.gcThumbsLi.eq(index).find('.gc-li-display-container').removeClass('gc-hide');
//4.
if (gcBase.current == index) {
gcBase.removeLoader(gcBase.gcDisplayArea);
gcBase.gcDisplayContainer.removeClass('gc-hide');
gcBase.setupDisplayDisplay();
gcBase.setupLens();
}
});
gcBase.update();
if (!gcBase.config.isOverlayFullImage) {
gcBase.setupOverlay();
}
},
showDAIcons: function () {
var gcBase = this;
if (gcBase.gcTotalThumbsImg > 1) {
gcBase.gcDisplayPrevious.show();
gcBase.gcDisplayNext.show();
}
if (gcBase.config.isDownloadEnabled == true) { gcBase.gcDisplayDownload.show(); }
},
hideDAIcons: function () {
var gcBase = this;
if (gcBase.gcTotalThumbsImg > 1) {
gcBase.gcDisplayPrevious.hide();
gcBase.gcDisplayNext.hide();
}
if (gcBase.config.isDownloadEnabled == true) { gcBase.gcDisplayDownload.hide(); }
},
changeThumbs: function (index) {
var gcBase = this;
if (gcBase.current != index) {
gcBase.old = gcBase.current;
gcBase.current = index;
gcBase.animateImage();
}
},
initEvents: function () {
var gcBase = this;
//Display
if (gcBase.config.isZoomEnabled === true) {
gcBase.isMouseEventsOn = true;
gcBase.gcDisplayContainer.on('touchstart.glasscase', $.proxy(gcBase.touchstartDC, gcBase))
.on('touchmove.glasscase', $.proxy(gcBase.touchmoveDC, gcBase))
.on('touchend.glasscase', $.proxy(gcBase.touchendDC, gcBase));
gcBase.gcDisplayContainer.on('mousemove.glasscase', $.proxy(gcBase.mousemoveHandler, gcBase))
.on('mouseenter.glasscase', $.proxy(gcBase.mouseenterHandler, gcBase))
.on('mouseenter.glasscase', $.proxy(gcBase.config.mouseEnterDisplayCB, gcBase))
.on('mouseleave.glasscase', $.proxy(gcBase.mouseleaveHandler, gcBase))
.on('mouseleave.glasscase', $.proxy(gcBase.config.mouseLeaveDisplayCB, gcBase));
}
if (gcBase.config.isShowAlwaysIcons != true) {
gcBase.gcDisplayArea
.on('mouseenter.glasscaseDA', $.proxy(gcBase.showDAIcons, gcBase))
.on('mouseleave.glasscaseDA', $.proxy(gcBase.hideDAIcons, gcBase))
.on('mousemove.glasscaseDA', function (event) {
gcBase.showDAIcons();
clearTimeout(gcBase.mouseTimer);
gcBase.mouseTimer = setTimeout(function () { gcBase.hideDAIcons(); }, gcBase.config.speedHideIcons);
})
.on('touchmove.glasscaseDA', function (event) {
gcBase.showDAIcons();
clearTimeout(gcBase.mouseTimer);
gcBase.mouseTimer = setTimeout(function () { gcBase.hideDAIcons(); }, gcBase.config.speedHideIcons);
event.preventDefault();
});
}
gcBase.gcDisplayContainer.on('click.glasscase', function (event) {
gcBase.toggleOverlay();
});
gcBase.gcDisplayDownload.on('click.glasscase', function (event) {
var canvas = document.createElement('canvas');
canvas.width = gcBase.gcImageData[gcBase.current].width;
canvas.height = gcBase.gcImageData[gcBase.current].height;
var context = canvas.getContext('2d');
context.drawImage(gcBase.gcDisplayDisplay[0], 0, 0);
var blob = new Blob();
canvas.toBlob(function (blob) {
saveAs(
blob
, gcBase.gcDisplayDisplay.attr('src').replace(/^.*[\\\/]/, '')
);
}, 'image/png');
});
gcBase.gcDisplayPrevious.on('click.glasscase', function (event) {
gcBase.previousImage();
});
gcBase.gcDisplayNext.on('click.glasscase', function (event) {
gcBase.nextImage();
});
//Overlay
gcBase.gcOverlayPrevious.on('click.glasscase', function (event) {
gcBase.previousImage();
});
gcBase.gcOverlayNext.on('click.glasscase', function (event) {
gcBase.nextImage();
});
gcBase.gcOverlayClose.on('click.glasscase', function (event) {
gcBase.toggleOverlay();
});
gcBase.gcOverlayContainer.on('click.glasscase', function (event) {
gcBase.toggleOverlay();
});
gcBase.gcOverlayDisplay.on('mouseenter.glasscase', function (event) {
gcBase.gcOverlayContainer.off('click.glasscase');
});
gcBase.gcOverlayDisplay.on('mouseleave.glasscase', function (event) {
gcBase.gcOverlayContainer.on('click.glasscase', function (event) {
gcBase.toggleOverlay();
});
});
if (!gcBase.config.isOverlayFullImage) {
gcBase.gcOverlayDisplay.on('dblclick.glasscase', function (event) {
gcBase.toggleOverlayImgSize();
});
gcBase.gcOverlayEnlarge.on('click.glasscase', function (event) {
gcBase.toggleOverlayImgSize();
});
gcBase.gcOverlayCompress.on('click.glasscase', function (event) {
gcBase.toggleOverlayImgSize();
});
}
//General
$(document).on('keydown', function (event) {
if (gcBase.config.isKeypressEnabled == true) {
if (event.keyCode == 37) { //<-
gcBase.previousImage();
}
if (event.keyCode == 39) {//->
gcBase.nextImage();
}
}
if (event.keyCode == 27) { //esc
gcBase.fadeOutOverlay();
}
});
$(window).resize(function () {
clearTimeout(gcBase.resizeTimer);
gcBase.resizeTimer = setTimeout(function () { gcBase.resizeGC(); }, 100);
});
//Thumbs
gcBase.gcThumbsLi.on('click.glasscase', function (event) {
var idx = $(this).index(); gcBase.changeThumbs(idx);
});
if (gcBase.config.isHoverShowThumbs == true) {
gcBase.gcThumbsLi.on('mouseenter', function (event) {
var idx = $(this).index(); gcBase.changeThumbs(idx);
});
}
gcBase.gcThumbsAreaPrevious.on('click.glasscase', function (event) {
gcBase.slide('false', 'previous');
});
gcBase.gcThumbsAreaNext.on('click.glasscase', function (event) {
gcBase.slide('false', 'next');
});
}
};
//4. Attaching the plugin to the $ object
$.fn.glassCase = function (options) {
this.each(function () {
var instance = $.data(this, 'gcglasscase');
if (!instance) {
$.data(this, 'gcglasscase', new GlassCase($(this), options));
}
});
};
})(jQuery, window, document);
