<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
<noscript><style>.es-carousel ul {display: block;}</style></noscript>
<script id="img-wrapper-tmpl" type="text/x-jquery-tmpl">
<div class="rg-image-wrapper">
{{if itemsCount > 1}}
<div class="rg-image-nav">
<a href="#" class="rg-image-nav-prev">Previous Image</a>
<a href="#" class="rg-image-nav-next">Next Image</a>
</div>
{{/if}}
<div class="rg-image"></div>
<div class="rg-loading"></div>
<div class="rg-caption-wrapper">
<div class="rg-caption" style="display:none;">
<p></p>
</div></div></div>
</script>
<div class="container">
<div class="content">
<h1>Responsive Image Gallery <span>A jQuery image gallery with a thumbnail carousel</span></h1>
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/_origi10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/28674_10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022410.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/14022610.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
<li><a href="#"><img src="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" data-large="https://i82.servimg.com/u/f82/19/38/53/40/fonsto10.jpg" alt="IMG" data-description="Lorem ipsum dolor sit amet" /></a></li>
</ul>
</div></div></div></div></div></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
(function(a){var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,b={},f={},e,p={key:0,data:{}},h=0,c=0,l=[];function g(e,d,g,i){var c={data:i||(d?d.data:{}),_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t};e&&a.extend(c,e,{nodes:[],parent:d});if(g){c.tmpl=g;c._ctnt=c._ctnt||c.tmpl(a,c);c.key=++h;(l.length?f:b)[h]=c}return c}a.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(f,d){a.fn[f]=function(n){var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;e=b||{};if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){i[d](this[0]);g=this}else{for(h=0,m=i.length;h<m;h++){c=h;k=(h>0?this.clone(true):this).get();a.fn[d].apply(a(i[h]),k);g=g.concat(k)}c=0;g=this.pushStack(g,f,i.selector)}l=e;e=null;a.tmpl.complete(l);return g}});a.fn.extend({tmpl:function(d,c,b){return a.tmpl(this[0],d,c,b)},tmplItem:function(){return a.tmplItem(this[0])},template:function(b){return a.template(b,this[0])},domManip:function(d,l,j){if(d[0]&&d[0].nodeType){var f=a.makeArray(arguments),g=d.length,i=0,h;while(i<g&&!(h=a.data(d[i++],"tmplItem")));if(g>1)f[0]=[a.makeArray(d)];if(h&&c)f[2]=function(b){a.tmpl.afterManip(this,b,j)};r.apply(this,f)}else r.apply(this,arguments);c=0;!e&&a.tmpl.complete(b);return this}});a.extend({tmpl:function(d,h,e,c){var j,k=!c;if(k){c=p;d=a.template[d]||a.template(null,d);f={}}else if(!d){d=c.tmpl;b[c.key]=c;c.nodes=[];c.wrapped&&n(c,c.wrapped);return a(i(c,null,c.tmpl(a,c)))}if(!d)return[];if(typeof h==="function")h=h.call(c||{});e&&e.wrapped&&n(e,e.wrapped);j=a.isArray(h)?a.map(h,function(a){return a?g(e,c,d,a):null}):[g(e,c,d,h)];return k?a(i(c,null,j)):j},tmplItem:function(b){var c;if(b instanceof a)b=b[0];while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));return c||p},template:function(c,b){if(b){if(typeof b==="string")b=o(b);else if(b instanceof a)b=b[0]||{};if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));return typeof c==="string"?(a.template[c]=b):b}return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null},encode:function(a){return(""+a).split("<").join("<").split(">").join(">").split('"').join(""").split("'").join("'")}});a.extend(a.tmpl,{tag:{tmpl:{_default:{$2:"null"},open:"if($notnull_1){_=_.concat($item.nest($1,$2));}"},wrap:{_default:{$2:"null"},open:"$item.calls(_,$1,$2);_=[];",close:"call=$item.calls();_=call._.concat($item.wrap(call,_));"},each:{_default:{$2:"$index, $value"},open:"if($notnull_1){$.each($1a,function($2){with(this){",close:"}});}"},"if":{open:"if(($notnull_1) && $1a){",close:"}"},"else":{_default:{$1:"true"},open:"}else if(($notnull_1) && $1a){"},html:{open:"if($notnull_1){_.push($1a);}"},"=":{_default:{$1:"$data"},open:"if($notnull_1){_.push($.encode($1a));}"},"!":{open:""}},complete:function(){b={}},afterManip:function(f,b,d){var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];d.call(f,b);m(e);c++}});function i(e,g,f){var b,c=f?a.map(f,function(a){return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:i(a,e,a._ctnt)}):e;if(g)return c;c=c.join("");c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){b=a(e).get();m(b);if(c)b=j(c).concat(b);if(d)b=b.concat(j(d))});return b?b:j(c)}function j(c){var b=document.createElement("div");b.innerHTML=c;return a.makeArray(b.childNodes)}function o(b){return new Function("jQuery","$item","var $=jQuery,call,_=[],$data=$item.data;with($data){_.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{([^\}]*)\}/g,"{{= $1}}").replace(/\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,function(m,l,j,d,b,c,e){var i=a.tmpl.tag[j],h,f,g;if(!i)throw"Template command not found: "+j;h=i._default||[];if(c&&!/\w$/.test(b)){b+=c;c=""}if(b){b=k(b);e=e?","+k(e)+")":c?")":"";f=c?b.indexOf(".")>-1?b+c:"("+b+").call($item"+e:b;g=c?f:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}else g=f=h.$1||"null";d=k(d);return"');"+i[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(g).split("$1").join(f).split("$2").join(d?d.replace(/\s*([^\(]+)\s*(\((.*?)\))?/g,function(d,c,b,a){a=a?","+a+")":b?")":"";return a?"("+c+").call($item"+a:d}):h.$2||"")+"_.push('"})+"');}return _;")}function n(c,b){c._wrap=i(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}function k(a){return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}function s(b){var a=document.createElement("div");a.appendChild(b.cloneNode(true));return a.innerHTML}function m(o){var n="_"+c,k,j,l={},e,p,i;for(e=0,p=o.length;e<p;e++){if((k=o[e]).nodeType!==1)continue;j=k.getElementsByTagName("*");for(i=j.length-1;i>=0;i--)m(j[i]);m(k)}function m(j){var p,i=j,k,e,m;if(m=j.getAttribute(d)){while(i.parentNode&&(i=i.parentNode).nodeType===1&&!(p=i.getAttribute(d)));if(p!==m){i=i.parentNode?i.nodeType===11?0:i.getAttribute(d)||0:0;if(!(e=b[m])){e=f[m];e=g(e,b[i]||f[i],null,true);e.key=++h;b[h]=e}c&&o(m)}j.removeAttribute(d)}else if(c&&(e=a.data(j,"tmplItem"))){o(e.key);b[e.key]=e;i=a.data(j.parentNode,"tmplItem");i=i?i.key:0}if(e){k=e;while(k&&k.key!=i){k.nodes.push(j);k=k.parent}delete e._ctnt;delete e._wrap;a.data(j,"tmplItem",e)}function o(a){a=a+n;e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent,null,true)}}}function u(a,d,c,b){if(!a)return l.pop();l.push({_:a,tmpl:d,item:this,data:c,options:b})}function w(d,c,b){return a.tmpl(a.template(d),c,b,this)}function x(b,d){var c=b.options||{};c.wrapped=d;return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}function v(d,c){var b=this._wrap;return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){return c?a.innerText||a.textContent:a.outerHTML||s(a)})}function t(){var b=this.nodes;a.tmpl(null,null,null,this).insertBefore(b[0]);a(b).remove()}})(jQuery)
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>@import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');
body {
background: #1f1f1f url(https://i82.servimg.com/u/f82/19/38/53/40/patter20.png) repeat top left;
color: #fff;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size: 14px;
}
a {
color: #ddd;
text-decoration: none;
}
a:hover {
color: #00c6e3;
}
p.sub {
padding: 25px 10px 10px 10px;
text-align: left;
color: #aaa;
}
.clr {
clear: both;
}
h1 {
margin: 15px;
font-size: 30px;
text-align: center;
color: #fff;
font-family: "Pacifico", Georgia, "Times New Roman", serif;
text-shadow: 1px 1px 1px #000;
padding-bottom: 30px;
line-height: 40px;
}
h1 span {
font-size: 10px;
display: block;
letter-spacing: 2px;
font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
color: #00c6e3;
line-height: 14px;
padding-top: 10px;
text-shadow: none;
text-transform: uppercase;
}
.header {
font-size: 13px;
background: #000;
opacity: 0.9;
text-transform: uppercase;
-moz-box-shadow: 1px 0px 2px #000;
-webkit-box-shadow: 1px 0px 2px #000;
box-shadow: 1px 0px 2px #000;
}
.header a {
line-height: 18px;
padding: 0 4px;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #000;
color: #ddd;
}
.header a:hover {
color: #fff;
}
.header a span {
font-weight: bold;
}
.header span.right_ab {
float: right;
}
.content {
margin: 0px 25px 30px 25px;
}
@media screen and (max-width: 640px) {
.header a {
display: block;
text-align: center;
font-size: 10px;
text-shadow: none;
}
.header span.right_ab {
float: none;
}
}
.rg-image-wrapper {
position: relative;
padding: 20px 30px;
background: transparent url(https://i82.servimg.com/u/f82/19/38/53/40/black10.png) repeat top left;
min-height: 20px;
}
.rg-image {
position: relative;
text-align: center;
line-height: 0px;
}
.rg-image img {
max-height: 100%;
max-width: 100%;
}
.rg-image-nav a {
position: absolute;
top: 0px;
left: 0px;
background: #000 url(https://i82.servimg.com/u/f82/19/38/53/40/nav12.png) no-repeat -20% 50%;
width: 28px;
height: 100%;
text-indent: -9000px;
cursor: pointer;
opacity: 0.3;
outline: none;
}
.rg-image-nav a.rg-image-nav-next {
right: 0px;
left: auto;
background-position: 115% 50%;
}
.rg-image-nav a:hover {
opacity: 0.8;
}
.rg-caption {
text-align: center;
margin-top: 15px;
position: relative;
}
.rg-caption p {
font-size: 11px;
letter-spacing: 2px;
font-family: 'Trebuchet MS', 'Myriad Pro', Arial, sans-serif;
line-height: 16px;
padding: 0 15px;
text-transform: uppercase;
}
.rg-view {
height: 30px;
}
.rg-view a {
display: block;
float: right;
width: 16px;
height: 16px;
margin-right: 3px;
background: #464646 url(https://i82.servimg.com/u/f82/19/38/53/40/views10.png) no-repeat top left;
border: 3px solid #464646;
opacity: 0.8;
}
.rg-view a:hover {
opacity: 1.0;
}
.rg-view a.rg-view-full {
background-position: 0px 0px;
}
.rg-view a.rg-view-selected {
background-color: #6f6f6f;
border-color: #6f6f6f;
}
.rg-view a.rg-view-thumbs {
background-position: 0px -16px;
}
.rg-loading {
width: 46px;
height: 46px;
position: absolute;
top: 50%;
left: 50%;
background: #000 url(https://i82.servimg.com/u/f82/19/38/53/40/ajax-l10.gif) no-repeat center center;
margin: -23px 0px 0px -23px;
z-index: 100;
opacity: 0.7;
}
.es-carousel-wrapper {
background: #101010;
padding: 10px 27px;
position: relative;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
position: relative;
margin-bottom: 20px;
}
.es-carousel {
overflow: hidden;
background: #000;
}
.es-carousel ul {
display: none;
}
.es-carousel ul li {
height: 100%;
float: left;
display: block;
}
.es-carousel ul li a {
display: block;
border-style: solid;
border-color: #222;
opacity: 0.8;
-webkit-touch-callout: none;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.es-carousel ul li.selected a {
border-color: #fff;
opacity: 1.0;
}
.es-carousel ul li a img {
display: block;
border: none;
max-height: 100%;
max-width: 100%;
}
.es-nav span {
position: absolute;
top: 50%;
left: 8px;
background: transparent url(https://i82.servimg.com/u/f82/19/38/53/40/nav_th10.png) no-repeat top left;
width: 14px;
height: 26px;
margin-top: -13px;
text-indent: -9000px;
cursor: pointer;
opacity: 0.8;
}
.es-nav span.es-nav-next {
right: 8px;
left: auto;
background-position: top right;
}
.es-nav span:hover {
opacity: 1.0;
}(function( window, $, undefined ) {
$.fn.touchwipe = function(settings) {
var config = {
min_move_x: 20,
min_move_y: 20,
wipeLeft: function() { },
wipeRight: function() { },
wipeUp: function() { },
wipeDown: function() { },
preventDefaultEvents: true
};
if (settings) $.extend(config, settings);
this.each(function() {
var startX;
var startY;
var isMoving = false;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
}
function onTouchMove(e) {
if(config.preventDefaultEvents) {
e.preventDefault();
}
if(isMoving) {
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
var dx = startX - x;
var dy = startY - y;
if(Math.abs(dx) >= config.min_move_x) {
cancelTouch();
if(dx > 0) {
config.wipeLeft();
} else {
config.wipeRight();
}
}
else if(Math.abs(dy) >= config.min_move_y) {
cancelTouch();
if(dy > 0) {
config.wipeDown();
} else {
config.wipeUp();
}
}
}
}
function onTouchStart(e)
{
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
return this;
};
$.elastislide = function( options, element ) {
this.$el = $( element );
this._init( options );
};
$.elastislide.defaults = {
speed : 450,
easing : '',
imageW : 190,
margin : 3,
border : 2,
minItems : 1,
current : 0,
onClick : function() { return false; }
};
$.elastislide.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.elastislide.defaults, options );
this.$slider = this.$el.find('ul');
this.$items = this.$slider.children('li');
this.itemsCount = this.$items.length;
this.$esCarousel = this.$slider.parent();
this._validateOptions();
this._configure();
this._addControls();
this._initEvents();
this.$slider.show();
this._slideToCurrent( false );
},
_validateOptions : function() {
if( this.options.speed < 0 )
this.options.speed = 450;
if( this.options.margin < 0 )
this.options.margin = 4;
if( this.options.border < 0 )
this.options.border = 1;
if( this.options.minItems < 1 || this.options.minItems > this.itemsCount )
this.options.minItems = 1;
if( this.options.current > this.itemsCount - 1 )
this.options.current = 0;
},
_configure : function() {
this.current = this.options.current;
this.visibleWidth = this.$esCarousel.width();
if( this.visibleWidth < this.options.minItems * ( this.options.imageW + 2 * this.options.border ) + ( this.options.minItems - 1 ) * this.options.margin ) {
this._setDim( ( this.visibleWidth - ( this.options.minItems - 1 ) * this.options.margin ) / this.options.minItems );
this._setCurrentValues();
this.fitCount = this.options.minItems;
} else {
this._setDim();
this._setCurrentValues();
}
this.$slider.css({
width : this.sliderW
});
},
_setDim : function( elW ) {
this.$items.css({
marginRight : this.options.margin,
width : ( elW ) ? elW : this.options.imageW + 2 * this.options.border
}).children('a').css({
borderWidth : this.options.border
});
},
_setCurrentValues : function() {
this.itemW = this.$items.outerWidth(true);
this.sliderW = this.itemW * this.itemsCount;
this.visibleWidth = this.$esCarousel.width();
this.fitCount = Math.floor( this.visibleWidth / this.itemW );
},
_addControls : function() {
this.$navNext = $('<span class="es-nav-next">Next</span>');
this.$navPrev = $('<span class="es-nav-prev">Previous</span>');
$('<div class="es-nav"/>')
.append( this.$navPrev )
.append( this.$navNext )
.appendTo( this.$el );
//this._toggleControls();
},
_toggleControls : function( dir, status ) {
if( dir && status ) {
if( status === 1 )
( dir === 'right' ) ? this.$navNext.show() : this.$navPrev.show();
else
( dir === 'right' ) ? this.$navNext.hide() : this.$navPrev.hide();
}
else if( this.current === this.itemsCount - 1 || this.fitCount >= this.itemsCount )
this.$navNext.hide();
},
_initEvents : function() {
var instance = this;
$(window).bind('resize.elastislide', function( event ) {
instance._reload();
clearTimeout( instance.resetTimeout );
instance.resetTimeout = setTimeout(function() {
instance._slideToCurrent();
}, 200);
});
this.$navNext.bind('click.elastislide', function( event ) {
instance._slide('right');
});
this.$navPrev.bind('click.elastislide', function( event ) {
instance._slide('left');
});
this.$items.bind('click.elastislide', function( event ) {
instance.options.onClick( $(this) );
return false;
});
instance.$slider.touchwipe({
wipeLeft : function() {
instance._slide('right');
},
wipeRight : function() {
instance._slide('left');
}
});
},
reload : function( callback ) {
this._reload();
if ( callback ) callback.call();
},
_reload : function() {
var instance = this;
instance._setCurrentValues();
if( instance.visibleWidth < instance.options.minItems * ( instance.options.imageW + 2 * instance.options.border ) + ( instance.options.minItems - 1 ) * instance.options.margin ) {
instance._setDim( ( instance.visibleWidth - ( instance.options.minItems - 1 ) * instance.options.margin ) / instance.options.minItems );
instance._setCurrentValues();
instance.fitCount = instance.options.minItems;
} else {
instance._setDim();
instance._setCurrentValues();
}
instance.$slider.css({
width : instance.sliderW + 10 // TODO: +10px seems to solve a firefox "bug" :S
});
},
_slide : function( dir, val, anim, callback ) {
//if( this.$slider.is(':animated') )
//return false;
var ml = parseFloat( this.$slider.css('margin-left') );
if( val === undefined ) {
var amount = this.fitCount * this.itemW, val;
if( amount < 0 ) return false;
if( dir === 'right' && this.sliderW - ( Math.abs( ml ) + amount ) < this.visibleWidth ) {
amount = this.sliderW - ( Math.abs( ml ) + this.visibleWidth ) - this.options.margin;
this._toggleControls( 'right', -1 );
this._toggleControls( 'left', 1 );
}
else if( dir === 'left' && Math.abs( ml ) - amount < 0 ) {
amount = Math.abs( ml );
this._toggleControls( 'left', -1 );
this._toggleControls( 'right', 1 );
} else {
var fml;
( dir === 'right' )
? fml = Math.abs( ml ) + this.options.margin + Math.abs( amount )
: fml = Math.abs( ml ) - this.options.margin - Math.abs( amount );
if( fml > 0 )
this._toggleControls( 'left', 1 );
else
this._toggleControls( 'left', -1 );
if( fml < this.sliderW - this.visibleWidth )
this._toggleControls( 'right', 1 );
else
this._toggleControls( 'right', -1 );
}
( dir === 'right' ) ? val = '-=' + amount : val = '+=' + amount
} else {
var fml = Math.abs( val );
if( Math.max( this.sliderW, this.visibleWidth ) - fml < this.visibleWidth ) {
val = - ( Math.max( this.sliderW, this.visibleWidth ) - this.visibleWidth );
if( val !== 0 )
val += this.options.margin;
this._toggleControls( 'right', -1 );
fml = Math.abs( val );
}
if( fml > 0 )
this._toggleControls( 'left', 1 );
else
this._toggleControls( 'left', -1 );
if( Math.max( this.sliderW, this.visibleWidth ) - this.visibleWidth > fml + this.options.margin )
this._toggleControls( 'right', 1 );
else
this._toggleControls( 'right', -1 );
}
$.fn.applyStyle = ( anim === undefined ) ? $.fn.animate : $.fn.css;
var sliderCSS = { marginLeft : val };
var instance = this;
this.$slider.stop().applyStyle( sliderCSS, $.extend( true, [], { duration : this.options.speed, easing : this.options.easing, complete : function() {
if( callback ) callback.call();
} } ) );
},
_slideToCurrent : function( anim ) {
var amount = this.current * this.itemW;
this._slide('', -amount, anim );
},
add : function( $newelems, callback ) {
this.$items = this.$items.add( $newelems );
this.itemsCount = this.$items.length;
this._setDim();
this._setCurrentValues();
this.$slider.css({
width : this.sliderW
});
this._slideToCurrent();
if ( callback ) callback.call( $newelems );
},
setCurrent : function( idx, callback ) {
this.current = idx;
var ml = Math.abs( parseFloat( this.$slider.css('margin-left') ) ),
posR = ml + this.visibleWidth,
fml = Math.abs( this.current * this.itemW );
if( fml + this.itemW > posR || fml < ml ) {
this._slideToCurrent();
}
if ( callback ) callback.call();
},
destroy : function( callback ) {
this._destroy( callback );
},
_destroy : function( callback ) {
this.$el.unbind('.elastislide').removeData('elastislide');
$(window).unbind('.elastislide');
if ( callback ) callback.call();
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.elastislide = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'elastislide' );
if ( !instance ) {
logError( "cannot call methods on elastislide prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for elastislide instance" );
return;
}
instance[ options ].apply( instance, args );
});
} else {
this.each(function() {
var instance = $.data( this, 'elastislide' );
if ( !instance ) {
$.data( this, 'elastislide', new $.elastislide( options, this ) );
}
});
}
return this;
};
})( window, jQuery );
$(function() {
$.fn.imagesLoaded = function( callback ) {
var $images = this.find('img'),
len = $images.length,
_this = this,
blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
function triggerCallback() {
callback.call( _this, $images );
}
function imgLoaded() {
if ( --len <= 0 && this.src !== blank ) {
setTimeout( triggerCallback );
$images.unbind( 'load error', imgLoaded );
}
}
if ( !len ) {
triggerCallback();
}
$images.bind( 'load error', imgLoaded ).each( function() {
if (this.complete || this.complete === undefined) {
var src = this.src;
this.src = blank;
this.src = src;
}
});
return this;
};
var $rgGallery = $('#rg-gallery'),
$esCarousel = $rgGallery.find('div.es-carousel-wrapper'),
$items = $esCarousel.find('ul > li'),
itemsCount = $items.length;
Gallery = (function() {
var current = 0,
mode = 'carousel',
anim = false,
init = function() {
$items.add('<img src="https://i82.servimg.com/u/f82/19/38/53/40/ajax-l10.gif"/><img src="https://i82.servimg.com/u/f82/19/38/53/40/black10.png"/>').imagesLoaded( function() {
_addViewModes();
_addImageWrapper();
_showImage( $items.eq( current ) );
});
if( mode === 'carousel' )
_initCarousel();
},
_initCarousel = function() {
$esCarousel.show().elastislide({
imageW : 65,
onClick : function( $item ) {
if( anim ) return false;
anim = true;
_showImage($item);
current = $item.index();
}
});
$esCarousel.elastislide( 'setCurrent', current );
},
_addViewModes = function() {
var $viewfull = $('<a href="#" class="rg-view-full"></a>'),
$viewthumbs = $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>');
$rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );
$viewfull.bind('click.rgGallery', function( event ) {
if( mode === 'carousel' )
$esCarousel.elastislide( 'destroy' );
$esCarousel.hide();
$viewfull.addClass('rg-view-selected');
$viewthumbs.removeClass('rg-view-selected');
mode = 'fullview';
return false;
});
$viewthumbs.bind('click.rgGallery', function( event ) {
_initCarousel();
$viewthumbs.addClass('rg-view-selected');
$viewfull.removeClass('rg-view-selected');
mode = 'carousel';
return false;
});
if( mode === 'fullview' )
$viewfull.trigger('click');
},
_addImageWrapper= function() {
$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );
if( itemsCount > 1 ) {
var $navPrev = $rgGallery.find('a.rg-image-nav-prev'),
$navNext = $rgGallery.find('a.rg-image-nav-next'),
$imgWrapper = $rgGallery.find('div.rg-image');
$navPrev.bind('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.bind('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).bind('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}
_showImage( $items.eq( current ) );
},
_showImage = function( $item ) {
var $loader = $rgGallery.find('div.rg-loading').show();
$items.removeClass('selected');
$item.addClass('selected');
var $thumb = $item.find('img'),
largesrc = $thumb.data('large'),
title = $thumb.data('description');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title )
$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
$loader.hide();
if( mode === 'carousel' ) {
$esCarousel.elastislide( 'reload' );
$esCarousel.elastislide( 'setCurrent', current );
}
anim = false;
}).attr( 'src', largesrc );
};
return { init : init };
})();
Gallery.init();
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.