support head requests for images

dashboard-ui/index.html

@@ -18,9 +18,8 @@
 
             <div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
                 <h1 style="margin-top: 0;">${HeaderWelcomeToMediaBrowserWebClient}</h1>
-                <p>${MessageLearnHowToCustomize}</p>
                 <p>
-                    <button class="btnDismissWelcome" type="button" data-icon="delete">${ButtonDismiss}</button>
+                    <button class="btnDismissWelcome" type="button" data-icon="arrow-r" data-iconpos="right">${ButtonTakeTheTour}</button>
                 </p>
             </div>
 

dashboard-ui/itembynamedetails.html

@@ -135,7 +135,7 @@
                         <p id="itemLinks"></p>
                         <div class="detailButtonsContainer desktopDetailButtons" style="text-align: left;">
                             <button class="btnPlay hide" type="button" data-icon="play" data-inline="true" data-mini="true">${ButtonPlay}</button>
-                            <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
+                            <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
                         </div>
                     </td>
                 </tr>

dashboard-ui/itemdetails.html

@@ -136,7 +136,7 @@
                                 <button class="btnPlayTrailer hide" type="button" data-icon="video" data-inline="true" data-mini="true">${ButtonPlayTrailer}</button>
                                 <a class="btnPlayExternalTrailer hide" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlayTrailer}</a>
                                 <a class="btnPlayExternal hide" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlay}</a>
-                                <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
+                                <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
                                 <a class="btnSync hide" data-role="button" data-icon="refresh" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
                             </div>
                         </td>
@@ -153,7 +153,7 @@
                     <button class="btnPlayTrailer hide" type="button" data-icon="video" data-inline="true" data-mini="true">${ButtonPlayTrailer}</button>
                     <a class="btnPlayExternalTrailer hide" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlayTrailer}</a>
                     <a class="btnPlayExternal hide" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlay}</a>
-                    <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
+                    <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonOptions}</button>
                     <a class="btnSync hide" data-role="button" data-icon="refresh" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
                 </div>
                 <p class="itemGenres mobileGenres"></p>

dashboard-ui/scripts/indexpage.js

@@ -525,18 +525,41 @@
         }
     }
 
-    var homePageDismissValue = '2';
+    var homePageDismissValue = '4';
+    var homePageTourKey = 'homePageTour';
 
     function dismissWelcome(page, userId) {
 
         ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
 
-            result.CustomPrefs.homePageWelcomeDismissed = homePageDismissValue;
+            result.CustomPrefs[homePageTourKey] = homePageDismissValue;
-            ApiClient.updateDisplayPreferences('home', result, userId, 'webclient').done(function () {
+            ApiClient.updateDisplayPreferences('home', result, userId, 'webclient');
-
-                $('.welcomeMessage', page).hide();
-
         });
+    }
+
+    function takeTour(page, userId) {
+
+        $.swipebox([
+                { href: 'css/images/tour/web/tourcontent.jpg', title: Globalize.translate('WebClientTourContent') },
+                { href: 'css/images/tour/web/tourmovies.jpg', title: Globalize.translate('WebClientTourMovies') },
+                { href: 'css/images/tour/web/tourmouseover.jpg', title: Globalize.translate('WebClientTourMouseOver') },
+                { href: 'css/images/tour/web/tourtaphold.jpg', title: Globalize.translate('WebClientTourTapHold') },
+                { href: 'css/images/tour/web/toureditor.png', title: Globalize.translate('WebClientTourMetadataManager') },
+                { href: 'css/images/tour/web/tourplaylist.png', title: Globalize.translate('WebClientTourPlaylists') },
+                { href: 'css/images/tour/web/tourcollections.jpg', title: Globalize.translate('WebClientTourCollections') },
+                { href: 'css/images/tour/web/tourusersettings1.png', title: Globalize.translate('WebClientTourUserPreferences1') },
+                { href: 'css/images/tour/web/tourusersettings2.png', title: Globalize.translate('WebClientTourUserPreferences2') },
+                { href: 'css/images/tour/web/tourusersettings3.png', title: Globalize.translate('WebClientTourUserPreferences3') },
+                { href: 'css/images/tour/web/tourusersettings4.png', title: Globalize.translate('WebClientTourUserPreferences4') },
+                { href: 'css/images/tour/web/tourmobile1.jpg', title: Globalize.translate('WebClientTourMobile1') },
+                { href: 'css/images/tour/web/tourmobile2.png', title: Globalize.translate('WebClientTourMobile2') },
+                { href: 'css/images/tour/enjoy.jpg', title: Globalize.translate('MessageEnjoyYourStay') }
+        ], {
+            afterClose: function () {
+                dismissWelcome(page, userId);
+                $('.welcomeMessage', page).hide();
+            },
+            hideBarsDelay: 30000
         });
     }
 
@@ -547,7 +570,7 @@
         var userId = Dashboard.getCurrentUserId();
 
         $('.btnDismissWelcome', page).on('click', function () {
-            dismissWelcome(page, userId);
+            takeTour(page, userId);
         });
 
     }).on('pagebeforeshow', "#indexPage", function () {
@@ -558,7 +581,7 @@
 
         ApiClient.getDisplayPreferences('home', userId, 'webclient').done(function (result) {
 
-            if (result.CustomPrefs.homePageWelcomeDismissed == homePageDismissValue) {
+            if (result.CustomPrefs[homePageTourKey] == homePageDismissValue) {
                 $('.welcomeMessage', page).hide();
             } else {
                 $('.welcomeMessage', page).show();

dashboard-ui/thirdparty/swipebox-master/css/swipebox.css

@@ -0,0 +1,293 @@
+/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
+html.swipebox-html.swipebox-touch {
+  overflow: hidden !important;
+}
+
+#swipebox-overlay img {
+  border: none !important;
+}
+
+#swipebox-overlay {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999 !important;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+#swipebox-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+#swipebox-slider {
+  -webkit-transition: -webkit-transform 0.4s ease;
+  transition: transform 0.4s ease;
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+  white-space: nowrap;
+  position: absolute;
+  display: none;
+  cursor: pointer;
+}
+#swipebox-slider .slide {
+  height: 100%;
+  width: 100%;
+  line-height: 1px;
+  text-align: center;
+  display: inline-block;
+}
+#swipebox-slider .slide:before {
+  content: "";
+  display: inline-block;
+  height: 50%;
+  width: 1px;
+  margin-right: -1px;
+}
+#swipebox-slider .slide img, #swipebox-slider .slide .swipebox-video-container {
+  display: inline-block;
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  vertical-align: middle;
+}
+#swipebox-slider .slide .swipebox-video-container {
+  background: none;
+  max-width: 1140px;
+  max-height: 100%;
+  width: 100%;
+  padding: 5%;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+#swipebox-slider .slide .swipebox-video-container .swipebox-video {
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  position: relative;
+}
+#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe {
+  width: 100% !important;
+  height: 100% !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+#swipebox-slider .slide-loading {
+  background: url(../img/loader.gif) no-repeat center center;
+}
+
+#swipebox-bottom-bar,
+#swipebox-top-bar {
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  position: absolute;
+  left: 0;
+  z-index: 999;
+  height: 50px;
+  width: 100%;
+}
+
+#swipebox-bottom-bar {
+  bottom: -50px;
+}
+#swipebox-bottom-bar.visible-bars {
+  -webkit-transform: translate3d(0, -50px, 0);
+  transform: translate3d(0, -50px, 0);
+}
+
+#swipebox-top-bar {
+  top: -50px;
+}
+#swipebox-top-bar.visible-bars {
+  -webkit-transform: translate3d(0, 50px, 0);
+  transform: translate3d(0, 50px, 0);
+}
+
+#swipebox-title {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+#swipebox-prev,
+#swipebox-next,
+#swipebox-close {
+  background-image: url(../img/icons.png);
+  background-repeat: no-repeat;
+  border: none !important;
+  text-decoration: none !important;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  top: 0;
+}
+
+#swipebox-arrows {
+  display: block;
+  margin: 0 auto;
+  width: 100%;
+  height: 50px;
+}
+
+#swipebox-prev {
+  background-position: -32px 13px;
+  float: left;
+}
+
+#swipebox-next {
+  background-position: -78px 13px;
+  float: right;
+}
+
+#swipebox-close {
+  top: 0;
+  right: 0;
+  position: absolute;
+  z-index: 9999;
+  background-position: 15px 12px;
+}
+
+.swipebox-no-close-button #swipebox-close {
+  display: none;
+}
+
+#swipebox-prev.disabled,
+#swipebox-next.disabled {
+  opacity: 0.3;
+}
+
+.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider {
+  -webkit-animation: rightSpring 0.3s;
+  animation: rightSpring 0.3s;
+}
+.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider {
+  -webkit-animation: leftSpring 0.3s;
+  animation: leftSpring 0.3s;
+}
+
+.swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease;
+  content: ' ';
+  position: absolute;
+  z-index: 999;
+  top: 0;
+  height: 100%;
+  width: 20px;
+  opacity: 0;
+}
+.swipebox-touch #swipebox-container:before {
+  left: 0;
+  -webkit-box-shadow: inset 10px 0px 10px -8px #656565;
+  box-shadow: inset 10px 0px 10px -8px #656565;
+}
+.swipebox-touch #swipebox-container:after {
+  right: 0;
+  -webkit-box-shadow: inset -10px 0px 10px -8px #656565;
+  box-shadow: inset -10px 0px 10px -8px #656565;
+}
+.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before {
+  opacity: 1;
+}
+.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after {
+  opacity: 1;
+}
+
+@-webkit-keyframes rightSpring {
+  0% {
+    left: 0;
+  }
+
+  50% {
+    left: -30px;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+
+@keyframes rightSpring {
+  0% {
+    left: 0;
+  }
+
+  50% {
+    left: -30px;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+@-webkit-keyframes leftSpring {
+  0% {
+    left: 0;
+  }
+
+  50% {
+    left: 30px;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+@keyframes leftSpring {
+  0% {
+    left: 0;
+  }
+
+  50% {
+    left: 30px;
+  }
+
+  100% {
+    left: 0;
+  }
+}
+@media screen and (min-width: 800px) {
+  #swipebox-close {
+    right: 10px;
+  }
+
+  #swipebox-arrows {
+    width: 92%;
+    max-width: 800px;
+  }
+}
+/* Skin 
+--------------------------*/
+#swipebox-overlay {
+  background: #0d0d0d;
+}
+
+#swipebox-bottom-bar,
+#swipebox-top-bar {
+  text-shadow: 1px 1px 1px black;
+  background: #000;
+  opacity: 0.95;
+}
+
+#swipebox-top-bar {
+  color: white !important;
+  font-size: 15px;
+  line-height: 43px;
+  font-family: Helvetica, Arial, sans-serif;
+}

dashboard-ui/thirdparty/swipebox-master/css/swipebox.min.css

@@ -0,0 +1 @@
+/*! Swipebox v1.3.0 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */html.swipebox-html.swipebox-touch{overflow:hidden!important}#swipebox-overlay img{border:none!important}#swipebox-overlay{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999!important;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#swipebox-container{position:relative;width:100%;height:100%}#swipebox-slider{-webkit-transition:-webkit-transform .4s ease;transition:transform .4s ease;height:100%;left:0;top:0;width:100%;white-space:nowrap;position:absolute;display:none;cursor:pointer}#swipebox-slider .slide{height:100%;width:100%;line-height:1px;text-align:center;display:inline-block}#swipebox-slider .slide:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#swipebox-slider .slide .swipebox-video-container,#swipebox-slider .slide img{display:inline-block;max-height:100%;max-width:100%;margin:0;padding:0;width:auto;height:auto;vertical-align:middle}#swipebox-slider .slide .swipebox-video-container{background:0 0;max-width:1140px;max-height:100%;width:100%;padding:5%;-webkit-box-sizing:border-box;box-sizing:border-box}#swipebox-slider .slide .swipebox-video-container .swipebox-video{width:100%;height:0;padding-bottom:56.25%;overflow:hidden;position:relative}#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe{width:100%!important;height:100%!important;position:absolute;top:0;left:0}#swipebox-slider .slide-loading{background:url(../img/loader.gif) no-repeat center center}#swipebox-bottom-bar,#swipebox-top-bar{-webkit-transition:.5s;transition:.5s;position:absolute;left:0;z-index:999;height:50px;width:100%}#swipebox-bottom-bar{bottom:-50px}#swipebox-bottom-bar.visible-bars{-webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}#swipebox-top-bar{top:-50px}#swipebox-top-bar.visible-bars{-webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}#swipebox-title{display:block;width:100%;text-align:center}#swipebox-close,#swipebox-next,#swipebox-prev{background-image:url(../img/icons.png);background-repeat:no-repeat;border:none!important;text-decoration:none!important;cursor:pointer;width:50px;height:50px;top:0}#swipebox-arrows{display:block;margin:0 auto;width:100%;height:50px}#swipebox-prev{background-position:-32px 13px;float:left}#swipebox-next{background-position:-78px 13px;float:right}#swipebox-close{top:0;right:0;position:absolute;z-index:9999;background-position:15px 12px}.swipebox-no-close-button #swipebox-close{display:none}#swipebox-next.disabled,#swipebox-prev.disabled{opacity:.3}.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider{-webkit-animation:rightSpring .3s;animation:rightSpring .3s}.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider{-webkit-animation:leftSpring .3s;animation:leftSpring .3s}.swipebox-touch #swipebox-container:after,.swipebox-touch #swipebox-container:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .3s ease;transition:all .3s ease;content:' ';position:absolute;z-index:999;top:0;height:100%;width:20px;opacity:0}.swipebox-touch #swipebox-container:before{left:0;-webkit-box-shadow:inset 10px 0 10px -8px #656565;box-shadow:inset 10px 0 10px -8px #656565}.swipebox-touch #swipebox-container:after{right:0;-webkit-box-shadow:inset -10px 0 10px -8px #656565;box-shadow:inset -10px 0 10px -8px #656565}.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before,.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after{opacity:1}@-webkit-keyframes rightSpring{0%{left:0}50%{left:-30px}100%{left:0}}@keyframes rightSpring{0%{left:0}50%{left:-30px}100%{left:0}}@-webkit-keyframes leftSpring{0%{left:0}50%{left:30px}100%{left:0}}@keyframes leftSpring{0%{left:0}50%{left:30px}100%{left:0}}@media screen and (min-width:800px){#swipebox-close{right:10px}#swipebox-arrows{width:92%;max-width:800px}}#swipebox-overlay{background:#0d0d0d}#swipebox-bottom-bar,#swipebox-top-bar{text-shadow:1px 1px 1px #000;background:#000;opacity:.95}#swipebox-top-bar{color:#fff!important;font-size:15px;line-height:43px;font-family:Helvetica,Arial,sans-serif}

dashboard-ui/thirdparty/swipebox-master/img/icons.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?> <!-- Generator: IcoMoon.io --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="120" height="24" viewBox="0 0 120 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M 17.384,17.705q0.00,0.536 -0.375,0.911l-1.821,1.821q-0.375,0.375 -0.911,0.375t-0.911-0.375l-3.938-3.938l-3.938,3.938q-0.375,0.375 -0.911,0.375t-0.911-0.375l-1.821-1.821q-0.375-0.375 -0.375-0.911t 0.375-0.911l 3.938-3.938l-3.938-3.938q-0.375-0.375 -0.375-0.911t 0.375-0.911l 1.821-1.821q 0.375-0.375 0.911-0.375t 0.911,0.375l 3.938,3.938l 3.938-3.938q 0.375-0.375 0.911-0.375t 0.911,0.375l 1.821,1.821q 0.375,0.375 0.375,0.911 t-0.375,0.911l-3.938,3.938l 3.938,3.938q 0.375,0.375 0.375,0.911zM 57.938,21.067l-8.732-8.719q-0.496-0.496 -0.496-1.212t 0.496-1.212l 8.732-8.719q 0.496-0.496 1.212-0.496t 1.212,0.496l 1.004,1.004q 0.496,0.496 0.496,1.212t-0.496,1.212l-6.509,6.509l 6.509,6.496q 0.496,0.509 0.496,1.219t-0.496,1.205l-1.004,1.004q-0.496,0.496 -1.212,0.496t-1.212-0.496zM 110.719,11.143q0.00,0.696 -0.496,1.219l-8.732,8.719q-0.496,0.496 -1.205,0.496t-1.205-0.496l-1.018-1.004q-0.496-0.522 -0.496-1.219q0.00-0.71 0.496-1.205l 6.509-6.509l-6.509-6.496q-0.496-0.522 -0.496-1.219q0.00-0.71 0.496-1.205l 1.018-1.004q 0.482-0.509 1.205-0.509t 1.205,0.509l 8.732,8.719q 0.496,0.496 0.496,1.205z"></path></svg>

dashboard-ui/thirdparty/swipebox-master/js/jquery.swipebox.js

@@ -0,0 +1,873 @@
+/*! Swipebox v1.3.0.1 | Constantin Saguin csag.co | MIT License | github.com/brutaldesign/swipebox */
+
+;( function ( window, document, $, undefined ) {
+
+	$.swipebox = function( elem, options ) {
+
+		// Default options
+		var ui,
+			defaults = {
+				useCSS : true,
+				useSVG : true,
+				initialIndexOnArray : 0,
+				hideCloseButtonOnMobile : false,
+				hideBarsDelay : 3000,
+				videoMaxWidth : 1140,
+				vimeoColor : 'cccccc',
+				beforeOpen: null,
+				afterOpen: null,
+				afterClose: null,
+				loopAtEnd: false
+			},
+			
+			plugin = this,
+			elements = [], // slides array [ { href:'...', title:'...' }, ...],
+			$elem,
+			selector = elem.selector,
+			$selector = $( selector ),
+			isMobile = navigator.userAgent.match( /(iPad)|(iPhone)|(iPod)|(Android)|(PlayBook)|(BB10)|(BlackBerry)|(Opera Mini)|(IEMobile)|(webOS)|(MeeGo)/i ),
+			isTouch = isMobile !== null || document.createTouch !== undefined || ( 'ontouchstart' in window ) || ( 'onmsgesturechange' in window ) || navigator.msMaxTouchPoints,
+			supportSVG = !! document.createElementNS && !! document.createElementNS( 'http://www.w3.org/2000/svg', 'svg').createSVGRect,
+			winWidth = window.innerWidth ? window.innerWidth : $( window ).width(),
+			winHeight = window.innerHeight ? window.innerHeight : $( window ).height(),
+			currentX = 0,
+			/* jshint multistr: true */
+			html = '<div id="swipebox-overlay">\
+					<div id="swipebox-container">\
+						<div id="swipebox-slider"></div>\
+						<div id="swipebox-top-bar">\
+							<div id="swipebox-title"></div>\
+						</div>\
+						<div id="swipebox-bottom-bar">\
+							<div id="swipebox-arrows">\
+								<a id="swipebox-prev"></a>\
+								<a id="swipebox-next"></a>\
+							</div>\
+						</div>\
+						<a id="swipebox-close"></a>\
+					</div>\
+			</div>';
+
+		plugin.settings = {};
+
+		$.swipebox.close = function () {
+			ui.closeSlide();
+		};
+
+		$.swipebox.extend = function () {
+			return ui;
+		};
+
+		plugin.init = function() {
+
+			plugin.settings = $.extend( {}, defaults, options );
+
+			if ( $.isArray( elem ) ) {
+
+				elements = elem;
+				ui.target = $( window );
+				ui.init( plugin.settings.initialIndexOnArray );
+
+			} else {
+
+				$( document ).on( 'click', selector, function( event ) {
+
+					// console.log( isTouch );
+
+					if ( event.target.parentNode.className === 'slide current' ) {
+
+						return false;
+					}
+					
+					if ( ! $.isArray( elem ) ) {
+						ui.destroy();
+						$elem = $( selector );
+						ui.actions();
+					}
+					
+					elements = [];
+					var index , relType, relVal;
+
+					// Allow for HTML5 compliant attribute before legacy use of rel
+					if ( ! relVal ) {
+						relType = 'data-rel';
+						relVal  = $( this ).attr( relType );
+					}
+
+					if ( ! relVal ) {
+						relType = 'rel';
+						relVal = $( this ).attr( relType );
+					}
+
+					if ( relVal && relVal !== '' && relVal !== 'nofollow' ) {
+						$elem = $selector.filter( '[' + relType + '="' + relVal + '"]' );
+					} else {
+						$elem = $( selector );
+					}
+
+					$elem.each( function() {
+
+						var title = null,
+							href = null;
+						
+						if ( $( this ).attr( 'title' ) ) {
+							title = $( this ).attr( 'title' );
+						}
+							
+
+						if ( $( this ).attr( 'href' ) ) {
+							href = $( this ).attr( 'href' );
+						}
+							
+						elements.push( {
+							href: href,
+							title: title
+						} );
+					} );
+
+					index = $elem.index( $( this ) );
+					event.preventDefault();
+					event.stopPropagation();
+					ui.target = $( event.target );
+					ui.init( index );
+				} );
+			}
+		};
+
+		ui = {
+
+			/**
+			 * Initiate Swipebox
+			 */
+			init : function( index ) {
+				if ( plugin.settings.beforeOpen ) {
+					plugin.settings.beforeOpen();
+				}
+				this.target.trigger( 'swipebox-start' );
+				$.swipebox.isOpen = true;
+				this.build();
+				this.openSlide( index );
+				this.openMedia( index );
+				this.preloadMedia( index+1 );
+				this.preloadMedia( index-1 );
+				if ( plugin.settings.afterOpen ) {
+					plugin.settings.afterOpen();
+				}
+			},
+
+			/**
+			 * Built HTML containers and fire main functions
+			 */
+			build : function () {
+				var $this = this, bg;
+
+				$( 'body' ).append( html );
+
+				if ( supportSVG && plugin.settings.useSVG === true ) {
+					bg = $( '#swipebox-close' ).css( 'background-image' );
+					bg = bg.replace( 'png', 'svg' );
+					$( '#swipebox-prev, #swipebox-next, #swipebox-close' ).css( {
+						'background-image' : bg
+					} );
+				}
+
+				if ( isMobile ) {
+					$( '#swipebox-bottom-bar, #swipebox-top-bar' ).remove();
+				}
+				
+				$.each( elements,  function() {
+					$( '#swipebox-slider' ).append( '<div class="slide"></div>' );
+				} );
+
+				$this.setDim();
+				$this.actions();
+				
+				if ( isTouch ) {
+					$this.gesture();
+				}
+				
+				// Devices can have both touch and keyboard input so always allow key events
+				$this.keyboard();
+				
+				$this.animBars();
+				$this.resize();
+				
+			},
+
+			/**
+			 * Set dimensions depending on windows width and height
+			 */
+			setDim : function () {
+
+				var width, height, sliderCss = {};
+				
+				// Reset dimensions on mobile orientation change
+				if ( 'onorientationchange' in window ) {
+
+					window.addEventListener( 'orientationchange', function() {
+						if ( window.orientation === 0 ) {
+							width = winWidth;
+							height = winHeight;
+						} else if ( window.orientation === 90 || window.orientation === -90 ) {
+							width = winHeight;
+							height = winWidth;
+						}
+					}, false );
+					
+				
+				} else {
+
+					width = window.innerWidth ? window.innerWidth : $( window ).width();
+					height = window.innerHeight ? window.innerHeight : $( window ).height();
+				}
+
+				sliderCss = {
+					width : width,
+					height : height
+				};
+
+				$( '#swipebox-overlay' ).css( sliderCss );
+
+			},
+
+			/**
+			 * Reset dimensions on window resize envent
+			 */
+			resize : function () {
+				var $this = this;
+				
+				$( window ).resize( function() {
+					$this.setDim();
+				} ).resize();
+			},
+
+			/**
+			 * Check if device supports CSS transitions
+			 */
+			supportTransition : function () {
+				
+				var prefixes = 'transition WebkitTransition MozTransition OTransition msTransition KhtmlTransition'.split( ' ' ),
+					i;
+				
+				for ( i = 0; i < prefixes.length; i++ ) {
+					if ( document.createElement( 'div' ).style[ prefixes[i] ] !== undefined ) {
+						return prefixes[i];
+					}
+				}
+				return false;
+			},
+
+			/**
+			 * Check if CSS transitions are allowed (options + devicesupport)
+			 */
+			doCssTrans : function () {
+				if ( plugin.settings.useCSS && this.supportTransition() ) {
+					return true;
+				}
+			},
+
+			/**
+			 * Touch navigation
+			 */
+			gesture : function () {
+				
+				var $this = this,
+					index,
+					hDistance,
+					vDistance,
+					hDistanceLast,
+					vDistanceLast,
+					hDistancePercent,
+					vSwipe = false,
+					hSwipe = false,
+					hSwipMinDistance = 10,
+					vSwipMinDistance = 50,
+					startCoords = {},
+					endCoords = {},
+					bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' ),
+					slider = $( '#swipebox-slider' );
+
+				bars.addClass( 'visible-bars' );
+				$this.setTimeout();
+
+				$( 'body' ).bind( 'touchstart', function( event ) {
+
+					$( this ).addClass( 'touching' );
+					index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) );
+					endCoords = event.originalEvent.targetTouches[0];
+					startCoords.pageX = event.originalEvent.targetTouches[0].pageX;
+					startCoords.pageY = event.originalEvent.targetTouches[0].pageY;
+
+					$( '#swipebox-slider' ).css( {
+						'-webkit-transform' : 'translate3d(' + currentX +'%, 0, 0)',
+						'transform' : 'translate3d(' + currentX + '%, 0, 0)'
+					} );
+
+					$( '.touching' ).bind( 'touchmove',function( event ) {
+						event.preventDefault();
+						event.stopPropagation();
+						endCoords = event.originalEvent.targetTouches[0];
+
+						if ( ! hSwipe ) {
+							vDistanceLast = vDistance;
+							vDistance = endCoords.pageY - startCoords.pageY;
+							if ( Math.abs( vDistance ) >= vSwipMinDistance || vSwipe ) {
+								var opacity = 0.75 - Math.abs(vDistance) / slider.height();
+
+								slider.css( { 'top': vDistance + 'px' } );
+								slider.css( { 'opacity': opacity } );
+
+								vSwipe = true;
+							}
+						}
+
+						hDistanceLast = hDistance;
+						hDistance = endCoords.pageX - startCoords.pageX;
+						hDistancePercent = hDistance * 100 / winWidth;
+
+						if ( ! hSwipe && ! vSwipe && Math.abs( hDistance ) >= hSwipMinDistance ) {
+							$( '#swipebox-slider' ).css( {
+								'-webkit-transition' : '',
+								'transition' : ''
+							} );
+							hSwipe = true;
+						}
+
+						if ( hSwipe ) {
+
+							// swipe left
+							if ( 0 < hDistance ) {
+								
+								// first slide
+								if ( 0 === index ) {
+									// console.log( 'first' );
+									$( '#swipebox-overlay' ).addClass( 'leftSpringTouch' );
+								} else {
+									// Follow gesture
+									$( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
+									$( '#swipebox-slider' ).css( {
+										'-webkit-transform' : 'translate3d(' + ( currentX + hDistancePercent ) +'%, 0, 0)',
+										'transform' : 'translate3d(' + ( currentX + hDistancePercent ) + '%, 0, 0)'
+									} );
+								}
+
+							// swipe rught
+							} else if ( 0 > hDistance ) {
+
+								// last Slide
+								if ( elements.length === index +1 ) {
+									// console.log( 'last' );
+									$( '#swipebox-overlay' ).addClass( 'rightSpringTouch' );
+								} else {
+									$( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
+									$( '#swipebox-slider' ).css( {
+										'-webkit-transform' : 'translate3d(' + ( currentX + hDistancePercent ) +'%, 0, 0)',
+										'transform' : 'translate3d(' + ( currentX + hDistancePercent ) + '%, 0, 0)'
+									} );
+								}
+							
+							}
+						}
+					} );
+	
+					return false;
+
+				} ).bind( 'touchend',function( event ) {
+					event.preventDefault();
+					event.stopPropagation();
+
+					$( '#swipebox-slider' ).css( {
+						'-webkit-transition' : '-webkit-transform 0.4s ease',
+						'transition' : 'transform 0.4s ease'
+					} );
+
+					vDistance = endCoords.pageY - startCoords.pageY;
+					hDistance = endCoords.pageX - startCoords.pageX;
+					hDistancePercent = hDistance*100/winWidth;
+
+					// Swipe to bottom to close
+					if ( vSwipe ) {
+						vSwipe = false;
+						if ( Math.abs( vDistance ) >= 2 * vSwipMinDistance && Math.abs( vDistance ) > Math.abs( vDistanceLast ) ) {
+							var vOffset = vDistance > 0 ? slider.height() : - slider.height();
+							slider.animate( { top: vOffset + 'px', 'opacity': 0 },
+								300,
+								function () {
+									$this.closeSlide();
+								} );
+						} else {
+							slider.animate( { top: 0, 'opacity': 1 }, 300 );
+						}
+
+					} else if ( hSwipe ) {
+						
+						hSwipe = false;
+
+						// swipeLeft
+						if( hDistance >= hSwipMinDistance && hDistance >= hDistanceLast) {
+							
+							$this.getPrev();
+						
+						// swipeRight
+						} else if ( hDistance <= -hSwipMinDistance && hDistance <= hDistanceLast) {
+							
+							$this.getNext();
+						}
+					
+					} else { // Top and bottom bars have been removed on touchable devices
+						// tap
+						if ( ! bars.hasClass( 'visible-bars' ) ) {
+							$this.showBars();
+							$this.setTimeout();
+						} else {
+							$this.clearTimeout();
+							$this.hideBars();
+						}
+					}
+
+					$( '#swipebox-slider' ).css( {
+						'-webkit-transform' : 'translate3d(' + currentX + '%, 0, 0)',
+						'transform' : 'translate3d(' + currentX + '%, 0, 0)'
+					} );
+
+					$( '#swipebox-overlay' ).removeClass( 'leftSpringTouch' ).removeClass( 'rightSpringTouch' );
+					$( '.touching' ).off( 'touchmove' ).removeClass( 'touching' );
+						
+				} );
+			},
+
+			/**
+			 * Set timer to hide the action bars
+			 */
+			setTimeout: function () {
+				if ( plugin.settings.hideBarsDelay > 0 ) {
+					var $this = this;
+					$this.clearTimeout();
+					$this.timeout = window.setTimeout( function() {
+							$this.hideBars();
+						},
+						
+						plugin.settings.hideBarsDelay
+					);
+				}
+			},
+			
+			/**
+			 * Clear timer
+			 */
+			clearTimeout: function () {
+				window.clearTimeout( this.timeout );
+				this.timeout = null;
+			},
+
+			/**
+			 * Show navigation and title bars
+			 */
+			showBars : function () {
+				var bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
+				if ( this.doCssTrans() ) {
+					bars.addClass( 'visible-bars' );
+				} else {
+					$( '#swipebox-top-bar' ).animate( { top : 0 }, 500 );
+					$( '#swipebox-bottom-bar' ).animate( { bottom : 0 }, 500 );
+					setTimeout( function() {
+						bars.addClass( 'visible-bars' );
+					}, 1000 );
+				}
+			},
+
+			/**
+			 * Hide navigation and title bars
+			 */
+			hideBars : function () {
+				var bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
+				if ( this.doCssTrans() ) {
+					bars.removeClass( 'visible-bars' );
+				} else {
+					$( '#swipebox-top-bar' ).animate( { top : '-50px' }, 500 );
+					$( '#swipebox-bottom-bar' ).animate( { bottom : '-50px' }, 500 );
+					setTimeout( function() {
+						bars.removeClass( 'visible-bars' );
+					}, 1000 );
+				}
+			},
+
+			/**
+			 * Animate navigation and top bars
+			 */
+			animBars : function () {
+				var $this = this,
+					bars = $( '#swipebox-top-bar, #swipebox-bottom-bar' );
+					
+				bars.addClass( 'visible-bars' );
+				$this.setTimeout();
+				
+				$( '#swipebox-slider' ).click( function() {
+					if ( ! bars.hasClass( 'visible-bars' ) ) {
+						$this.showBars();
+						$this.setTimeout();
+					}
+				} );
+
+				$( '#swipebox-bottom-bar' ).hover( function() {
+					$this.showBars();
+					bars.addClass( 'visible-bars' );
+					$this.clearTimeout();
+			
+				}, function() {
+					if ( plugin.settings.hideBarsDelay > 0 ) {
+						bars.removeClass( 'visible-bars' );
+						$this.setTimeout();
+					}
+
+				} );
+			},
+
+			/**
+			 * Keyboard navigation
+			 */
+			keyboard : function () {
+				var $this = this;
+				$( window ).bind( 'keyup', function( event ) {
+					event.preventDefault();
+					event.stopPropagation();
+					
+					if ( event.keyCode === 37 ) {
+						
+						$this.getPrev();
+					
+					} else if ( event.keyCode === 39 ) {
+						
+						$this.getNext();
+					
+					} else if ( event.keyCode === 27 ) {
+						
+						$this.closeSlide();
+					}
+				} );
+			},
+
+			/**
+			 * Navigation events : go to next slide, go to prevous slide and close
+			 */
+			actions : function () {
+				var $this = this,
+					action = 'touchend click'; // Just detect for both event types to allow for multi-input
+				
+				if ( elements.length < 2 ) {
+					
+					$( '#swipebox-bottom-bar' ).hide();
+
+					if ( undefined === elements[ 1 ] ) {
+						$( '#swipebox-top-bar' ).hide();
+					}
+				
+				} else {
+					$( '#swipebox-prev' ).bind( action, function( event ) {
+						event.preventDefault();
+						event.stopPropagation();
+						$this.getPrev();
+						$this.setTimeout();
+					} );
+					
+					$( '#swipebox-next' ).bind( action, function( event ) {
+						event.preventDefault();
+						event.stopPropagation();
+						$this.getNext();
+						$this.setTimeout();
+					} );
+				}
+
+				$( '#swipebox-close' ).bind( action, function() {
+					$this.closeSlide();
+				} );
+			},
+			
+			/**
+			 * Set current slide
+			 */
+			setSlide : function ( index, isFirst ) {
+				
+				isFirst = isFirst || false;
+				
+				var slider = $( '#swipebox-slider' );
+
+				currentX = -index*100;
+				
+				if ( this.doCssTrans() ) {
+					slider.css( {
+						'-webkit-transform' : 'translate3d(' + (-index*100)+'%, 0, 0)',
+						'transform' : 'translate3d(' + (-index*100)+'%, 0, 0)'
+					} );
+				} else {
+					slider.animate( { left : ( -index*100 )+'%' } );
+				}
+				
+				$( '#swipebox-slider .slide' ).removeClass( 'current' );
+				$( '#swipebox-slider .slide' ).eq( index ).addClass( 'current' );
+				this.setTitle( index );
+
+				if ( isFirst ) {
+					slider.fadeIn();
+				}
+
+				$( '#swipebox-prev, #swipebox-next' ).removeClass( 'disabled' );
+				
+				if ( index === 0 ) {
+					$( '#swipebox-prev' ).addClass( 'disabled' );
+				} else if ( index === elements.length - 1 && plugin.settings.loopAtEnd !== true ) {
+					$( '#swipebox-next' ).addClass( 'disabled' );
+				}
+			},
+		
+			/**
+			 * Open slide
+			 */
+			openSlide : function ( index ) {
+				$( 'html' ).addClass( 'swipebox-html' );
+				if ( isTouch ) {
+					$( 'html' ).addClass( 'swipebox-touch' );
+
+					if ( plugin.settings.hideCloseButtonOnMobile ) {
+						$( 'html' ).addClass( 'swipebox-no-close-button' );
+					}
+				} else {
+					$( 'html' ).addClass( 'swipebox-no-touch' );
+				}
+				$( window ).trigger( 'resize' ); // fix scroll bar visibility on desktop
+				this.setSlide( index, true );
+			},
+		
+			/**
+			 * Set a time out if the media is a video
+			 */
+			preloadMedia : function ( index ) {
+				var $this = this,
+					src = null;
+
+				if ( elements[ index ] !== undefined ) {
+					src = elements[ index ].href;
+				}
+
+				if ( ! $this.isVideo( src ) ) {
+					setTimeout( function() {
+						$this.openMedia( index );
+					}, 1000);
+				} else {
+					$this.openMedia( index );
+				}
+			},
+			
+			/**
+			 * Open
+			 */
+			openMedia : function ( index ) {
+				var $this = this,
+					src,
+					slide;
+
+				if ( elements[ index ] !== undefined ) {
+					src = elements[ index ].href;
+				}
+
+				if ( index < 0 || index >= elements.length ) {
+					return false;
+				}
+
+				slide = $( '#swipebox-slider .slide' ).eq( index );
+
+				if ( ! $this.isVideo( src ) ) {
+					slide.addClass( 'slide-loading' );
+					$this.loadMedia( src, function() {
+						slide.removeClass( 'slide-loading' );
+						slide.html( this );
+					} );
+				} else {
+					slide.html( $this.getVideo( src ) );
+				}
+				
+			},
+
+			/**
+			 * Set link title attribute as caption
+			 */
+			setTitle : function ( index ) {
+				var title = null;
+
+				$( '#swipebox-title' ).empty();
+
+				if ( elements[ index ] !== undefined ) {
+					title = elements[ index ].title;
+				}
+
+				if ( title ) {
+					$( '#swipebox-top-bar' ).show();
+					$( '#swipebox-title' ).append( title );
+				} else {
+					$( '#swipebox-top-bar' ).hide();
+				}
+			},
+
+			/**
+			 * Check if the URL is a video
+			 */
+			isVideo : function ( src ) {
+
+				if ( src ) {
+					if ( src.match( /youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+)/) || src.match( /vimeo\.com\/([0-9]*)/ ) || src.match( /youtu\.be\/([a-zA-Z0-9\-_]+)/ ) ) {
+						return true;
+					}
+
+					if ( src.toLowerCase().indexOf( 'swipeboxvideo=1' ) >= 0 ) {
+
+						return true;
+					}
+				}
+					
+			},
+
+			/**
+			 * Get video iframe code from URL
+			 */
+			getVideo : function( url ) {
+				var iframe = '',
+					youtubeUrl = url.match( /watch\?v=([a-zA-Z0-9\-_]+)/ ),
+					youtubeShortUrl = url.match(/youtu\.be\/([a-zA-Z0-9\-_]+)/),
+					vimeoUrl = url.match( /vimeo\.com\/([0-9]*)/ );
+				if ( youtubeUrl || youtubeShortUrl) {
+					if ( youtubeShortUrl ) {
+						youtubeUrl = youtubeShortUrl;
+					}
+					iframe = '<iframe width="560" height="315" src="//www.youtube.com/embed/' + youtubeUrl[1] + '" frameborder="0" allowfullscreen></iframe>';
+				
+				} else if ( vimeoUrl ) {
+
+					iframe = '<iframe width="560" height="315"  src="//player.vimeo.com/video/' + vimeoUrl[1] + '?byline=0&amp;portrait=0&amp;color='+plugin.settings.vimeoColor+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
+				
+				}
+
+				if ( youtubeUrl || youtubeShortUrl || vimeoUrl ) {
+
+				} else {
+					iframe = '<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>';
+				}
+
+				return '<div class="swipebox-video-container" style="max-width:' + plugin.settings.videomaxWidth + 'px"><div class="swipebox-video">'+iframe+'</div></div>';
+			},
+			
+			/**
+			 * Load image
+			 */
+			loadMedia : function ( src, callback ) {
+				if ( ! this.isVideo( src ) ) {
+					var img = $( '<img>' ).on( 'load', function() {
+						callback.call( img );
+					} );
+
+					img.attr( 'src', src );
+				}
+			},
+			
+			/**
+			 * Get next slide
+			 */
+			getNext : function () {
+				var $this = this,
+					src,
+					index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) );
+				if ( index + 1 < elements.length ) {
+					
+					src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src' );
+					$( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
+					index++;
+					$this.setSlide( index );
+					$this.preloadMedia( index+1 );
+				} else {
+					
+					if ( plugin.settings.loopAtEnd === true ) {
+						src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src' );
+						$( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
+						index = 0;
+						$this.preloadMedia( index );
+						$this.setSlide( index );
+						$this.preloadMedia( index + 1 );
+					} else {
+						$( '#swipebox-overlay' ).addClass( 'rightSpring' );
+						setTimeout( function() {
+							$( '#swipebox-overlay' ).removeClass( 'rightSpring' );
+						}, 500 );
+					}
+				}
+			},
+			
+			/**
+			 * Get previous slide
+			 */
+			getPrev : function () {
+				var index = $( '#swipebox-slider .slide' ).index( $( '#swipebox-slider .slide.current' ) ),
+					src;
+				if ( index > 0 ) {
+					src = $( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe').attr( 'src' );
+					$( '#swipebox-slider .slide' ).eq( index ).contents().find( 'iframe' ).attr( 'src', src );
+					index--;
+					this.setSlide( index );
+					this.preloadMedia( index-1 );
+				} else {
+					$( '#swipebox-overlay' ).addClass( 'leftSpring' );
+					setTimeout( function() {
+						$( '#swipebox-overlay' ).removeClass( 'leftSpring' );
+					}, 500 );
+				}
+			},
+
+			/**
+			 * Close
+			 */
+			closeSlide : function () {
+				$( 'html' ).removeClass( 'swipebox-html' );
+				$( 'html' ).removeClass( 'swipebox-touch' );
+				$( window ).trigger( 'resize' );
+				this.destroy();
+			},
+
+			/**
+			 * Destroy the whole thing
+			 */
+			destroy : function () {
+				$( window ).unbind( 'keyup' );
+				$( 'body' ).unbind( 'touchstart' );
+				$( 'body' ).unbind( 'touchmove' );
+				$( 'body' ).unbind( 'touchend' );
+				$( '#swipebox-slider' ).unbind();
+				$( '#swipebox-overlay' ).remove();
+				
+				if ( ! $.isArray( elem ) ) {
+					elem.removeData( '_swipebox' );
+				}
+					
+				if ( this.target ) {
+					this.target.trigger( 'swipebox-destroy' );
+				}
+					
+				$.swipebox.isOpen = false;
+				
+				if ( plugin.settings.afterClose ) {
+					plugin.settings.afterClose();
+				}
+			}
+		};
+
+		plugin.init();
+	};
+
+	$.fn.swipebox = function( options ) {
+
+		if ( ! $.data( this, '_swipebox' ) ) {
+			var swipebox = new $.swipebox( this, options );
+			this.data( '_swipebox', swipebox );
+		}
+		return this.data( '_swipebox' );
+	
+	};
+
+}( window, document, jQuery ) );