Skip to content
Browse files

initial commit

  • Loading branch information...
0 parents commit ce006fdc77d5a6751885365d3581fde4d1cb58a5 @botelho botelho committed Nov 6, 2012
11 README.md
@@ -0,0 +1,11 @@
+
+GammaGallery
+=========
+
+Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account.
+
+[article on Codrops](http://tympanus.net/codrops/?p=11836)
+
+[demo](http://tympanus.net/Development/GammaGallery/)
+
+Licensed under the MIT License
6 README.txt
@@ -0,0 +1,6 @@
+Created by Codrops
+
+Licensed under the MIT license.
+http://www.opensource.org/licenses/mit-license.php
+
+Please read more about our license concerning demos, tutorials and articles: http://tympanus.net/codrops/licensing/
164 css/demo.css
@@ -0,0 +1,164 @@
+/* General Demo Style */
+@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+
+html { height: 100%; }
+
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+}
+
+/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+.clearfix:before,
+.clearfix:after {
+ content: " ";
+ display: table;
+}
+
+.clearfix:after {
+ clear: both;
+}
+
+body {
+ font-family: 'Lato', Calibri, Arial, sans-serif;
+ background: #fff;
+ font-weight: 300;
+ font-size: 15px;
+ color: #333;
+ -webkit-font-smoothing: antialiased;
+ overflow-y: scroll;
+ overflow-x: hidden;
+}
+
+a {
+ color: #555;
+ text-decoration: none;
+}
+
+.container {
+ width: 100%;
+ position: relative;
+}
+
+.main {
+ padding: 30px 20px 100px 20px;
+ max-width: 1580px;
+ margin: 0 auto;
+}
+
+.main > header {
+ padding: 0 10px 30px;
+}
+
+.main > header h1 {
+ font-size: 34px;
+ line-height: 38px;
+ margin: 0;
+ font-weight: 700;
+ color: #333;
+ float: left;
+}
+
+.main > header h1 span {
+ display: block;
+ font-size: 20px;
+ font-weight: 300;
+}
+
+.main h2 {
+ font-size: 38px;
+ font-weight: 300;
+ text-shadow: 0 1px 0 rgba(255,255,255,0.9);
+ padding: 10px 0 0 0;
+ margin-bottom: 20px;
+ border-top: 1px solid #f7f7f7;
+}
+
+/* Header Style */
+.codrops-top {
+ line-height: 24px;
+ font-size: 11px;
+ background: #fff;
+ background: rgba(255, 255, 255, 0.5);
+ text-transform: uppercase;
+ z-index: 9999;
+ position: relative;
+ box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
+}
+
+.codrops-top a {
+ padding: 0px 10px;
+ letter-spacing: 1px;
+ color: #333;
+ text-shadow: 0 -1px 0 #fff;
+ display: inline-block;
+}
+
+.codrops-top a:hover {
+ background: rgba(255,255,255,0.8);
+ color: #000;
+}
+
+.codrops-top span.right {
+ float: right;
+}
+
+.codrops-top span.right a {
+ float: left;
+ display: block;
+}
+
+/* Demo Buttons Style */
+.codrops-demos {
+ float: right;
+ padding-top: 10px;
+}
+
+.codrops-demos a {
+ display: inline-block;
+ margin: 10px;
+ color: #666;
+ font-weight: 700;
+ line-height: 30px;
+ border-bottom: 4px solid transparent;
+}
+
+.codrops-demos a:hover {
+ color: #000;
+ border-color: #000;
+}
+
+.codrops-demos a.current-demo,
+.codrops-demos a.current-demo:hover {
+ color: #aaa;
+ border-color: #aaa;
+}
+
+.support-note span{
+ color: #ac375d;
+ font-size: 16px;
+ display: none;
+ font-weight: bold;
+ text-align: center;
+ padding: 5px 0;
+}
+
+.loadmore {
+ padding: 10px;
+ background: #ddd;
+ color: #fff;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ font-weight: 700;
+ text-align: center;
+ cursor: pointer;
+ margin: 10px 4px;
+ display: none;
+}
+
+.loadmore:hover {
+ background: #333;
+}
3 css/noJS.css
@@ -0,0 +1,3 @@
+.gamma-loading {
+ background-image: none;
+}
314 css/style.css
@@ -0,0 +1,314 @@
+@import url('demo.css');
+
+/* Entypo Icon Font */
+@font-face {
+ font-family: 'entypo-selected';
+ src: url("../font/entypo-selected.eot");
+ src:
+ url("../font/entypo-selected.eot?#iefix") format('embedded-opentype'),
+ url("../font/entypo-selected.woff") format('woff'),
+ url("../font/entypo-selected.ttf") format('truetype'),
+ url("../font/entypo-selected.svg#entypo-selected") format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+/* Gamma Gallery Style */
+
+.gamma-container {
+ min-height: 200px;
+}
+
+.gamma-gallery {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ position: relative;
+}
+
+/* http://nicolasgallagher.com/micro-clearfix-hack/ */
+.gamma-gallery:before,
+.gamma-gallery:after {
+ content: " ";
+ display: table;
+}
+
+.gamma-gallery:after {
+ clear: both;
+}
+
+/**
+ * For IE 6/7 only
+ * Include this rule to trigger hasLayout and contain floats.
+.gamma-gallery {
+ *zoom: 1;
+}
+ */
+
+.gamma-gallery li {
+ display: block;
+ position: relative;
+ cursor: pointer;
+ float: left;
+ padding: 4px;
+}
+
+.gamma-gallery li img {
+ max-width: 100%;
+ width: auto;
+ height: auto;
+ display: block;
+}
+
+.gamma-description {
+ background: #fff;
+ background: rgba(255, 255, 255, 0.6);
+ position: absolute;
+ top: 20px;
+ left: 20px;
+ bottom: 20px;
+ right: 20px;
+ text-align: center;
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+ filter: alpha(opacity=0);
+ opacity: 0;
+ -webkit-transition: opacity 0.4s ease-in-out;
+ -moz-transition: opacity 0.4s ease-in-out;
+ -ms-transition: opacity 0.4s ease-in-out;
+ -o-transition: opacity 0.4s ease-in-out;
+ transition: opacity 0.4s ease-in-out;
+}
+
+.no-touch .gamma-gallery li:hover .gamma-description {
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+ filter: alpha(opacity=80);
+ opacity: 1;
+}
+
+.gamma-description:before {
+ content: '';
+ height: 100%;
+}
+
+.gamma-description:before,
+.gamma-description h3 {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.gamma-description h3 {
+ width: 100%;
+ padding: 0 20px;
+ font-weight: 400;
+ text-transform: uppercase;
+ font-size: 16px;
+ letter-spacing: 2px;
+}
+
+.gamma-buttons {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ z-index: 10001;
+}
+
+.gamma-buttons button {
+ float: left;
+ background: #333;
+ color: #fff;
+ display: block;
+ width: 30px;
+ height: 30px;
+ font-size: 14px;
+ margin-left: 5px;
+ cursor: pointer;
+ border: none;
+ outline: none;
+}
+
+.gamma-buttons button:before,
+.gamma-nav span:before {
+ font-family: 'entypo-selected';
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+ display: block;
+ text-align: center;
+ opacity: 0.7;
+ outline: none;
+}
+
+.no-touch .gamma-buttons button:hover {
+ background: #666;
+}
+
+button.gamma-btn-close:before {
+ content: '\2715';
+}
+
+button.gamma-btn-ssplay:before {
+ content: '\25b6';
+}
+
+button.gamma-btn-sspause:before {
+ content: '\2389';
+}
+
+.gamma-single-view {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10000;
+ text-align: center;
+ display:none;
+}
+
+.gamma-overlay {
+ background: #000;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ display: none;
+ z-index: 9999;
+}
+
+.gamma-single-view img {
+ position: absolute;
+ cursor: pointer;
+}
+
+.gamma-description-wrapper {
+ background: rgba(0,0,0,0.7);
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ z-index: 10;
+ padding: 5px 0;
+}
+
+.gamma-single-view .gamma-description {
+ background: transparent;
+ position: relative;
+ bottom: auto;
+ left: auto;
+ right: auto;
+ top: auto;
+}
+
+.gamma-single-view .gamma-description h3 {
+ font-size: 15px;
+ padding: 5px 0;
+ color: #fff;
+}
+
+.gamma-nav span {
+ position: absolute;
+ display: block;
+ width: 20px;
+ height: 38px;
+ top: 50%;
+ margin-top: -19px;
+ left: 20px;
+ cursor: pointer;
+ text-align: center;
+ -webkit-transition: all 0.3s ease;
+ -moz-transition: all 0.3s ease;
+ -ms-transition: all 0.3s ease;
+ -o-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+.gamma-nav span.gamma-next {
+ left: auto;
+ right: 20px;
+}
+
+.gamma-nav span:before {
+ color: #fff;
+ opacity: 0.7;
+ font-size: 40px;
+}
+
+.gamma-nav span:hover:before {
+ opacity: 1;
+}
+
+.gamma-nav span:before {
+ display: block;
+ margin: 0;
+ width: auto;
+}
+
+.gamma-nav span.gamma-prev:before {
+ content: '\e75d';
+}
+
+.gamma-nav span.gamma-next:before {
+ content: '\e75e';
+}
+
+.gamma-img-fly {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 99999;
+}
+
+/* Loaders */
+
+.gamma-loading {
+ background: transparent url(../images/loader_light.gif) no-repeat center center;
+}
+
+.gamma-single-view.gamma-loading {
+ background: transparent url(../images/loader_dark.gif) no-repeat center center;
+}
+
+
+/* Make some things unselectable. Remove where selection is needed: */
+
+.gamma-container img,
+.gamma-nav span,
+.gamma-buttons button,
+.gamma-description-wrapper,
+.gamma-description,
+.gamma-description h3 {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+@media screen and (max-width: 750px) {
+
+ .gamma-description {
+ top: 10px;
+ left: 10px;
+ bottom: 10px;
+ right: 10px;
+ }
+
+ .gamma-description h3 {
+ font-size: 14px;
+ padding: 0 5px;
+ }
+
+}
+
+@media screen and (max-width: 500px) {
+
+ .gamma-buttons {
+ float: left;
+ clear: both;
+ }
+
+}
12 font/LICENSE.txt
@@ -0,0 +1,12 @@
+Font license info
+
+
+## Font Awesome
+
+ Copyright (C) 2012 by Dave Gandy
+
+ Author: Dave Gandy
+ License: CC BY 3.0 (http://creativecommons.org/licenses/by/3.0/)
+ Homepage: http://fortawesome.github.com/Font-Awesome/
+
+
48 font/README.txt
@@ -0,0 +1,48 @@
+This webfont is generated by http://fontello.com open source project.
+
+
+================================================================================
+Please, note, that you should obey original font licences, used to make this
+webfont pack. Details available in LICENSE.txt file.
+
+- Usually, it's enougth to publish content of LICENSE.txt file somewhere on your
+ site in "About" section.
+
+- If your project is open-source, usually, it will be ok to make LICENSE.txt
+ file publically available in your repository.
+
+- Fonts, used in Fontello, don't require to make clickable links on your site.
+ But any kind of additional authors crediting is welcome.
+================================================================================
+
+
+Attention for server setup (IE users and others)
+------------------------------------------------
+
+You MUST setup server to reply with proper `mime-types` for font files. In other
+case, some browsers will fail to show fonts.
+
+Usually, `apache` already has necessary settings, but `nginx` and other
+webservers should be tuned. Here is list of mime types for our file extentions:
+
+- `application/vnd.ms-fontobject` - eot
+- `application/x-font-woff` - woff
+- `application/x-font-ttf` - ttf
+- `image/svg+xml` - svg
+
+
+Comments on archive content
+---------------------------
+
+- /font/* - fonts in different formats
+
+- /css/* - different kinds of css, for all situations. Should be ok with
+ twitter bootstrap. Also, you can skip <i> style and assign icon classes
+ directly to text elements
+
+- demo.html - demo file, to show your webfont content
+
+- LICENSE.txt - license info about source fonts, used to build your one.
+
+- config.json - keeps your settings. You can import it back to fontello anytime,
+ to continue your work
BIN font/entypo-selected.eot
Binary file not shown.
52 font/entypo-selected.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+Created by FontForge 20100429 at Wed Oct 31 13:24:38 2012
+ By root
+Copyright (C) 2012 by original authors @ fontello.com
+</metadata>
+<defs>
+<font id="entypo-selected" horiz-adv-x="789" >
+ <font-face
+ font-family="entypo-selected"
+ font-weight="500"
+ font-stretch="normal"
+ units-per-em="1000"
+ panose-1="2 0 6 3 0 0 0 0 0 0"
+ ascent="800"
+ descent="-200"
+ bbox="0 -68 789 724"
+ underline-thickness="50"
+ underline-position="-100"
+ unicode-range="U+2389-E75E"
+ />
+<missing-glyph horiz-adv-x="364"
+d="M33 0v666h265v-666h-265zM66 33h199v600h-199v-600z" />
+ <glyph glyph-name=".notdef" horiz-adv-x="364"
+d="M33 0v666h265v-666h-265zM66 33h199v600h-199v-600z" />
+ <glyph glyph-name=".null" horiz-adv-x="0"
+ />
+ <glyph glyph-name="nonmarkingreturn" horiz-adv-x="333"
+ />
+ <glyph glyph-name="uni2389" unicode="&#x2389;"
+d="M0 -30v718q0 15 10.5 25.5t25.5 10.5h251q15 0 25.5 -10.5t10.5 -25.5v-718q0 -15 -10.5 -25.5t-25.5 -10.5h-251q-15 0 -25.5 10.5t-10.5 25.5zM466 -30v718q0 15 10.5 25.5t25.5 10.5h252q14 0 24.5 -10.5t10.5 -25.5v-718q0 -15 -10.5 -25.5t-24.5 -10.5h-252
+q-15 0 -25.5 10.5t-10.5 25.5z" />
+ <glyph glyph-name="uni25B6" unicode="&#x25b6;" horiz-adv-x="693"
+d="M0 -30v718q0 20 18 30q19 12 36 0l622 -357q18 -13 18 -32t-18 -32l-622 -358q-9 -5 -18.5 -5t-17.5 5q-18 11 -18 31z" />
+ <glyph glyph-name="uni2714" unicode="&#x2714;"
+d="M0 329q0 82 31 153.5t84.5 125.5t125.5 85t154 31t153.5 -31t125 -85t84.5 -125.5t31 -153.5t-31 -153.5t-84.5 -125.5t-125 -85t-153.5 -31t-154 31t-125.5 85t-84.5 125.5t-31 153.5zM118 304q0 -10 7 -17l158 -158q8 -6 19.5 -11.5t21.5 -5.5h27q10 0 21.5 5.5
+t19.5 11.5l272 273q8 7 8 17t-8 16l-52 53q-7 7 -17 7t-17 -7l-223 -224q-8 -8 -18 -8t-16 8l-109 109q-8 8 -18 8t-16 -8l-53 -51q-7 -8 -7 -18z" />
+ <glyph glyph-name="uni2715" unicode="&#x2715;"
+d="M0 33q0 20 15 35l261 262l-261 257q-15 15 -15 35t15 34l51 52q15 15 35 15t35 -15l259 -259l259 259q14 15 34 15t35 -15l52 -52q14 -14 14 -34t-14 -35l-261 -262l261 -257q14 -15 14 -34.5t-14 -34.5l-52 -52q-15 -15 -35 -15t-34 15l-259 260l-260 -260
+q-15 -15 -34.5 -15t-34.5 15l-51 51q-15 15 -15 35z" />
+ <glyph glyph-name="uniE702" unicode="&#xe702;"
+d="M0 329q0 82 31 153.5t84.5 125.5t125.5 85t154 31t153.5 -31t125 -85t84.5 -125.5t31 -153.5t-31 -153.5t-84.5 -125.5t-125 -85t-153.5 -31t-154 31t-125.5 85t-84.5 125.5t-31 153.5zM119 329q0 -57 21.5 -107.5t59 -88t88 -59t107.5 -21.5t107.5 21.5t88 59t59.5 88
+t22 107.5t-22 107.5t-59.5 88.5t-88 59.5t-107.5 21.5t-107.5 -21.5t-88 -59.5t-59 -88.5t-21.5 -107.5zM164 304.5q0 8.5 5 13.5l56 56q6 5 14 5t15 -5l87 -88q14 -13 28 0l167 167q6 5 14.5 5t13.5 -5l56 -56q5 -5 5 -13.5t-5 -14.5l-202 -202q-6 -5 -15.5 -9.5
+t-18.5 -4.5h-58q-8 0 -17.5 4.5t-15.5 9.5l-124 123q-5 6 -5 14.5z" />
+ <glyph glyph-name="uniE75D" unicode="&#xe75d;" horiz-adv-x="495"
+d="M0 327.5q0 19.5 15 34.5l345 346q15 15 35 15t34 -15l52 -52q15 -14 15 -34t-15 -35l-261 -262l261 -257q15 -15 15 -34.5t-15 -34.5l-52 -52q-14 -15 -34 -15t-35 15l-345 346q-15 15 -15 34.5z" />
+ <glyph glyph-name="uniE75E" unicode="&#xe75e;" horiz-adv-x="495"
+d="M0 34q0 20 15 35l261 261l-261 258q-15 15 -15 34.5t15 33.5l51 53q15 15 35 15t35 -15l345 -346q15 -15 15 -35t-15 -35l-345 -345q-15 -15 -35 -15t-35 15l-51 51q-15 15 -15 35z" />
+ </font>
+</defs></svg>
BIN font/entypo-selected.ttf
Binary file not shown.
BIN font/entypo-selected.woff
Binary file not shown.
BIN images/large/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/loader_dark.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/loader_light.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/medium/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/small/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/xlarge/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/xsmall/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/xxlarge/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN images/xxxlarge/3.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
401 index.html
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8"/>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Gamma Gallery - A Responsive Image Gallery Experiment</title>
+ <meta name="description" content="Gamma Gallery - A Responsive Image Gallery Experiment"/>
+ <meta name="keywords" content="html5, responsive, image gallery, masonry, picture, images, sizes, fluid, history api, visibility api"/>
+ <meta name="author" content="Codrops"/>
+ <link rel="shortcut icon" href="../favicon.ico">
+ <link rel="stylesheet" type="text/css" href="css/style.css"/>
+ <script src="js/modernizr.custom.70736.js"></script>
+ <noscript><link rel="stylesheet" type="text/css" href="css/noJS.css"/></noscript>
+ <!--[if lte IE 7]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
+ </head>
+ <body>
+ <div class="container">
+
+ <!-- Codrops top bar -->
+ <div class="codrops-top clearfix">
+ <a href="http://tympanus.net/Tutorials/HeadingSets/">
+ <strong>&laquo; Previous Demo: </strong>Heading Set Styling
+ </a>
+ <span class="right">
+ <a href="http://www.idleformat.com/">Images by Idleformat</a>
+ <a href="http://tympanus.net/codrops/?p=11836">
+ <strong>Back to the Codrops Article</strong>
+ </a>
+ </span>
+ </div><!--/ Codrops top bar -->
+
+ <div class="main">
+ <header class="clearfix">
+
+ <h1>Gamma Gallery<span>A responsive image gallery experiment</span></h1>
+
+ <div class="support-note">
+ <span class="note-ie">Sorry, only modern browsers.</span>
+ </div>
+
+ </header>
+
+ <div class="gamma-container gamma-loading" id="gamma-container">
+
+ <ul class="gamma-gallery">
+
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ <li>
+ <div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350">
+ <div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div>
+ <div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div>
+ <div data-src="images/xlarge/3.jpg" data-min-width="700"></div>
+ <div data-src="images/large/3.jpg" data-min-width="300"></div>
+ <div data-src="images/medium/3.jpg" data-min-width="200"></div>
+ <div data-src="images/small/3.jpg" data-min-width="140"></div>
+ <div data-src="images/xsmall/3.jpg"></div>
+ <noscript>
+ <img src="images/xsmall/3.jpg" alt="img03"/>
+ </noscript>
+ </div>
+ </li>
+ </ul>
+
+ <div class="gamma-overlay"></div>
+
+ <div id="loadmore" class="loadmore">Example for loading more items...</div>
+
+ </div>
+
+ </div><!--/main-->
+ </div>
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+ <script src="js/jquery.masonry.min.js"></script>
+ <script src="js/jquery.history.js"></script>
+ <script src="js/js-url.min.js"></script>
+ <script src="js/jquerypp.custom.js"></script>
+ <script src="js/gamma.js"></script>
+ <script type="text/javascript">
+
+ $(function() {
+
+ var GammaSettings = {
+ // order is important!
+ viewport : [ {
+ width : 1200,
+ columns : 5
+ }, {
+ width : 900,
+ columns : 4
+ }, {
+ width : 500,
+ columns : 3
+ }, {
+ width : 320,
+ columns : 2
+ }, {
+ width : 0,
+ columns : 2
+ } ]
+ };
+
+ Gamma.init( GammaSettings, fncallback );
+
+
+ // Example how to add more items (just a dummy):
+
+ var page = 0,
+ items = ['<li><div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350"><div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div><div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div><div data-src="images/xlarge/3.jpg" data-min-width="700"></div><div data-src="images/large/3.jpg" data-min-width="300"></div><div data-src="images/medium/3.jpg" data-min-width="200"></div><div data-src="images/small/3.jpg" data-min-width="140"></div><div data-src="images/xsmall/3.jpg"></div><noscript><img src="images/xsmall/3.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350"><div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div><div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div><div data-src="images/xlarge/3.jpg" data-min-width="700"></div><div data-src="images/large/3.jpg" data-min-width="300"></div><div data-src="images/medium/3.jpg" data-min-width="200"></div><div data-src="images/small/3.jpg" data-min-width="140"></div><div data-src="images/xsmall/3.jpg"></div><noscript><img src="images/xsmall/3.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350"><div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div><div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div><div data-src="images/xlarge/3.jpg" data-min-width="700"></div><div data-src="images/large/3.jpg" data-min-width="300"></div><div data-src="images/medium/3.jpg" data-min-width="200"></div><div data-src="images/small/3.jpg" data-min-width="140"></div><div data-src="images/xsmall/3.jpg"></div><noscript><img src="images/xsmall/3.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350"><div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div><div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div><div data-src="images/xlarge/3.jpg" data-min-width="700"></div><div data-src="images/large/3.jpg" data-min-width="300"></div><div data-src="images/medium/3.jpg" data-min-width="200"></div><div data-src="images/small/3.jpg" data-min-width="140"></div><div data-src="images/xsmall/3.jpg"></div><noscript><img src="images/xsmall/3.jpg" alt="img03"/></noscript></div></li><li><div data-alt="img03" data-description="<h3>Sky high</h3>" data-max-width="1800" data-max-height="1350"><div data-src="images/xxxlarge/3.jpg" data-min-width="1300"></div><div data-src="images/xxlarge/3.jpg" data-min-width="1000"></div><div data-src="images/xlarge/3.jpg" data-min-width="700"></div><div data-src="images/large/3.jpg" data-min-width="300"></div><div data-src="images/medium/3.jpg" data-min-width="200"></div><div data-src="images/small/3.jpg" data-min-width="140"></div><div data-src="images/xsmall/3.jpg"></div><noscript><img src="images/xsmall/3.jpg" alt="img03"/></noscript></div></li>']
+
+ function fncallback() {
+
+ $( '#loadmore' ).show().on( 'click', function() {
+
+ ++page;
+ var newitems = items[page-1]
+ if( page <= 1 ) {
+
+ Gamma.add( $( newitems ) );
+
+ }
+ if( page === 1 ) {
+
+ $( this ).remove();
+
+ }
+
+ } );
+
+ }
+
+ });
+
+ </script>
+ </body>
+</html>
1,351 js/gamma.js
@@ -0,0 +1,1351 @@
+/**
+ * gamma.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Copyright 2012, Codrops
+ * http://www.codrops.com
+ */
+
+/**
+ * Return a new JSON object of the old string.
+ * Turns:
+ * file.js?a=1&amp;b.c=3.0&b.d=four&a_false_value=false&a_null_value=null
+ * Into:
+ * {"a":1,"b":{"c":3,"d":"four"},"a_false_value":false,"a_null_value":null}
+ * @version 1.1.0
+ * @date July 16, 2010
+ * @since 1.0.0, June 30, 2010
+ * @package jquery-sparkle {@link http://www.balupton/projects/jquery-sparkle}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2009-2010 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @license GNU Affero General Public License version 3 {@link http://www.gnu.org/licenses/agpl-3.0.html}
+ */
+String.prototype.queryStringToJSON = String.prototype.queryStringToJSON || function ( )
+{ // Turns a params string or url into an array of params
+ // Prepare
+ var params = String(this);
+ // Remove url if need be
+ params = params.substring(params.indexOf('?')+1);
+ // params = params.substring(params.indexOf('#')+1);
+ // Change + to %20, the %20 is fixed up later with the decode
+ params = params.replace(/\+/g, '%20');
+ // Do we have JSON string
+ if ( params.substring(0,1) === '{' && params.substring(params.length-1) === '}' )
+ { // We have a JSON string
+ return eval(decodeURIComponent(params));
+ }
+ // We have a params string
+ params = params.split(/\&(amp\;)?/);
+ var json = {};
+ // We have params
+ for ( var i = 0, n = params.length; i < n; ++i )
+ {
+ // Adjust
+ var param = params[i] || null;
+ if ( param === null ) { continue; }
+ param = param.split('=');
+ if ( param === null ) { continue; }
+ // ^ We now have "var=blah" into ["var","blah"]
+
+ // Get
+ var key = param[0] || null;
+ if ( key === null ) { continue; }
+ if ( typeof param[1] === 'undefined' ) { continue; }
+ var value = param[1];
+ // ^ We now have the parts
+
+ // Fix
+ key = decodeURIComponent(key);
+ value = decodeURIComponent(value);
+ try {
+ // value can be converted
+ value = eval(value);
+ } catch ( e ) {
+ // value is a normal string
+ }
+
+ // Set
+ // window.console.log({'key':key,'value':value}, split);
+ var keys = key.split('.');
+ if ( keys.length === 1 )
+ { // Simple
+ json[key] = value;
+ }
+ else
+ { // Advanced (Recreating an object)
+ var path = '',
+ cmd = '';
+ // Ensure Path Exists
+ $.each(keys,function(ii,key){
+ path += '["'+key.replace(/"/g,'\\"')+'"]';
+ jsonCLOSUREGLOBAL = json; // we have made this a global as closure compiler struggles with evals
+ cmd = 'if ( typeof jsonCLOSUREGLOBAL'+path+' === "undefined" ) jsonCLOSUREGLOBAL'+path+' = {}';
+ eval(cmd);
+ json = jsonCLOSUREGLOBAL;
+ delete jsonCLOSUREGLOBAL;
+ });
+ // Apply Value
+ jsonCLOSUREGLOBAL = json; // we have made this a global as closure compiler struggles with evals
+ valueCLOSUREGLOBAL = value; // we have made this a global as closure compiler struggles with evals
+ cmd = 'jsonCLOSUREGLOBAL'+path+' = valueCLOSUREGLOBAL';
+ eval(cmd);
+ json = jsonCLOSUREGLOBAL;
+ delete jsonCLOSUREGLOBAL;
+ delete valueCLOSUREGLOBAL;
+ }
+ // ^ We now have the parts added to your JSON object
+ }
+ return json;
+};
+
+// checks if an element is partially inside the viewport
+// inspired by James Padolsey's snippet (http://remysharp.com/2009/01/26/element-in-view-event-plugin/#comment-127058)
+$.extend( $.expr[':'], {
+
+ inViewport : function( el ) {
+
+ var scrollTop = ( document.documentElement.scrollTop || document.body.scrollTop ),
+ elOffsetTop = $( el ).offset().top,
+ elH = $( el ).height()
+ winH = ( window.innerHeight && window.innerHeight < $( window ).height() ) ? window.innerHeight : $( window ).height();
+
+ return ( elOffsetTop + elH ) > scrollTop && elOffsetTop < ( scrollTop + winH );
+
+ }
+
+});
+
+// HTML5 PageVisibility API
+// http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
+// by Joe Marini (@joemarini)
+function getHiddenProp(){
+ var prefixes = ['webkit','moz','ms','o'];
+
+ // if 'hidden' is natively supported just return it
+ if ('hidden' in document) return 'hidden';
+
+ // otherwise loop over all the known prefixes until we find one
+ for (var i = 0; i < prefixes.length; i++){
+ if ((prefixes[i] + 'Hidden') in document)
+ return prefixes[i] + 'Hidden';
+ }
+
+ // otherwise it's not supported
+ return null;
+}
+function isHidden() {
+ var prop = getHiddenProp();
+ if (!prop) return false;
+
+ return document[prop];
+}
+
+var Gamma = (function() {
+
+ var $window = $( window ),
+ $body = $( 'body' ),
+ $document = $( document ),
+ Modernizr = window.Modernizr,
+ // https://github.com/twitter/bootstrap/issues/2870
+ transEndEventNames = {
+ 'WebkitTransition' : 'webkitTransitionEnd',
+ 'MozTransition' : 'transitionend',
+ 'OTransition' : 'oTransitionEnd',
+ 'msTransition' : 'MSTransitionEnd',
+ 'transition' : 'transitionend'
+ },
+ transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
+ // default settings
+ defaults = {
+ // default value for masonry column count
+ columns : 4,
+ // transition properties for the images in ms (transition to/from singleview)
+ speed : 300,
+ easing : 'ease',
+ // if set to true the overlay's opacity will animate (transition to/from singleview)
+ overlayAnimated : true,
+ // if true, the navigate next function is called when the image (singleview) is clicked
+ nextOnClickImage : true,
+ // circular navigation
+ circular : true,
+ // transition settings for the image in the single view.
+ // These includes:
+ // - ajusting its position and size when the window is resized
+ // - fading out the image when navigating
+ svImageTransitionSpeedFade : 300,
+ svImageTransitionEasingFade : 'ease-in-out',
+ svImageTransitionSpeedResize : 300,
+ svImageTransitionEasingResize : 'ease-in-out',
+ svMarginsVH : {
+ vertical : 140,
+ horizontal : 120
+ },
+ // allow keybord and swipe navigation
+ keyboard : true,
+ swipe : true,
+ // slideshow interval (ms)
+ interval : 4000,
+ // if History API is not supported this value will turn false
+ historyapi : true
+ },
+ init = function( settings, callback ) {
+
+ Gamma.settings = $.extend( true, {}, defaults, settings );
+
+ // cache some elements..
+ _config();
+ // build the layout
+ _layout();
+ // init masonry
+ _initMasonry( function() {
+
+ // remove loading status
+ Gamma.container.removeClass( 'gamma-loading' );
+ // show items
+ Gamma.items.show();
+
+ // opens the single view if an image id is passed in the url
+ // we will assume for this demo that the id is the index of the item
+ // where the image is
+ // example: http://www.sitename.com/gamma/?img=12
+ if( Gamma.settings.historyapi ) {
+
+ _goto();
+
+ }
+
+ // init window events
+ _initEvents( 'window' );
+
+ if( callback ) {
+
+ callback.call();
+
+ }
+
+ } );
+
+ },
+ _config = function() {
+
+ Gamma.container = $( '#gamma-container' );
+ Gamma.overlay = Gamma.container.find( 'div.gamma-overlay' );
+ Gamma.controls = Gamma.container.children( 'div.gamma-options' );
+ Gamma.gallery = Gamma.container.children( 'ul.gamma-gallery' );
+ Gamma.items = Gamma.gallery.children();
+ Gamma.itemsCount = Gamma.items.length;
+ Gamma.columns = Gamma.settings.columns;
+ // true if any animation (including preloading an image) running
+ Gamma.isAnimating = true;
+ Gamma.svMargins = Gamma.settings.svMarginsVH;
+ var History = window.History; // Note: We are using a capital H instead of a lower h
+ if ( !History.enabled && Gamma.settings.historyapi ) {
+
+ Gamma.settings.historyapi = false;
+
+ }
+ Gamma.supportTransitions = Modernizr.csstransitions;
+
+ },
+ _createSingleView = function() {
+
+ // the single view will include the image, navigation buttons and close, play, and pause buttons
+
+ if( !Gamma.singleview ) {
+
+ $( '<div class="gamma-single-view"><div class="gamma-options gamma-options-single"><div class="gamma-buttons"><button class="gamma-btn-close"></button></div></div></div>' )
+ .appendTo( Gamma.container );
+
+ Gamma.singleview = Gamma.container.children( 'div.gamma-single-view' );
+ Gamma.svclose = Gamma.singleview.find( 'button.gamma-btn-close' );
+
+ _initEvents( 'singleview' );
+
+ _createSingleViewNavigation();
+
+ }
+ else if( !Gamma.nav ) {
+
+ _createSingleViewNavigation();
+
+ }
+
+ },
+ _createSingleViewNavigation = function() {
+
+ if( Gamma.itemsCount > 1 ) {
+
+ Gamma.svplay = $( '<button class="gamma-btn-ssplay"></button>' ).insertAfter( Gamma.svclose );
+ Gamma.nav = $( '<nav class="gamma-nav"><span class="gamma-prev"></span><span class="gamma-next"></span></nav>' ).appendTo( Gamma.singleview );
+ Gamma.svnavnext = Gamma.nav.find( 'span.gamma-next' );
+ Gamma.svnavprev = Gamma.nav.find( 'span.gamma-prev' );
+
+ _initEvents( 'singleviewnavigation' );
+
+ }
+
+ },
+ // controller: "goes to" a specific image or back to the grid
+ _goto = function( anim, id ) {
+
+ if( Gamma.settings.historyapi ) {
+
+ // get the url from history state (e.g. id=3) and extract the id
+ id = id || History.getState().url.queryStringToJSON().id;
+
+ }
+
+ var isSingleview = ( id != undefined ),
+ anim = anim || false;
+
+ // back history to a state with no id
+ if( Gamma.settings.historyapi && Gamma.isSV && id === undefined ) {
+
+ _closesingleview();
+
+ }
+
+ if( isSingleview ) {
+
+ var $item = Gamma.items.eq( Math.abs( id ) );
+
+ if( $item.length ) {
+
+ if( Gamma.svImage ) {
+
+ // navigating
+ if( Gamma.supportTransitions ) {
+
+ _setTransition( Gamma.svImage , 'all', Gamma.settings.svImageTransitionSpeedFade , Gamma.settings.svImageTransitionEasingFade );
+
+ }
+
+ _applyAnimation( Gamma.svImage, { opacity : 0 }, Gamma.settings.svImageTransitionSpeedFade, Gamma.supportTransitions, function() {
+
+ $( this ).remove();
+ anim = false;
+ _singleviewitem( $item, anim );
+
+ } );
+
+ if( Gamma.svDescription ) {
+
+ _applyAnimation( Gamma.svDescription, { opacity : 0 }, 400, Gamma.supportTransitions );
+
+ }
+
+ }
+ else {
+
+ if( Gamma.svDescription ) {
+
+ Gamma.svDescription.empty();
+
+ }
+ _singleviewitem( $item, anim );
+
+ }
+
+ }
+
+ }
+
+ },
+ // saves the history state / or if history not supported goes to specific image
+ _saveState = function( id ) {
+
+ if( !Gamma.settings.historyapi && id != undefined ) {
+
+ Gamma.isSV ? _goto( false, id ) : _goto( true, id );
+
+ }
+ else if( id === undefined ) {
+
+ History.pushState( null, null, url('protocol') + '://' + url('hostname') + url('path') );
+
+ }
+ // adds a new state to the history object
+ // this will trigger the statechange on the window
+ else if( History.getState().url.queryStringToJSON().id !== id ) {
+
+ History.pushState( null, null, '?id=' + id );
+
+ }
+
+ },
+ // transform initial html structure into a list of images (well mostly)
+ _layout = function( $items ) {
+
+ if( Gamma.itemsCount > 0 ) {
+
+ _createSingleView();
+
+ }
+
+ _setMasonry();
+
+ var $items = $items || Gamma.items.hide();
+
+ // replace each div element with an image element with the right source
+ $items.each( function() {
+
+ var $item = $( this ),
+ $picEl = $item.children(),
+ sources = _getImgSources( $picEl ),
+ source = _chooseImgSource( sources, $item.outerWidth( true ) ),
+ description = $picEl.data( 'description' );
+
+ // data is saved in the <li> element
+ $item.data( {
+ description : description,
+ source : sources,
+ maxwidth : $picEl.data( 'maxWidth' ),
+ maxheight : $picEl.data( 'maxHeight' )
+ } );
+
+ $( '<div/>' ).addClass( 'gamma-description' ).html( description ).insertAfter( $picEl );
+
+ $( '<img/>' ).attr( {
+ alt : $picEl.data( 'alt' ),
+ title : $picEl.data( 'title' ),
+ src : source.src
+ } ).insertAfter( $picEl );
+
+ $picEl.remove();
+
+ } );
+
+ },
+ // gets all possible image sources of an element
+ _getImgSources = function( $el ) {
+
+ var theSources = [];
+ $el.children( 'div' ).each( function( i ) {
+
+ var $source = $( this );
+ theSources.push( {
+ width : $source.data( 'minWidth' ) || 0,
+ src : $source.data( 'src' ),
+ pos : i
+ } );
+
+ } );
+
+ return theSources;
+
+ },
+ // change the number of masonry columns based on the current container's width and the settings.viewport configuration
+ _setMasonry = function() {
+
+ var containerW = Gamma.container.width();
+
+ if( Gamma.settings.viewport ) {
+
+ for( var i = 0, len = Gamma.settings.viewport.length; i < len; ++i ) {
+
+ var viewport = Gamma.settings.viewport[i];
+
+ if( containerW > viewport.width ) {
+
+ Gamma.columns = viewport.columns;
+ break;
+
+ }
+
+ }
+
+ }
+
+ // set the widths (%) for each of the <li>
+ Gamma.items.css( 'width', Math.floor( containerW / Gamma.columns ) * 100 / containerW + '%' );
+
+ },
+ // initialize masonry
+ _initMasonry = function( callback ) {
+
+ Gamma.gallery.imagesLoaded( function() {
+
+ Gamma.gallery.masonry( {
+ itemSelector : 'li',
+ columnWidth : function( containerWidth ) {
+ return containerWidth / Gamma.columns;
+ }
+ } );
+
+ if( callback ) {
+
+ callback.call();
+
+ }
+
+ } );
+
+ },
+ // reloads masonry grid
+ _reloadMasonry = function( timeout ) {
+
+ clearTimeout( Gamma.masonrytimeout );
+ timeout = timeout || 0;
+ Gamma.masonrytimeout = setTimeout( function() { Gamma.gallery.masonry( 'reload' ); }, timeout );
+
+ },
+ // choose a source based on the item's size and on the configuration set by the user in the initial HTML
+ _chooseImgSource = function( sources, w ) {
+
+ if( w <= 0 ) {
+ w = 1;
+ }
+
+ for( var i = 0, len = sources.length; i < len; ++i ) {
+
+ var source = sources[i];
+
+
+ if( w > source.width ) {
+
+ return source;
+
+ }
+
+ }
+
+ },
+ // the slideshow is active only if the page is visible
+ _visChange = function() {
+
+ if( Gamma.slideshow ) {
+
+ isHidden() ? ( _stopSlideshow( true ), Gamma.slideshow = true ) : _prepareSlideshow();
+
+ }
+
+ },
+ // show or hide a specific control button
+ _toggleControl = function( $control, status, animStyle ) {
+
+ animStyle ? $control.css( animStyle ) : status === 'on' ? $control.show() : $control.hide();
+
+ },
+ // triggered on the events for the nav buttons, keyboard, swipe
+ _onnavigate = function( dir ) {
+
+ if( !Gamma.slideshow ) {
+
+ _navigate( dir );
+
+ }
+
+ },
+ // goes to next or previous image
+ _navigate = function( dir ) {
+
+ if( !Gamma.isSV || Gamma.isAnimating ) {
+
+ return false;
+
+ }
+
+ var current = Gamma.current;
+
+ if( dir === 'next' ) {
+
+ Gamma.current = Gamma.current < Gamma.itemsCount - 1 ? ++Gamma.current :
+ Gamma.settings.circular ? 0 : Gamma.current;
+
+ }
+ else if( dir === 'prev' ) {
+
+ Gamma.current = Gamma.current > 0 ? --Gamma.current :
+ Gamma.settings.circular ? Gamma.itemsCount - 1 : Gamma.current;
+
+ }
+
+ if( current === Gamma.current ) {
+
+ return false;
+
+ }
+
+ Gamma.isAnimating = true;
+
+ // get positions, dimentions and source for the new item
+ _saveState( Gamma.current );
+
+ },
+ // resize the window event
+ _resize = function() {
+
+ _setMasonry();
+
+ _resizeGrid();
+
+ // change the size, position and source of the image (single view) accordingly
+ if( Gamma.isSV ) {
+
+ _svResizeImage();
+
+ }
+
+ // seems that sometimes the masonry columns stay out of order.
+ // just to make sure this doesnt happen
+ _reloadMasonry( 200 );
+
+ },
+ // resizes the masonry grid
+ // change the source of the images (grid) accordingly
+ _resizeGrid = function() {
+
+ Gamma.items.each( function() {
+
+ var $item = $( this ),
+ source = _chooseImgSource( $item.data( 'source' ), Gamma.items.outerWidth( true ) );
+
+ $item.find( 'img' ).attr( 'src', source.src );
+
+ } );
+
+ }
+ // resize and chooses (if necessary) a new source for the image in the single view
+ _svResizeImage = function( callback ) {
+
+ // need to know which source to load for the image.
+ // also need to know the final size and position.
+ var finalConfig = _getFinalImgConfig( {
+
+ sources : Gamma.svImage.data( 'source' ),
+ imgMaxW : Gamma.svImage.data( 'maxwidth' ),
+ imgMaxH : Gamma.svImage.data( 'maxheight' ),
+ wrapper : { width : $window.width() - Gamma.svMargins.horizontal, height : $window.height() - Gamma.svMargins.vertical },
+ image : { width : Gamma.svImage.width(), height : Gamma.svImage.height() }
+
+ } ),
+ source = finalConfig.source,
+ finalSizePosition = finalConfig.finalSizePosition,
+
+ currentSrc = Gamma.svImage.attr('src'),
+
+ finalStyle = {
+ width : finalSizePosition.width,
+ height : finalSizePosition.height,
+ left : finalSizePosition.left + Gamma.svMargins.horizontal / 2,
+ top : finalSizePosition.top + Gamma.svMargins.vertical / 2
+ };
+
+ _applyAnimation( Gamma.svImage, finalStyle, Gamma.settings.svImageTransitionSpeedResize, Gamma.supportTransitions, function() {
+
+ if( Gamma.supportTransitions ) {
+ $( this ).off( transEndEventName );
+ }
+
+ // if source changes, change reset Gamma.svImage
+ if( currentSrc !== source.src ) {
+
+ // going to load a new image..
+ Gamma.isAnimating = true;
+
+ var w = Gamma.svImage.width(),
+ h = Gamma.svImage.height(),
+ l = Gamma.svImage.position().left,
+ t = Gamma.svImage.position().top;
+
+ Gamma.svImage = $( '<img/>' ).load( function() {
+
+ var $img = $( this );
+
+ if( Gamma.supportTransitions ) {
+
+ _setTransition( $img , 'all', Gamma.settings.svImageTransitionSpeedResize , Gamma.settings.svImageTransitionEasingResize );
+
+ }
+
+ _applyAnimation( $img.next(), { opacity : 0 }, 500, Gamma.supportTransitions, function() {
+
+ var $img = $( this );
+ if( Gamma.supportTransitions ) {
+ $( this ).off( transEndEventName );
+ }
+ $img.remove();
+ Gamma.isAnimating = false;
+
+ } );
+
+ } )
+ .css( { width : w, height : h, left : l, top : t } )
+ .data( Gamma.svImage.data() )
+ .insertBefore( Gamma.svImage )
+ .attr( 'src', source.src );
+
+ }
+
+ if( callback ) {
+
+ callback.call();
+
+ }
+
+ } );
+
+ },
+ // gets the position and sizes of the image given its container properties
+ _getFinalImgConfig = function( properties ) {
+
+ var sources = properties.sources,
+ imgMaxW = properties.imgMaxW || 0,
+ imgMaxH = properties.imgMaxH || 0,
+ source = _chooseImgSource( sources, properties.wrapper.width ),
+ // calculate final size and position of image
+ finalSizePosition = _getFinalSizePosition( properties.image, properties.wrapper );
+
+ // check for new source
+ if( finalSizePosition.checksource ) {
+
+ source = _chooseImgSource( sources, finalSizePosition.width );
+
+ }
+
+ // we still need to check one more detail:
+ // if the source is the largest one provided in the html rules,
+ // then we need to check if the final width/height are eventually bigger
+ // than the original image sizes. If so, we will show the image
+ // with its original size, avoiding like this that the image gets pixelated
+ if( source.pos === 0 && ( imgMaxW !== 0 && finalSizePosition.width > imgMaxW || imgMaxH !== 0 && finalSizePosition.height > imgMaxH ) ) {
+
+ if( imgMaxW !== 0 && finalSizePosition.width > imgMaxW ) {
+
+ var ratio = finalSizePosition.width / imgMaxW;
+ finalSizePosition.width = imgMaxW;
+ finalSizePosition.height /= ratio;
+
+ }
+ else if( imgMaxH !== 0 && finalSizePosition.height > imgMaxH ) {
+
+ var ratio = finalSizePosition.height / imgMaxH;
+ finalSizePosition.height = imgMaxH;
+ finalSizePosition.width /= ratio;
+
+ }
+
+ finalSizePosition.left = properties.wrapper.width / 2 - finalSizePosition.width / 2;
+ finalSizePosition.top = properties.wrapper.height / 2 - finalSizePosition.height / 2;
+
+ }
+
+ return {
+ source : source,
+ finalSizePosition : finalSizePosition
+ };
+
+ },
+ // triggered when one grid image is clicked
+ _singleview = function() {
+
+ var id = $( this ).index();
+ _saveState( id );
+
+ },
+ // shows the item
+ _singleviewitem = function( $item, anim ) {
+
+ Gamma.isSV = true;
+
+ var id = $item.index(),
+ data = $item.data(),
+ $img = $item.children( 'img' );
+
+ if( anim ) {
+
+ Gamma.fly = $( '<img/>' ).attr( 'src', $img.attr( 'src' ) ).addClass( 'gamma-img-fly' ).css( {
+ width : $img.width(),
+ height : $img.height(),
+ left : $item.offset().left + ( $item.outerWidth( true ) - $item.width() ) / 2,
+ top : $item.offset().top + ( $item.outerHeight( true ) - $item.height() ) / 2
+ } ).appendTo( $body );
+
+ if( Gamma.supportTransitions ) {
+
+ _setTransition( Gamma.fly );
+
+ }
+
+ }
+
+ // need to know which source to load for the image.
+ // also need to know the final size and position.
+ var finalConfig = _getFinalImgConfig( {
+
+ sources : $item.data( 'source' ),
+ imgMaxW : $item.data( 'maxwidth' ),
+ imgMaxH : $item.data( 'maxheight' ),
+ wrapper : { width : $window.width() - Gamma.svMargins.horizontal, height : $window.height() - Gamma.svMargins.vertical },
+ image : { width : $img.width(), height : $img.height() }
+
+ } ),
+ source = finalConfig.source,
+ finalSizePosition = finalConfig.finalSizePosition;
+
+ Gamma.current = id;
+
+ // transition: overlay opacity
+ Gamma.overlay.show();
+
+ if( Gamma.settings.overlayAnimated && anim && Gamma.supportTransitions ) {
+
+ _setTransition( Gamma.overlay , 'opacity' );
+
+ }
+
+ setTimeout( function() {
+
+ _applyAnimation( Gamma.overlay, { 'opacity' : 1 }, Gamma.settings.speed, Gamma.supportTransitions || !anim, function() {
+
+ if( !Gamma.isSV ) {
+
+ return false;
+
+ }
+ if( Gamma.supportTransitions ) {
+ $( this ).off( transEndEventName );
+ }
+
+ // set the overflow-y to hidden
+ $body.css( 'overflow-y', 'hidden' );
+ // force repaint. Chrome in Windows does not remove overflow..
+ // http://stackoverflow.com/a/3485654/989439
+ var el = Gamma.overlay[0];
+ el.style.display='none';
+ el.offsetHeight; // no need to store this anywhere, the reference is enough
+ el.style.display='block';
+
+ } );
+
+ $item.css( 'visibility', 'hidden' );
+
+ if( !anim ) {
+
+ _loadSVItemFromGrid( data, finalSizePosition, source.src );
+
+ }
+ else {
+
+ var styleCSS = {
+ width : finalSizePosition.width,
+ height : finalSizePosition.height,
+ left : finalSizePosition.left + $window.scrollLeft() + Gamma.svMargins.horizontal / 2,
+ top : finalSizePosition.top + $window.scrollTop() + Gamma.svMargins.vertical / 2
+ },
+ cond = Gamma.supportTransitions;
+
+ _applyAnimation( Gamma.fly, styleCSS, Gamma.settings.speed, cond, function() {
+
+ if( cond ) {
+ $( this ).off( transEndEventName );
+ }
+
+ _loadSVItemFromGrid( data, finalSizePosition, source.src );
+
+ } );
+
+ }
+
+ }, 25 );
+
+ },
+ // load new image for the new item to show
+ _loadSVItemFromGrid = function( data, position, src ) {
+
+ // show single view
+ Gamma.singleview.show();
+
+ // add description
+ if( !Gamma.svDescription ) {
+
+ Gamma.svDescription = $( '<div/>' )
+ .addClass( 'gamma-description' )
+ .appendTo( Gamma.singleview ).wrap( '<div class="gamma-description-wrapper"></div>' );
+
+ if( Gamma.supportTransitions ) {
+
+ _setTransition( Gamma.svDescription , 'opacity', Gamma.settings.svImageTransitionSpeedFade / 2 , Gamma.settings.svImageTransitionEasingFade );
+
+ }
+
+ }
+ Gamma.svDescription.html( data.description );
+
+ // loading status: give a little amount of time before displaying it
+ var loadingtimeout = setTimeout( function() { Gamma.singleview.addClass( 'gamma-loading' ); }, Gamma.settings.svImageTransitionSpeedFade + 250 );
+
+ // preload the new image
+ Gamma.svImage = $( '<img/>' ).load( function() {
+
+ var $img = $( this );
+
+ // remove loading status
+ clearTimeout( loadingtimeout );
+ Gamma.singleview.removeClass( 'gamma-loading' );
+
+ setTimeout( function() {
+
+ _applyAnimation( Gamma.svDescription, { 'opacity' : 1 }, Gamma.settings.svImageTransitionSpeedFade / 2, Gamma.supportTransitions );
+
+ }, 25 );
+
+ $img.css( {
+ width : position.width,
+ height : position.height,
+ left : position.left + Gamma.svMargins.horizontal / 2,
+ top : position.top + Gamma.svMargins.vertical / 2
+ } ).appendTo( Gamma.singleview );
+
+ if( Gamma.supportTransitions ) {
+
+ _setTransition( $img , 'all', Gamma.settings.svImageTransitionSpeedResize , Gamma.settings.svImageTransitionEasingResize );
+
+ }
+
+ if( Gamma.fly ) {
+
+ if( Gamma.supportTransitions ) {
+
+ _setTransition( Gamma.fly, 'opacity', 1000 );
+
+ }
+ setTimeout( function() {
+
+ _applyAnimation( Gamma.fly, { 'opacity' : 0 }, 1000, Gamma.supportTransitions, function() {
+
+ var $this = $( this );
+
+ if( Gamma.supportTransitions ) {
+ $this.off( transEndEventName );
+ }
+ $this.remove();
+ Gamma.fly = null;
+ Gamma.isAnimating = false;
+
+ } );
+
+ }, 25 );
+
+ }
+ else {
+
+ Gamma.isAnimating = false;
+
+ }
+
+ } ).data( data ).attr( 'src', src );
+
+ },
+ // given the wrapper's width and height, calculates the final width, height, left and top for the image to fit inside
+ _getFinalSizePosition = function( imageSize, wrapperSize ) {
+
+ // image size
+ var imgW = imageSize.width,
+ imgH = imageSize.height,
+
+ // container size
+ wrapperW = wrapperSize.width,
+ wrapperH = wrapperSize.height,
+
+ finalW, finalH, finalL, finalT,
+ // flag to indicate we could check for another source (smaller) for the image
+ checksource = false;
+
+ // check which image side is bigger
+ if( imgW > imgH ) {
+
+ finalW = wrapperW;
+ // calculate the height given the finalW
+ var ratio = imgW / wrapperW;
+
+ finalH = imgH / ratio;
+
+ if( finalH > wrapperH ) {
+
+ checksource = true;
+ ratio = finalH / wrapperH;
+ finalW /= ratio;
+ finalH = wrapperH;
+
+ }
+
+ }
+ else {
+
+ finalH = wrapperH;
+ // calculate the width given the finalH
+ var ratio = imgH / wrapperH;
+
+ finalW = imgW / ratio;
+
+ checksource = true;
+
+ if( finalW > wrapperW ) {
+
+ checksource = false;
+
+ ratio = finalW / wrapperW;
+ finalW = wrapperW;
+ finalH /= ratio;
+
+ }
+
+ }
+
+ return {
+ width : finalW,
+ height : finalH,
+ left : wrapperW / 2 - finalW / 2,
+ top : wrapperH / 2 - finalH / 2,
+ checksource : checksource
+ };
+
+ },
+ // closes the single view
+ _closesingleview = function() {
+
+ if( Gamma.isAnimating || Gamma.fly ) {
+
+ return false;
+
+ }
+
+ Gamma.isSV = false;
+
+ if( Gamma.slideshow ) {
+
+ _stopSlideshow();
+
+ }
+
+ var $item = Gamma.items.eq( Gamma.current ),
+ $img = $item.children( 'img' );
+
+ Gamma.items.not( $item ).css( 'visibility', 'visible' );
+
+ // scroll window to item's position if item is not "partially" visible
+ var wst = $window.scrollTop();
+
+ if( !$item.is( ':inViewport' ) ) {
+
+ wst = $item.offset().top + ( $item.outerHeight( true ) - $item.height() ) / 2;
+
+ var diff = $document.height() - $window.height();
+
+ if( wst > diff ) {
+
+ wst = diff;
+ }
+
+ $window.scrollTop( wst );
+
+ }
+
+ var l = Gamma.svImage.position().left + $window.scrollLeft(),
+ t = Gamma.svImage.position().top + wst;
+
+ Gamma.svImage.appendTo( $body ).css( {
+ position : 'absolute',
+ zIndex : 10000,
+ left : l,
+ top : t
+ } );
+
+ if( Gamma.supportTransitions ) {
+
+ _setTransition( Gamma.svImage );
+
+ }
+
+ Gamma.singleview.hide();
+ Gamma.svDescription.empty().css( 'opacity', 0 );
+ $body.css( 'overflow-y', 'scroll' );
+
+ setTimeout( function() {
+
+ var styleCSS = {
+ width : $img.width(),
+ height : $img.height(),
+ left : $item.offset().left + ( $item.outerWidth( true ) - $item.width() ) / 2,
+ top : $item.offset().top + ( $item.outerHeight( true ) - $item.height() ) / 2
+ }
+ _applyAnimation( Gamma.svImage, styleCSS, Gamma.settings.speed, Gamma.supportTransitions, function() {
+
+ $item.css( 'visibility', 'visible' );
+ $( this ).remove();
+ Gamma.svImage = null;
+
+ } );
+
+ // transition: overlay opacity
+ if( Gamma.settings.overlayAnimated && Gamma.supportTransitions ) {
+
+ _setTransition( Gamma.overlay , 'opacity' );
+
+ _applyAnimation( Gamma.overlay, { 'opacity' : 0 }, Gamma.settings.speed, Gamma.supportTransitions, function() {
+
+ var $this = $( this );
+
+ if( Gamma.supportTransitions ) {
+ $this.off( transEndEventName );
+ }
+
+ $this.hide();
+
+ } );
+
+ }
+ else {
+
+ Gamma.overlay.hide();
+
+ }
+
+ _saveState();
+
+ }, 25 );
+
+ },
+ // before slideshow starts
+ _prepareSlideshow = function() {
+
+ if( Gamma.isAnimating ) {
+ return false;
+ }
+ Gamma.isAnimating = true;
+
+ Gamma.slideshow = true;
+ // container is the window
+ Gamma.svMargins = {
+ vertical : 0,
+ horizontal : 0
+ };
+ _toggleControl( Gamma.svclose, 'off' );
+ _toggleControl( Gamma.svnavprev, 'off', { left : -40 } );
+ _toggleControl( Gamma.svnavnext, 'off', { right : -40 } );
+
+ _svResizeImage( function() {
+
+ Gamma.isAnimating = false;
+
+ Gamma.svplay.addClass( 'gamma-btn-sspause' );
+ _startSlideshow();
+
+ } );
+
+ },
+ // starts slideshow
+ _startSlideshow = function() {
+
+ Gamma.slideshowtimeout = setTimeout( function() {
+
+ _navigate( 'next' );
+ _startSlideshow();
+
+ }, Gamma.settings.interval );
+
+ },
+ // stops slideshow
+ _stopSlideshow = function( pause ) {
+
+ if( Gamma.isAnimating ) {
+ return false;
+ }
+ Gamma.isAnimating = true;
+
+ clearTimeout( Gamma.slideshowtimeout );
+ if( !pause ) {