diff --git a/assets/touchTouch/touchTouch.css b/assets/touchTouch/touchTouch.css index 314919e..1029d37 100644 --- a/assets/touchTouch/touchTouch.css +++ b/assets/touchTouch/touchTouch.css @@ -1,6 +1,6 @@ /* The gallery overlay */ -#galleryOverlay{ +.touchtouch-galleryOverlay{ width:100%; height:100%; position:fixed; @@ -12,19 +12,17 @@ background-color:rgba(0,0,0,0.8); overflow:hidden; display:none; - - -moz-transition:opacity 1s ease; -webkit-transition:opacity 1s ease; transition:opacity 1s ease; } /* This class will trigger the animation */ -#galleryOverlay.visible{ +.touchtouch-galleryOverlay.visible{ opacity:1; } -#gallerySlider{ +.touchtouch-gallerySlider{ height:100%; left:0; @@ -33,13 +31,11 @@ width:100%; white-space: nowrap; position:absolute; - - -moz-transition:left 0.4s ease; -webkit-transition:left 0.4s ease; transition:left 0.4s ease; } -#gallerySlider .placeholder{ +.touchtouch-gallerySlider .touchtouch-placeholder{ background: url("preloader.gif") no-repeat center center; height: 100%; line-height: 1px; @@ -51,7 +47,7 @@ /* The before element moves the * image halfway from the top */ -#gallerySlider .placeholder:before{ +.touchtouch-gallerySlider .touchtouch-placeholder:before{ content: ""; display: inline-block; height: 50%; @@ -59,46 +55,38 @@ margin-right:-1px; } -#gallerySlider .placeholder img{ +.touchtouch-gallerySlider .touchtouch-placeholder img{ display: inline-block; max-height: 100%; max-width: 100%; vertical-align: middle; } -#gallerySlider.rightSpring{ - -moz-animation: rightSpring 0.3s; +.touchtouch-gallerySlider.rightSpring{ -webkit-animation: rightSpring 0.3s; + animation: rightSpring 0.3s; } -#gallerySlider.leftSpring{ - -moz-animation: leftSpring 0.3s; +.touchtouch-gallerySlider.leftSpring{ -webkit-animation: leftSpring 0.3s; + animation: leftSpring 0.3s; } -/* Firefox Keyframe Animations */ +/* Safari and Chrome Keyframe Animations */ -@-moz-keyframes rightSpring{ +@-webkit-keyframes rightSpring{ 0%{ margin-left:0px;} 50%{ margin-left:-30px;} 100%{ margin-left:0px;} } -@-moz-keyframes leftSpring{ +@-webkit-keyframes leftSpring{ 0%{ margin-left:0px;} 50%{ margin-left:30px;} 100%{ margin-left:0px;} } -/* Safari and Chrome Keyframe Animations */ - -@-webkit-keyframes rightSpring{ - 0%{ margin-left:0px;} - 50%{ margin-left:-30px;} - 100%{ margin-left:0px;} -} - -@-webkit-keyframes leftSpring{ +@keyframes leftSpring{ 0%{ margin-left:0px;} 50%{ margin-left:30px;} 100%{ margin-left:0px;} @@ -106,7 +94,7 @@ /* Arrows */ -#prevArrow,#nextArrow{ +.touchtouch-prevArrow,.touchtouch-nextArrow{ border:none; text-decoration:none; background:url('arrows.png') no-repeat; @@ -118,22 +106,20 @@ top:50%; margin-top:-29px; - - -moz-transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease; transition:opacity 0.2s ease; } -#prevArrow:hover, #nextArrow:hover{ +.touchtouch-prevArrow:hover, .touchtouch-nextArrow:hover{ opacity:1; } -#prevArrow{ +.touchtouch-prevArrow{ background-position:left top; left:40px; } -#nextArrow{ +.touchtouch-nextArrow{ background-position:right top; right:40px; } diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 16498e6..1a7eb8c 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -7,22 +7,18 @@ */ -(function(){ - - /* Private variables */ - - var overlay = $('
'), - slider = $('
'), - prevArrow = $(''), - nextArrow = $(''), - overlayVisible = false; - +(function($) { /* Creating the plugin */ - $.fn.touchTouch = function(){ + $.fn.touchTouch = function() { - var placeholders = $([]), + var overlay = $('
'), + slider = $('
'), + prevArrow = $(''), + nextArrow = $(''), + overlayVisible = false, + placeholders = $([]), index = 0, allitems = this, items = allitems; @@ -32,40 +28,38 @@ slider.appendTo(overlay); // Creating a placeholder for each image - items.each(function(){ + items.each(function() { - placeholders = placeholders.add($('
')); + placeholders = placeholders.add($('
')); }); // Hide the gallery if the background is touched / clicked - slider.append(placeholders).on('click',function(e){ + slider.append(placeholders).on('click', function(e) { - if(!$(e.target).is('img')){ + if (!$(e.target).is('img')) { hideOverlay(); } }); // Listen for touch events on the body and check if they // originated in #gallerySlider img - the images in the slider. - $('body').on('touchstart', '#gallerySlider img', function(e){ + $('body').on('touchstart', '#gallerySlider img', function(e) { var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; - slider.on('touchmove',function(e){ + slider.on('touchmove', function(e) { e.preventDefault(); touch = e.originalEvent.touches[0] || - e.originalEvent.changedTouches[0]; + e.originalEvent.changedTouches[0]; - if(touch.pageX - startX > 10){ + if (touch.pageX - startX > 10) { slider.off('touchmove'); showPrevious(); - } - - else if (touch.pageX - startX < -10){ + } else if (touch.pageX - startX < -10) { slider.off('touchmove'); showNext(); @@ -76,14 +70,14 @@ // highlighting on Android return false; - }).on('touchend',function(){ + }).on('touchend', function() { slider.off('touchmove'); }); // Listening for clicks on the thumbnails - items.on('click', function(e){ + items.on('click', function(e) { e.preventDefault(); @@ -101,7 +95,7 @@ galleryName = $this.attr('data-gallery'); selectorType = 'item'; - //If gallery name given to some ancestor + //If gallery name given to some ancestor } else if ($closestGallery.length) { galleryName = $closestGallery.attr('data-gallery'); @@ -113,16 +107,16 @@ //items and ancestor. Ancestor will always win because of above statments. if (galleryName && selectorType == 'item') { - items = $('[data-gallery='+galleryName+']'); + items = $('[data-gallery=' + galleryName + ']'); } else if (galleryName && selectorType == 'ancestor') { //Filter to check if item has an ancestory with data-gallery attribute - items = items.filter(function(){ + items = items.filter(function() { - return $(this).parent().closest('[data-gallery]').length; + return $(this).parent().closest('[data-gallery]').length; - }); + }); } @@ -133,41 +127,37 @@ showImage(index); // Preload the next image - preload(index+1); + preload(index + 1); // Preload the previous - preload(index-1); + preload(index - 1); }); // If the browser does not have support // for touch, display the arrows - if ( !("ontouchstart" in window) ){ + if (!("ontouchstart" in window)) { overlay.append(prevArrow).append(nextArrow); - prevArrow.click(function(e){ + prevArrow.click(function(e) { e.preventDefault(); showPrevious(); }); - nextArrow.click(function(e){ + nextArrow.click(function(e) { e.preventDefault(); showNext(); }); } // Listen for arrow keys - $(window).bind('keydown', function(e){ + $(window).bind('keydown', function(e) { if (e.keyCode == 37) { showPrevious(); - } - - else if (e.keyCode==39) { + } else if (e.keyCode == 39) { showNext(); - } - - else if (e.keyCode==27) { //esc + } else if (e.keyCode == 27) { //esc hideOverlay(); } @@ -177,16 +167,16 @@ /* Private functions */ - function showOverlay(index){ + function showOverlay(index) { // If the overlay is already shown, exit - if (overlayVisible){ + if (overlayVisible) { return false; } // Show the overlay overlay.show(); - setTimeout(function(){ + setTimeout(function() { // Trigger the opacity CSS transition overlay.addClass('visible'); }, 100); @@ -198,10 +188,10 @@ overlayVisible = true; } - function hideOverlay(){ + function hideOverlay() { // If the overlay is not shown, exit - if(!overlayVisible){ + if (!overlayVisible) { return false; } @@ -216,30 +206,30 @@ items = allitems; } - function offsetSlider(index){ + function offsetSlider(index) { // This will trigger a smooth css transition - slider.css('left',(-index*100)+'%'); + slider.css('left', (-index * 100) + '%'); } // Preload an image by its index in the items array - function preload(index){ + function preload(index) { - setTimeout(function(){ + setTimeout(function() { showImage(index); }, 1000); } // Show image in the slider - function showImage(index){ + function showImage(index) { // If the index is outside the bonds of the array - if(index < 0 || index >= items.length){ + if (index < 0 || index >= items.length) { return false; } // Call the load function with the href attribute of the item - loadImage(items.eq(index).attr('href'), function(){ + loadImage(items.eq(index).attr('href'), function() { placeholders.eq(index).html(this); }); } @@ -247,50 +237,46 @@ // Load the image and execute a callback function. // Returns a jQuery object - function loadImage(src, callback){ + function loadImage(src, callback) { - var img = $('').on('load', function(){ + var img = $('').on('load', function() { callback.call(img); }); - img.attr('src',src); + img.attr('src', src); } - function showNext(){ + function showNext() { // If this is not the last image - if(index+1 < items.length){ + if (index + 1 < items.length) { index++; offsetSlider(index); - preload(index+1); - } - - else{ + preload(index + 1); + } else { // Trigger the spring animation slider.addClass('rightSpring'); - setTimeout(function(){ + setTimeout(function() { slider.removeClass('rightSpring'); - },500); + }, 500); } } - function showPrevious(){ + function showPrevious() { // If this is not the first image - if(index>0){ + if (index > 0) { index--; offsetSlider(index); - preload(index-1); - } - - else{ + preload(index - 1); + } else { // Trigger the spring animation slider.addClass('leftSpring'); - setTimeout(function(){ + setTimeout(function() { slider.removeClass('leftSpring'); - },500); + }, 500); } } }; -})(jQuery); +})(jQuery); \ No newline at end of file