From f8a5f9510818b81dafccac445df83288e05321f3 Mon Sep 17 00:00:00 2001 From: Leo Lee Date: Sun, 28 Apr 2013 19:30:25 -0400 Subject: [PATCH 01/17] added the ability of adding captions. need to fix some bugs --- assets/css/styles.css | 410 ++++++++-------- assets/touchTouch/touchTouch.css | 293 ++++++------ assets/touchTouch/touchTouch.jquery.js | 620 +++++++++++++------------ index.html | 144 +++--- 4 files changed, 767 insertions(+), 700 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 0148379..09d2d7c 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,203 +1,207 @@ -/*------------------------- - Simple reset ---------------------------*/ - - -*{ - margin:0; - padding:0; -} - - -/*------------------------- - General Styles ---------------------------*/ - - -html{ - background:url('../img/tile.jpg') repeat #a0c5d1; -} - - -body{ - background:url('../img/bg.jpg') no-repeat 50% -250px; - font:14px/1.3 'Segoe UI',Arial, sans-serif; -} - -a, a:visited { - outline:none; - color:#1c4f64; -} - -a:hover{ - text-decoration:none; -} - -section, footer, header{ - display: block; -} - - -/*---------------------------- - The Header ------------------------------*/ - - -header{ - background-color:#fff; - background-image: linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); - background-image: -o-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); - background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); - background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); - background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); - - padding:20px; - box-shadow:0 2px 4px rgba(0,0,0,0.3); -} - -header h1, header h2{ - text-align:center; - font-weight: normal; -} - -header h1{ - font: 42px/50px 'Dancing Script', sans-serif; - color:#5e676d; -} - -header h2{ - font-style:italic; - font-size:13px; - color:#b2483a; -} - - -/*---------------------------- - Thumbnails ------------------------------*/ - -.thumbs{ - width:480px; - margin:60px auto 35px; - text-align:center; -} - -.thumbs a{ - width:120px; - height:120px; - display:inline-block; - border:7px solid #303030; - box-shadow:0 1px 3px rgba(0,0,0,0.5); - border-radius:4px; - margin: 6px 6px 40px; - position:relative; - text-decoration:none; - - background-position:center center; - background-repeat: no-repeat; - - background-size:cover; - -moz-background-size:cover; - -webkit-background-size:cover; -} - -.thumbs a:after{ - background-color: #303030; - border-radius: 7px; - bottom: -136px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); - color: #FFFFFF; - content: attr(title); - display: inline-block; - font-size: 10px; - max-width: 90px; - overflow: hidden; - padding: 2px 10px; - position: relative; - text-align: center; - white-space: nowrap; -} - -#credit{ - background-color: rgba(255, 255, 255, 0.2); - border-radius: 8px; - font-size: 11px; - margin: 0 auto 70px; - opacity: 0.5; - padding: 12px 16px; - text-align: center; - width: 400px; -} - - -/*---------------------------- - Media Queries ------------------------------*/ - - -@media screen and (max-width: 960px) { - .thumbs, #credit{ - width:auto; - } - - footer{ - display:none; - } - - #bsaHolder{ - display:none; - } -} - - -/*---------------------------- - The Footer ------------------------------*/ - - -footer{ - background-color: #111111; - bottom: 0; - box-shadow: 0 -1px 2px rgba(0,0,0,0.4); - height: 45px; - left: 0; - position: fixed; - width: 100%; - z-index: 100000; -} - -footer h2{ - color: #EEEEEE; - font-size: 14px; - font-weight: normal; - left: 50%; - margin-left: -400px; - padding: 13px 0 0; - position: absolute; - width: 540px; -} - -footer h2 i{ - font-style:normal; - color:#888; -} - -footer a.tzine,a.tzine:visited{ - color: #999999; - font-size: 12px; - left: 50%; - margin: 16px 0 0 110px; - position: absolute; - text-decoration: none; - top: 0; -} - -footer a i{ - color:#ccc; - font-style: normal; -} - -footer a i b{ - color:#c92020; - font-weight: normal; -} +/*------------------------- + Simple reset +--------------------------*/ + + +*{ + margin:0; + padding:0; +} + + +/*------------------------- + General Styles +--------------------------*/ + + +html{ + background:url('../img/tile.jpg') repeat #a0c5d1; +} + + +body{ + background:url('../img/bg.jpg') no-repeat 50% -250px; + font:14px/1.3 'Segoe UI',Arial, sans-serif; +} + +a, a:visited { + outline:none; + color:#1c4f64; +} + +a:hover{ + text-decoration:none; +} + +section, footer, header{ + display: block; +} + + +/*---------------------------- + The Header +-----------------------------*/ + + +header{ + background-color:#fff; + background-image: linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); + background-image: -o-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); + background-image: -moz-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); + background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); + background-image: -ms-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); + + padding:20px; + box-shadow:0 2px 4px rgba(0,0,0,0.3); +} + +header h1, header h2{ + text-align:center; + font-weight: normal; +} + +header h1{ + font: 42px/50px 'Dancing Script', sans-serif; + color:#5e676d; +} + +header h2{ + font-style:italic; + font-size:13px; + color:#b2483a; +} + + +/*---------------------------- + Thumbnails +-----------------------------*/ + +.thumbs{ + width:480px; + margin:60px auto 35px; + text-align:center; +} + +.thumbs p{ + + +} +.thumbs a{ + width:120px; + height:120px; + display:inline-block; + border:7px solid #303030; + box-shadow:0 1px 3px rgba(0,0,0,0.5); + border-radius:4px; + margin: 6px 6px 40px; + position:relative; + text-decoration:none; + + background-position:center center; + background-repeat: no-repeat; + + background-size:cover; + -moz-background-size:cover; + -webkit-background-size:cover; +} + +.thumbs a:after{ + background-color: #303030; + border-radius: 7px; + bottom: -136px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + color: #FFFFFF; + content: attr(title); + display: inline-block; + font-size: 10px; + max-width: 90px; + overflow: hidden; + padding: 2px 10px; + position: relative; + text-align: center; + white-space: nowrap; +} + +#credit{ + background-color: rgba(255, 255, 255, 0.2); + border-radius: 8px; + font-size: 11px; + margin: 0 auto 70px; + opacity: 0.5; + padding: 12px 16px; + text-align: center; + width: 400px; +} + + +/*---------------------------- + Media Queries +-----------------------------*/ + + +@media screen and (max-width: 960px) { + .thumbs, #credit{ + width:auto; + } + + footer{ + display:none; + } + + #bsaHolder{ + display:none; + } +} + + +/*---------------------------- + The Footer +-----------------------------*/ + + +footer{ + background-color: #111111; + bottom: 0; + box-shadow: 0 -1px 2px rgba(0,0,0,0.4); + height: 45px; + left: 0; + position: fixed; + width: 100%; + z-index: 100000; +} + +footer h2{ + color: #EEEEEE; + font-size: 14px; + font-weight: normal; + left: 50%; + margin-left: -400px; + padding: 13px 0 0; + position: absolute; + width: 540px; +} + +footer h2 i{ + font-style:normal; + color:#888; +} + +footer a.tzine,a.tzine:visited{ + color: #999999; + font-size: 12px; + left: 50%; + margin: 16px 0 0 110px; + position: absolute; + text-decoration: none; + top: 0; +} + +footer a i{ + color:#ccc; + font-style: normal; +} + +footer a i b{ + color:#c92020; + font-weight: normal; +} diff --git a/assets/touchTouch/touchTouch.css b/assets/touchTouch/touchTouch.css index 314919e..e859a4d 100644 --- a/assets/touchTouch/touchTouch.css +++ b/assets/touchTouch/touchTouch.css @@ -1,139 +1,154 @@ -/* The gallery overlay */ - -#galleryOverlay{ - width:100%; - height:100%; - position:fixed; - top:0; - left:0; - opacity:0; - z-index:100000; - background-color:#222; - 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{ - opacity:1; -} - -#gallerySlider{ - height:100%; - - left:0; - top:0; - - 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{ - background: url("preloader.gif") no-repeat center center; - height: 100%; - line-height: 1px; - text-align: center; - width:100%; - display:inline-block; -} - -/* The before element moves the - * image halfway from the top */ - -#gallerySlider .placeholder:before{ - content: ""; - display: inline-block; - height: 50%; - width: 1px; - margin-right:-1px; -} - -#gallerySlider .placeholder img{ - display: inline-block; - max-height: 100%; - max-width: 100%; - vertical-align: middle; -} - -#gallerySlider.rightSpring{ - -moz-animation: rightSpring 0.3s; - -webkit-animation: rightSpring 0.3s; -} - -#gallerySlider.leftSpring{ - -moz-animation: leftSpring 0.3s; - -webkit-animation: leftSpring 0.3s; -} - -/* Firefox Keyframe Animations */ - -@-moz-keyframes rightSpring{ - 0%{ margin-left:0px;} - 50%{ margin-left:-30px;} - 100%{ margin-left:0px;} -} - -@-moz-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{ - 0%{ margin-left:0px;} - 50%{ margin-left:30px;} - 100%{ margin-left:0px;} -} - -/* Arrows */ - -#prevArrow,#nextArrow{ - border:none; - text-decoration:none; - background:url('arrows.png') no-repeat; - opacity:0.5; - cursor:pointer; - position:absolute; - width:43px; - height:58px; - - 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{ - opacity:1; -} - -#prevArrow{ - background-position:left top; - left:40px; -} - -#nextArrow{ - background-position:right top; - right:40px; -} +/* The gallery overlay */ + +#galleryOverlay{ + width:100%; + height:100%; + position:fixed; + top:0; + left:0; + opacity:0; + z-index:100000; + background-color:#222; + 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{ + opacity:1; +} + +#gallerySlider{ + height:100%; + + left:0; + top:0; + + 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{ + background: url("preloader.gif") no-repeat center center; + height: 100%; + line-height: 1px; + text-align: center; + width:100%; + display:inline-block; +} + +/* The before element moves the + * image halfway from the top */ + +#gallerySlider .placeholder:before{ + content: ""; + display: inline-block; + height: 50%; + width: 1px; + margin-right:-1px; +} + +#gallerySlider .placeholder img{ + display: inline-block; + max-height: 100%; + max-width: 100%; + vertical-align: middle; +} +#gallerySlider .placeholder .image-caption{ + display:none; + line-height:normal; + margin:auto; + text-align:left; + padding:3px 0; + word-wrap:break-word; + text-overflow:ellipsis; + overflow:hidden; + height:24px; + top:-30px; + background-color:#333; + opacity:0.8; + position:relative; + +} +#gallerySlider.rightSpring{ + -moz-animation: rightSpring 0.3s; + -webkit-animation: rightSpring 0.3s; +} + +#gallerySlider.leftSpring{ + -moz-animation: leftSpring 0.3s; + -webkit-animation: leftSpring 0.3s; +} + +/* Firefox Keyframe Animations */ + +@-moz-keyframes rightSpring{ + 0%{ margin-left:0px;} + 50%{ margin-left:-30px;} + 100%{ margin-left:0px;} +} + +@-moz-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{ + 0%{ margin-left:0px;} + 50%{ margin-left:30px;} + 100%{ margin-left:0px;} +} + +/* Arrows */ + +#prevArrow,#nextArrow{ + border:none; + text-decoration:none; + background:url('arrows.png') no-repeat; + opacity:0.5; + cursor:pointer; + position:absolute; + width:43px; + height:58px; + + 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{ + opacity:1; +} + +#prevArrow{ + background-position:left top; + left:40px; +} + +#nextArrow{ + background-position:right top; + right:40px; +} diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 65afeae..4892352 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -1,292 +1,330 @@ -/** - * @name jQuery touchTouch plugin - * @author Martin Angelov - * @version 1.0 - * @url http://tutorialzine.com/2012/04/mobile-touch-gallery/ - * @license MIT License - */ - - -(function(){ - - /* Private variables */ - - var overlay = $('
'), - slider = $('
'), - prevArrow = $(''), - nextArrow = $(''), - overlayVisible = false; - - - /* Creating the plugin */ - - $.fn.touchTouch = function(){ - - var placeholders = $([]), - index = 0, - allitems = this, - items = allitems; - - // Appending the markup to the page - overlay.hide().appendTo('body'); - slider.appendTo(overlay); - - // Creating a placeholder for each image - items.each(function(){ - - placeholders = placeholders.add($('
')); - }); - - // Hide the gallery if the background is touched / clicked - slider.append(placeholders).on('click',function(e){ - - 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){ - - var touch = e.originalEvent, - startX = touch.changedTouches[0].pageX; - - slider.on('touchmove',function(e){ - - e.preventDefault(); - - touch = e.originalEvent.touches[0] || - e.originalEvent.changedTouches[0]; - - if(touch.pageX - startX > 10){ - - slider.off('touchmove'); - showPrevious(); - } - - else if (touch.pageX - startX < -10){ - - slider.off('touchmove'); - showNext(); - } - }); - - // Return false to prevent image - // highlighting on Android - return false; - - }).on('touchend',function(){ - - slider.off('touchmove'); - - }); - - // Listening for clicks on the thumbnails - items.on('click', function(e){ - - e.preventDefault(); - - var $this = $(this), - galleryName, - selectorType, - $closestGallery = $this.parent().closest('[data-gallery]'); - - // Find gallery name and change items object to only have - // that gallery - - //If gallery name given to each item - if ($this.attr('data-gallery')) { - - galleryName = $this.attr('data-gallery'); - selectorType = 'item'; - - //If gallery name given to some ancestor - } else if ($closestGallery.length) { - - galleryName = $closestGallery.attr('data-gallery'); - selectorType = 'ancestor'; - - } - - //These statements kept seperate in case elements have data-gallery on both - //items and ancestor. Ancestor will always win because of above statments. - if (galleryName && selectorType == 'item') { - - 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(){ - - return $(this).parent().closest('[data-gallery]').length; - - }); - - } - - // Find the position of this image - // in the collection - index = items.index(this); - showOverlay(index); - showImage(index); - - // Preload the next image - preload(index+1); - - // Preload the previous - preload(index-1); - - }); - - // If the browser does not have support - // for touch, display the arrows - if ( !("ontouchstart" in window) ){ - overlay.append(prevArrow).append(nextArrow); - - prevArrow.click(function(e){ - e.preventDefault(); - showPrevious(); - }); - - nextArrow.click(function(e){ - e.preventDefault(); - showNext(); - }); - } - - // Listen for arrow keys - $(window).bind('keydown', function(e){ - - if (e.keyCode == 37) { - showPrevious(); - } - - else if (e.keyCode==39) { - showNext(); - } - - }); - - - /* Private functions */ - - - function showOverlay(index){ - // If the overlay is already shown, exit - if (overlayVisible){ - return false; - } - - // Show the overlay - overlay.show(); - - setTimeout(function(){ - // Trigger the opacity CSS transition - overlay.addClass('visible'); - }, 100); - - // Move the slider to the correct image - offsetSlider(index); - - // Raise the visible flag - overlayVisible = true; - } - - function hideOverlay(){ - - // If the overlay is not shown, exit - if(!overlayVisible){ - return false; - } - - // Hide the overlay - overlay.hide().removeClass('visible'); - overlayVisible = false; - - //Clear preloaded items - $('.placeholder').empty(); - - //Reset possibly filtered items - items = allitems; - } - - function offsetSlider(index){ - - // This will trigger a smooth css transition - slider.css('left',(-index*100)+'%'); - } - - // Preload an image by its index in the items array - function preload(index){ - - setTimeout(function(){ - showImage(index); - }, 1000); - } - - // Show image in the slider - function showImage(index){ - - // If the index is outside the bonds of the array - 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(){ - placeholders.eq(index).html(this); - }); - } - - // Load the image and execute a callback function. - // Returns a jQuery object - - function loadImage(src, callback){ - - var img = $('').on('load', function(){ - callback.call(img); - }); - - img.attr('src',src); - } - - function showNext(){ - - // If this is not the last image - if(index+1 < items.length){ - index++; - offsetSlider(index); - preload(index+1); - } - - else{ - // Trigger the spring animation - slider.addClass('rightSpring'); - setTimeout(function(){ - slider.removeClass('rightSpring'); - },500); - } - } - - function showPrevious(){ - - // If this is not the first image - if(index>0){ - index--; - offsetSlider(index); - preload(index-1); - } - - else{ - // Trigger the spring animation - slider.addClass('leftSpring'); - setTimeout(function(){ - slider.removeClass('leftSpring'); - },500); - } - } - }; - +/** + * @name jQuery touchTouch plugin + * @author Martin Angelov + * @version 1.0 + * @url http://tutorialzine.com/2012/04/mobile-touch-gallery/ + * @license MIT License + */ + + +(function(){ + + /* Private variables */ + + var overlay = $('
'), + slider = $('
'), + prevArrow = $(''), + nextArrow = $(''), + overlayVisible = false; + + + /* Creating the plugin */ + + $.fn.touchTouch = function(){ + + var placeholders = $([]), + index = 0, + allitems = this, + items = allitems; + //locate the image captions + var captions = items.parent().find('p'); + + //hide the caption after initialization + captions.remove(); + + // Appending the markup to the page + overlay.hide().appendTo('body'); + slider.appendTo(overlay); + + // Creating a placeholder for each image + items.each(function(){ + + placeholders = placeholders.add($('

')); + }); + + // Hide the gallery if the background is touched / clicked + slider.append(placeholders).on('click',function(e){ + + 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){ + + var touch = e.originalEvent, + startX = touch.changedTouches[0].pageX; + + slider.on('touchmove',function(e){ + + e.preventDefault(); + + touch = e.originalEvent.touches[0] || + e.originalEvent.changedTouches[0]; + + if(touch.pageX - startX > 10){ + + slider.off('touchmove'); + showPrevious(); + } + + else if (touch.pageX - startX < -10){ + + slider.off('touchmove'); + showNext(); + } + }); + + // Return false to prevent image + // highlighting on Android + return false; + + }).on('touchend',function(){ + + slider.off('touchmove'); + + }); + + // Listening for clicks on the thumbnails + items.on('click', function(e){ + + e.preventDefault(); + + var $this = $(this), + galleryName, + selectorType, + $closestGallery = $this.parent().closest('[data-gallery]'); + + // Find gallery name and change items object to only have + // that gallery + + //If gallery name given to each item + if ($this.attr('data-gallery')) { + + galleryName = $this.attr('data-gallery'); + selectorType = 'item'; + + //If gallery name given to some ancestor + } else if ($closestGallery.length) { + + galleryName = $closestGallery.attr('data-gallery'); + selectorType = 'ancestor'; + + } + + //These statements kept seperate in case elements have data-gallery on both + //items and ancestor. Ancestor will always win because of above statments. + if (galleryName && selectorType == 'item') { + + 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(){ + + return $(this).parent().closest('[data-gallery]').length; + + }); + + } + + // Find the position of this image + // in the collection + index = items.index(this); + + showOverlay(index); + showImage(index); + + + // Preload the next image + preload(index+1); + + // Preload the previous + preload(index-1); + + + + }); + + // If the browser does not have support + // for touch, display the arrows + if ( !("ontouchstart" in window) ){ + overlay.append(prevArrow).append(nextArrow); + + prevArrow.click(function(e){ + e.preventDefault(); + showPrevious(); + }); + + nextArrow.click(function(e){ + e.preventDefault(); + showNext(); + }); + } + + // Listen for arrow keys + $(window).bind('keydown', function(e){ + + if (e.keyCode == 37) { + showPrevious(); + } + + else if (e.keyCode==39) { + showNext(); + } + + }); + + + /* Private functions */ + + + function showOverlay(index){ + // If the overlay is already shown, exit + if (overlayVisible){ + return false; + } + + // Show the overlay + overlay.show(); + + setTimeout(function(){ + // Trigger the opacity CSS transition + overlay.addClass('visible'); + }, 100); + + // Move the slider to the correct image + offsetSlider(index); + + // Raise the visible flag + overlayVisible = true; + } + + function hideOverlay(){ + + // If the overlay is not shown, exit + if(!overlayVisible){ + return false; + } + + // Hide the overlay + overlay.hide().removeClass('visible'); + overlayVisible = false; + + //Clear preloaded items + //$('.placeholder').empty(); + $('.placeholder img').remove(); + + //Reset possibly filtered items + items = allitems; + } + + function offsetSlider(index){ + + // This will trigger a smooth css transition + slider.css('left',(-index*100)+'%'); + } + + // Preload an image by its index in the items array + function preload(index){ + + setTimeout(function(){ + showImage(index); + }, 1000); + } + + // Show image in the slider + function showImage(index){ + + // If the index is outside the bonds of the array + 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(){ + if(placeholders.eq(index).find('img').length == 0) + { + placeholders.eq(index).prepend(this); + + showCaption(index); + + + } + + + }); + } + + // Load the image and execute a callback function. + // Returns a jQuery object + + function loadImage(src, callback){ + + var img = $('').on('load', function(){ + callback.call(img); + }); + + img.attr('src',src); + + } + + function showNext(){ + + // If this is not the last image + if(index+1 < items.length){ + index++; + offsetSlider(index); + + preload(index+1); + } + + else{ + // Trigger the spring animation + slider.addClass('rightSpring'); + setTimeout(function(){ + slider.removeClass('rightSpring'); + },500); + } + } + + function showPrevious(){ + + // If this is not the first image + if(index>0){ + index--; + offsetSlider(index); + + preload(index-1); + } + + else{ + // Trigger the spring animation + slider.addClass('leftSpring'); + setTimeout(function(){ + slider.removeClass('leftSpring'); + },500); + } + } + + function showCaption(idx){ + + + var current_placeholder = placeholders.eq(idx); + + var img_width = current_placeholder.find('img').width(); + + + current_placeholder.find('.image-caption').css('width',img_width).text(captions.eq(idx).text()).show(); + + + + + + } + }; + })(jQuery); \ No newline at end of file diff --git a/index.html b/index.html index 1e73798..2d44fa7 100644 --- a/index.html +++ b/index.html @@ -1,67 +1,77 @@ - - - - - A Touch Optimized Gallery | Tutorialzine Freebie - - - - - - - - - - - - - - - - -
-

TouchTouch

-

A gallery optimized for touch devices

-
- -
- - - - - - - - - -
- -

- Photos: - Lion Rock - Holsten Gate - Blue Hour - Waikato Landscape - Tauranga Bridge - East Coast - Cathedral Cove - The Pond - Good Night -

- - - - - - - - - - - - + + + + + A Touch Optimized Gallery | Tutorialzine Freebie + + + + + + + + + + + + + + + + +
+

TouchTouch

+

A gallery optimized for touch devices

+
+ +
+ + + + + + + + + +

Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1

+

Caption2 Caption2 Caption2 Caption2 Caption2 Caption2 Caption2 Caption2

+

Caption3 Caption3

+

Caption4 Caption4

+

Caption5 Caption5

+

Caption6 Caption6

+

Caption7 Caption7

+

Caption8 Caption8

+

Caption9 Caption9

+ +
+ +

+ Photos: + Lion Rock + Holsten Gate + Blue Hour + Waikato Landscape + Tauranga Bridge + East Coast + Cathedral Cove + The Pond + Good Night +

+ + + + + + + + + + + + From 63704fd4962bc3c525d82ea2dd018a89100ed380 Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 13:35:52 -0400 Subject: [PATCH 02/17] added caption attribute within the anchor tag --- index.html | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 2d44fa7..bebeca9 100644 --- a/index.html +++ b/index.html @@ -27,24 +27,16 @@

A gallery optimized for touch devices

- - - - - + + + + + - - + + -

Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1 Caption1

-

Caption2 Caption2 Caption2 Caption2 Caption2 Caption2 Caption2 Caption2

-

Caption3 Caption3

-

Caption4 Caption4

-

Caption5 Caption5

-

Caption6 Caption6

-

Caption7 Caption7

-

Caption8 Caption8

-

Caption9 Caption9

+
From d4b5dd211737d46c7d61d2535d81f93e9e3f86da Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 13:38:29 -0400 Subject: [PATCH 03/17] dynamically add and remove the captions --- assets/touchTouch/touchTouch.jquery.js | 78 +++++++++++++++++++------- 1 file changed, 59 insertions(+), 19 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 4892352..a35d521 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -25,12 +25,11 @@ var placeholders = $([]), index = 0, allitems = this, - items = allitems; - //locate the image captions - var captions = items.parent().find('p'); + items = allitems, + captions=[]; + + - //hide the caption after initialization - captions.remove(); // Appending the markup to the page overlay.hide().appendTo('body'); @@ -38,10 +37,14 @@ // Creating a placeholder for each image items.each(function(){ - - placeholders = placeholders.add($('

')); + if($(this).attr('caption')) + { + captions[$(this).index()] = $(this).attr('caption'); + $(this).removeAttr('caption'); + } + placeholders = placeholders.add($('
')); }); - + // Hide the gallery if the background is touched / clicked slider.append(placeholders).on('click',function(e){ @@ -136,7 +139,15 @@ index = items.index(this); showOverlay(index); - showImage(index); + if(captions[index]!=undefined) + { + showImage(index,true); + } + else + { + showImage(index); + } + // Preload the next image @@ -215,17 +226,18 @@ overlayVisible = false; //Clear preloaded items - //$('.placeholder').empty(); - $('.placeholder img').remove(); + $('.placeholder').empty(); + //$('.placeholder img').remove(); //Reset possibly filtered items items = allitems; } function offsetSlider(index){ - + // This will trigger a smooth css transition slider.css('left',(-index*100)+'%'); + } // Preload an image by its index in the items array @@ -237,8 +249,8 @@ } // Show image in the slider - function showImage(index){ - + function showImage(index,hasCaption){ + hasCaption = typeof hasCaption !== 'undefined'? hasCaption:false; // If the index is outside the bonds of the array if(index < 0 || index >= items.length){ return false; @@ -249,8 +261,13 @@ if(placeholders.eq(index).find('img').length == 0) { placeholders.eq(index).prepend(this); - - showCaption(index); + if(hasCaption) + { + setTimeout(function(){ + showCaption(index); + },500); + } + } @@ -277,6 +294,15 @@ // If this is not the last image if(index+1 < items.length){ index++; + //remove existing caption + $('.image-caption').remove(); + //if the image has the caption, add it + if(captions[index]!=undefined) + { + setTimeout(function(){ + showCaption(index); + },500); + } offsetSlider(index); preload(index+1); @@ -296,6 +322,17 @@ // If this is not the first image if(index>0){ index--; + + //remove existing caption + $('.image-caption').remove(); + //if the image has the caption, add it + if(captions[index]!=undefined) + { + setTimeout(function(){ + showCaption(index); + },500); + } + offsetSlider(index); preload(index-1); @@ -316,9 +353,12 @@ var current_placeholder = placeholders.eq(idx); var img_width = current_placeholder.find('img').width(); - - - current_placeholder.find('.image-caption').css('width',img_width).text(captions.eq(idx).text()).show(); + + var aCaption = $('

'); + + aCaption.text(captions[idx]).css('width',img_width) + current_placeholder.append(aCaption); + aCaption.fadeIn('slow'); From 31a34a036ab904865e09c469483b470cb2c52a0f Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 13:39:45 -0400 Subject: [PATCH 04/17] added the styles for the image caption --- assets/touchTouch/touchTouch.css | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/assets/touchTouch/touchTouch.css b/assets/touchTouch/touchTouch.css index e859a4d..89cb92e 100644 --- a/assets/touchTouch/touchTouch.css +++ b/assets/touchTouch/touchTouch.css @@ -67,19 +67,28 @@ } #gallerySlider .placeholder .image-caption{ display:none; + color:#aaa; line-height:normal; margin:auto; text-align:left; - padding:3px 0; + padding:4px 0; word-wrap:break-word; text-overflow:ellipsis; + font-size:12px; overflow:hidden; - height:24px; - top:-30px; - background-color:#333; - opacity:0.8; + height:14px; + top:-22px; + /* Fallback for web browsers that don't support RGBa */ + background-color:#000 transparent; + /* RGBa with 0.5 opacity */ + background-color: rgba(0, 0, 0, 0.5); + /* For IE 5.5 - 7*/ + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000); + /* For IE 8*/ + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000)"; position:relative; + } #gallerySlider.rightSpring{ -moz-animation: rightSpring 0.3s; From e835c64c5bec13c705813ae6526edff164abc83d Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 14:03:02 -0400 Subject: [PATCH 05/17] added some comments --- assets/touchTouch/touchTouch.jquery.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index a35d521..d9eafdf 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -37,12 +37,13 @@ // Creating a placeholder for each image items.each(function(){ - if($(this).attr('caption')) - { - captions[$(this).index()] = $(this).attr('caption'); - $(this).removeAttr('caption'); - } - placeholders = placeholders.add($('
')); + //if the anchor tag contains a caption attribute, add it into the array, then remove it from the anchor + if($(this).attr('caption')) + { + captions[$(this).index()] = $(this).attr('caption'); + $(this).removeAttr('caption'); + } + placeholders = placeholders.add($('
')); }); // Hide the gallery if the background is touched / clicked @@ -227,7 +228,7 @@ //Clear preloaded items $('.placeholder').empty(); - //$('.placeholder img').remove(); + //Reset possibly filtered items items = allitems; @@ -260,7 +261,8 @@ loadImage(items.eq(index).attr('href'), function(){ if(placeholders.eq(index).find('img').length == 0) { - placeholders.eq(index).prepend(this); + placeholders.eq(index).html(this); + if(hasCaption) { setTimeout(function(){ @@ -325,6 +327,7 @@ //remove existing caption $('.image-caption').remove(); + //if the image has the caption, add it if(captions[index]!=undefined) { @@ -351,13 +354,15 @@ var current_placeholder = placeholders.eq(idx); - + //get the width of the current image var img_width = current_placeholder.find('img').width(); var aCaption = $('

'); - + //set the width and text content for the caption div aCaption.text(captions[idx]).css('width',img_width) + current_placeholder.append(aCaption); + aCaption.fadeIn('slow'); From 8641b231c62bdda2062e3d511e9f3cc6c6b148c5 Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 14:58:14 -0300 Subject: [PATCH 06/17] Update touchTouch.jquery.js fix some comments --- assets/touchTouch/touchTouch.jquery.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index d9eafdf..a24a1eb 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -37,7 +37,7 @@ // Creating a placeholder for each image items.each(function(){ - //if the anchor tag contains a caption attribute, add it into the array, then remove it from the anchor + //if the anchor tag contains a caption attribute, add it into the array, then remove it from the anchor if($(this).attr('caption')) { captions[$(this).index()] = $(this).attr('caption'); @@ -140,7 +140,7 @@ index = items.index(this); showOverlay(index); - if(captions[index]!=undefined) + if(captions[index] != undefined) { showImage(index,true); } @@ -363,7 +363,7 @@ current_placeholder.append(aCaption); - aCaption.fadeIn('slow'); + aCaption.fadeIn('slow'); @@ -372,4 +372,4 @@ } }; -})(jQuery); \ No newline at end of file +})(jQuery); From 3c3d709f51143d4e97ca30a9dc7590ffda78065e Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 15:01:03 -0300 Subject: [PATCH 07/17] Fixed some indentation --- assets/touchTouch/touchTouch.jquery.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index a24a1eb..6eceeac 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -302,7 +302,7 @@ if(captions[index]!=undefined) { setTimeout(function(){ - showCaption(index); + showCaption(index); },500); } offsetSlider(index); @@ -372,4 +372,4 @@ } }; -})(jQuery); +})(jQuery); From 03b480fd7fd9cfbb94194d02352614e525b2616a Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 15:11:08 -0400 Subject: [PATCH 08/17] added a listener for orientationchange --- assets/touchTouch/touchTouch.jquery.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 6eceeac..c963be6 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -189,7 +189,15 @@ } }); - + //listen for orientationchange + $(window).bind('orientationchange',function(){ + + if($('.image-caption').length > 0) + { + //change the width of the caption div + $('.image-caption').css('width',$('.image-caption').prev('img').width()); + } + }); /* Private functions */ From 03aa1ac71665d5589d9ad2db82b6b4edb15f230c Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 15:47:12 -0400 Subject: [PATCH 09/17] Added the instructions of how to add captions --- readme.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/readme.md b/readme.md index 07e4d79..a9bc469 100644 --- a/readme.md +++ b/readme.md @@ -10,6 +10,7 @@ A jQuery 1.7+ plugin that makes it easy to display a set of photos on your site * Supports swiping through photos; * Displays onscreen arrows and listens for arrow key presses on desktop browsers; * Supports multiple galleries; +* Supports displaying image captions; ## How to use @@ -50,6 +51,15 @@ Any ancestor containing the elements selected by the plugin. Note that this meth Of course you can ignore all this and all selected elements will be displayed. +### Adding captions for the images + +To add a caption for an image, simply add a caption attribute within the anchor tag that points to the image. + +```html + +``` + +If an image does not contain a caption, do not add the caption attribute within the anchor tag ## License Released under the MIT license From 76a3d8faa6cf940d61679eb04a633c385dffd902 Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Mon, 29 Apr 2013 15:56:36 -0400 Subject: [PATCH 10/17] nothing changed from original --- assets/css/styles.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/assets/css/styles.css b/assets/css/styles.css index 09d2d7c..2e95440 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -82,10 +82,7 @@ header h2{ text-align:center; } -.thumbs p{ - - -} + .thumbs a{ width:120px; height:120px; From 4cdd7f779afe07bf84b6179095f4e4f6d40c1966 Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Wed, 1 May 2013 10:34:55 -0400 Subject: [PATCH 11/17] added styles for #caption-container, #caption-content, and spring animation for #caption-container --- assets/touchTouch/touchTouch.css | 57 ++++++++++++++++---------------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/assets/touchTouch/touchTouch.css b/assets/touchTouch/touchTouch.css index 89cb92e..0e79764 100644 --- a/assets/touchTouch/touchTouch.css +++ b/assets/touchTouch/touchTouch.css @@ -23,7 +23,32 @@ #galleryOverlay.visible{ opacity:1; } - +#galleryOverlay #caption-container{ + + display:none; + overflow:hidden; + position:absolute; + width:100%; + +} +#galleryOverlay #caption-content{ + + display:block; + color:#aaa; + text-align:left; + padding:4px 5px; + margin:auto; + font-size:12px; + /* Fallback for web browsers that don't support RGBa */ + background-color:#000 transparent; + /* RGBa with 0.5 opacity */ + background-color: rgba(0, 0, 0, 0.5); + /* For IE 5.5 - 7*/ + filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000); + /* For IE 8*/ + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000)"; + position:relative; +} #gallerySlider{ height:100%; @@ -65,37 +90,13 @@ max-width: 100%; vertical-align: middle; } -#gallerySlider .placeholder .image-caption{ - display:none; - color:#aaa; - line-height:normal; - margin:auto; - text-align:left; - padding:4px 0; - word-wrap:break-word; - text-overflow:ellipsis; - font-size:12px; - overflow:hidden; - height:14px; - top:-22px; - /* Fallback for web browsers that don't support RGBa */ - background-color:#000 transparent; - /* RGBa with 0.5 opacity */ - background-color: rgba(0, 0, 0, 0.5); - /* For IE 5.5 - 7*/ - filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000); - /* For IE 8*/ - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000)"; - position:relative; - - -} -#gallerySlider.rightSpring{ + +#gallerySlider.rightSpring, #galleryOverlay #caption-container.rightSpring{ -moz-animation: rightSpring 0.3s; -webkit-animation: rightSpring 0.3s; } -#gallerySlider.leftSpring{ +#gallerySlider.leftSpring, #galleryOverlay #caption-container.leftSpring{ -moz-animation: leftSpring 0.3s; -webkit-animation: leftSpring 0.3s; } From 2504c686d65d88ebfab2adbcb5640c661d1049ac Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Wed, 1 May 2013 10:39:57 -0400 Subject: [PATCH 12/17] made some changes on the caption text --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index bebeca9..f2662ea 100644 --- a/index.html +++ b/index.html @@ -30,10 +30,10 @@

A gallery optimized for touch devices

- + - + From 5119101fc7910db169069e03ce00dd958059d387 Mon Sep 17 00:00:00 2001 From: ETfrom2100 Date: Wed, 1 May 2013 10:59:01 -0400 Subject: [PATCH 13/17] added orientationchange and resize listeners; made the spring animation also trigger on the caption container; --- assets/touchTouch/touchTouch.jquery.js | 112 +++++++++++++++++-------- 1 file changed, 78 insertions(+), 34 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index c963be6..3f7b467 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -15,7 +15,10 @@ slider = $('
'), prevArrow = $(''), nextArrow = $(''), - overlayVisible = false; + captionContainer = $('
'), + captionContent = $('
'), + overlayVisible = false, + resizeTimer = null; /* Creating the plugin */ @@ -45,6 +48,12 @@ } placeholders = placeholders.add($('
')); }); + + if(captions.length > 0) + { + //overlay.append('

'); + captionContainer.append(captionContent).appendTo(overlay); + } // Hide the gallery if the background is touched / clicked slider.append(placeholders).on('click',function(e){ @@ -188,15 +197,29 @@ showNext(); } + }); + //listen for resize event of the browser + $(window).bind('resize',function(){ + + + if(resizeTimer) clearTimeout(resizeTimer); + resizeTimer = setTimeout(function(){ + if(captionContainer.is(":visible")) + { + + showCaption(index); + } + },100); + }); //listen for orientationchange $(window).bind('orientationchange',function(){ - - if($('.image-caption').length > 0) + if(captionContainer.is(":visible")) { - //change the width of the caption div - $('.image-caption').css('width',$('.image-caption').prev('img').width()); + showCaption(index); } + + }); /* Private functions */ @@ -229,6 +252,12 @@ if(!overlayVisible){ return false; } + if(captionContainer.is(":visible")) + { + + captionContent.text(''); + captionContainer.hide(); + } // Hide the overlay overlay.hide().removeClass('visible'); @@ -237,7 +266,7 @@ //Clear preloaded items $('.placeholder').empty(); - + //Reset possibly filtered items items = allitems; } @@ -273,6 +302,7 @@ if(hasCaption) { + setTimeout(function(){ showCaption(index); },500); @@ -304,25 +334,36 @@ // If this is not the last image if(index+1 < items.length){ index++; - //remove existing caption - $('.image-caption').remove(); - //if the image has the caption, add it + + offsetSlider(index); + //always hide the caption before showing it + if(captions.length > 0) + { + captionContainer.hide(); + } + //if the current image has a caption, show it if(captions[index]!=undefined) { + setTimeout(function(){ showCaption(index); + },500); } - offsetSlider(index); preload(index+1); + } else{ // Trigger the spring animation slider.addClass('rightSpring'); + captionContainer.addClass('rightSpring'); + setTimeout(function(){ slider.removeClass('rightSpring'); + captionContainer.removeClass('rightSpring'); + },500); } } @@ -333,51 +374,54 @@ if(index>0){ index--; - //remove existing caption - $('.image-caption').remove(); - - //if the image has the caption, add it + offsetSlider(index); + //always hide the caption before showing it + if(captions.length > 0) + { + captionContainer.hide(); + } + //if the current image has a caption, show it if(captions[index]!=undefined) { + setTimeout(function(){ showCaption(index); + },500); } - offsetSlider(index); - preload(index-1); + } else{ // Trigger the spring animation slider.addClass('leftSpring'); + captionContainer.addClass('leftSpring'); + setTimeout(function(){ slider.removeClass('leftSpring'); + captionContainer.removeClass('leftSpring'); + },500); } } function showCaption(idx){ - - - var current_placeholder = placeholders.eq(idx); - //get the width of the current image - var img_width = current_placeholder.find('img').width(); - - var aCaption = $('

'); - //set the width and text content for the caption div - aCaption.text(captions[idx]).css('width',img_width) - - current_placeholder.append(aCaption); - - aCaption.fadeIn('slow'); - - - - - + + var current_placeholder = placeholders.eq(idx); + var current_img = current_placeholder.find('img'); + //get the padding of the caption content + var padding = parseInt(captionContent.css('padding-left')); + //set the content and width of the caption + captionContent.text(captions[idx]).css('width',current_img.width()- 2 * padding); + //set the distance from the bottom for the caption container + //fade in the caption container + captionContainer.css({'bottom':current_placeholder.height() - current_img.height() - current_img.position().top}).fadeIn('slow'); + } + + }; })(jQuery); From 58354d7280c55391087df76e2c4526867e63c3fe Mon Sep 17 00:00:00 2001 From: Leo Lee Date: Wed, 1 May 2013 12:48:27 -0300 Subject: [PATCH 14/17] Cleaned the code a little bit --- assets/touchTouch/touchTouch.jquery.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 3f7b467..01d0a4b 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -51,7 +51,6 @@ if(captions.length > 0) { - //overlay.append('

'); captionContainer.append(captionContent).appendTo(overlay); } @@ -412,8 +411,8 @@ var current_placeholder = placeholders.eq(idx); var current_img = current_placeholder.find('img'); //get the padding of the caption content - var padding = parseInt(captionContent.css('padding-left')); - //set the content and width of the caption + var padding = parseInt(captionContent.css('padding-left')); + //set the content and width of the caption captionContent.text(captions[idx]).css('width',current_img.width()- 2 * padding); //set the distance from the bottom for the caption container //fade in the caption container From 7d70f6dac035caafb1d146cb1252f8d3857b5b84 Mon Sep 17 00:00:00 2001 From: Leo Lee Date: Fri, 10 Mar 2017 01:26:50 -0500 Subject: [PATCH 15/17] Fixed an issue of mixed up captions --- assets/touchTouch/touchTouch.jquery.js | 850 ++++++++++++------------- 1 file changed, 424 insertions(+), 426 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 01d0a4b..2030b39 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -1,426 +1,424 @@ -/** - * @name jQuery touchTouch plugin - * @author Martin Angelov - * @version 1.0 - * @url http://tutorialzine.com/2012/04/mobile-touch-gallery/ - * @license MIT License - */ - - -(function(){ - - /* Private variables */ - - var overlay = $('
'), - slider = $('
'), - prevArrow = $(''), - nextArrow = $(''), - captionContainer = $('
'), - captionContent = $('
'), - overlayVisible = false, - resizeTimer = null; - - - /* Creating the plugin */ - - $.fn.touchTouch = function(){ - - var placeholders = $([]), - index = 0, - allitems = this, - items = allitems, - captions=[]; - - - - - // Appending the markup to the page - overlay.hide().appendTo('body'); - slider.appendTo(overlay); - - // Creating a placeholder for each image - items.each(function(){ - //if the anchor tag contains a caption attribute, add it into the array, then remove it from the anchor - if($(this).attr('caption')) - { - captions[$(this).index()] = $(this).attr('caption'); - $(this).removeAttr('caption'); - } - placeholders = placeholders.add($('
')); - }); - - if(captions.length > 0) - { - captionContainer.append(captionContent).appendTo(overlay); - } - - // Hide the gallery if the background is touched / clicked - slider.append(placeholders).on('click',function(e){ - - 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){ - - var touch = e.originalEvent, - startX = touch.changedTouches[0].pageX; - - slider.on('touchmove',function(e){ - - e.preventDefault(); - - touch = e.originalEvent.touches[0] || - e.originalEvent.changedTouches[0]; - - if(touch.pageX - startX > 10){ - - slider.off('touchmove'); - showPrevious(); - } - - else if (touch.pageX - startX < -10){ - - slider.off('touchmove'); - showNext(); - } - }); - - // Return false to prevent image - // highlighting on Android - return false; - - }).on('touchend',function(){ - - slider.off('touchmove'); - - }); - - // Listening for clicks on the thumbnails - items.on('click', function(e){ - - e.preventDefault(); - - var $this = $(this), - galleryName, - selectorType, - $closestGallery = $this.parent().closest('[data-gallery]'); - - // Find gallery name and change items object to only have - // that gallery - - //If gallery name given to each item - if ($this.attr('data-gallery')) { - - galleryName = $this.attr('data-gallery'); - selectorType = 'item'; - - //If gallery name given to some ancestor - } else if ($closestGallery.length) { - - galleryName = $closestGallery.attr('data-gallery'); - selectorType = 'ancestor'; - - } - - //These statements kept seperate in case elements have data-gallery on both - //items and ancestor. Ancestor will always win because of above statments. - if (galleryName && selectorType == 'item') { - - 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(){ - - return $(this).parent().closest('[data-gallery]').length; - - }); - - } - - // Find the position of this image - // in the collection - index = items.index(this); - - showOverlay(index); - if(captions[index] != undefined) - { - showImage(index,true); - } - else - { - showImage(index); - } - - - - // Preload the next image - preload(index+1); - - // Preload the previous - preload(index-1); - - - - }); - - // If the browser does not have support - // for touch, display the arrows - if ( !("ontouchstart" in window) ){ - overlay.append(prevArrow).append(nextArrow); - - prevArrow.click(function(e){ - e.preventDefault(); - showPrevious(); - }); - - nextArrow.click(function(e){ - e.preventDefault(); - showNext(); - }); - } - - // Listen for arrow keys - $(window).bind('keydown', function(e){ - - if (e.keyCode == 37) { - showPrevious(); - } - - else if (e.keyCode==39) { - showNext(); - } - - }); - //listen for resize event of the browser - $(window).bind('resize',function(){ - - - if(resizeTimer) clearTimeout(resizeTimer); - resizeTimer = setTimeout(function(){ - if(captionContainer.is(":visible")) - { - - showCaption(index); - } - },100); - - }); - //listen for orientationchange - $(window).bind('orientationchange',function(){ - if(captionContainer.is(":visible")) - { - showCaption(index); - } - - - }); - - /* Private functions */ - - - function showOverlay(index){ - // If the overlay is already shown, exit - if (overlayVisible){ - return false; - } - - // Show the overlay - overlay.show(); - - setTimeout(function(){ - // Trigger the opacity CSS transition - overlay.addClass('visible'); - }, 100); - - // Move the slider to the correct image - offsetSlider(index); - - // Raise the visible flag - overlayVisible = true; - } - - function hideOverlay(){ - - // If the overlay is not shown, exit - if(!overlayVisible){ - return false; - } - if(captionContainer.is(":visible")) - { - - captionContent.text(''); - captionContainer.hide(); - } - - // Hide the overlay - overlay.hide().removeClass('visible'); - overlayVisible = false; - - //Clear preloaded items - $('.placeholder').empty(); - - - //Reset possibly filtered items - items = allitems; - } - - function offsetSlider(index){ - - // This will trigger a smooth css transition - slider.css('left',(-index*100)+'%'); - - } - - // Preload an image by its index in the items array - function preload(index){ - - setTimeout(function(){ - showImage(index); - }, 1000); - } - - // Show image in the slider - function showImage(index,hasCaption){ - hasCaption = typeof hasCaption !== 'undefined'? hasCaption:false; - // If the index is outside the bonds of the array - 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(){ - if(placeholders.eq(index).find('img').length == 0) - { - placeholders.eq(index).html(this); - - if(hasCaption) - { - - setTimeout(function(){ - showCaption(index); - },500); - } - - - - } - - - }); - } - - // Load the image and execute a callback function. - // Returns a jQuery object - - function loadImage(src, callback){ - - var img = $('').on('load', function(){ - callback.call(img); - }); - - img.attr('src',src); - - } - - function showNext(){ - - // If this is not the last image - if(index+1 < items.length){ - index++; - - offsetSlider(index); - //always hide the caption before showing it - if(captions.length > 0) - { - captionContainer.hide(); - } - //if the current image has a caption, show it - if(captions[index]!=undefined) - { - - setTimeout(function(){ - showCaption(index); - - },500); - } - - preload(index+1); - - } - - else{ - // Trigger the spring animation - slider.addClass('rightSpring'); - captionContainer.addClass('rightSpring'); - - setTimeout(function(){ - slider.removeClass('rightSpring'); - captionContainer.removeClass('rightSpring'); - - },500); - } - } - - function showPrevious(){ - - // If this is not the first image - if(index>0){ - index--; - - offsetSlider(index); - //always hide the caption before showing it - if(captions.length > 0) - { - captionContainer.hide(); - } - //if the current image has a caption, show it - if(captions[index]!=undefined) - { - - setTimeout(function(){ - showCaption(index); - - },500); - } - - preload(index-1); - - } - - else{ - // Trigger the spring animation - slider.addClass('leftSpring'); - captionContainer.addClass('leftSpring'); - - setTimeout(function(){ - slider.removeClass('leftSpring'); - captionContainer.removeClass('leftSpring'); - - },500); - } - } - - function showCaption(idx){ - - var current_placeholder = placeholders.eq(idx); - var current_img = current_placeholder.find('img'); - //get the padding of the caption content - var padding = parseInt(captionContent.css('padding-left')); - //set the content and width of the caption - captionContent.text(captions[idx]).css('width',current_img.width()- 2 * padding); - //set the distance from the bottom for the caption container - //fade in the caption container - captionContainer.css({'bottom':current_placeholder.height() - current_img.height() - current_img.position().top}).fadeIn('slow'); - - } - - - }; - -})(jQuery); +/** + * @name jQuery touchTouch plugin + * @author Martin Angelov + * @version 1.0 + * @url http://tutorialzine.com/2012/04/mobile-touch-gallery/ + * @license MIT License + */ + + +(function(){ + + /* Private variables */ + + var overlay = $('
'), + slider = $('
'), + prevArrow = $(''), + nextArrow = $(''), + captionContainer = $('
'), + captionContent = $('
'), + overlayVisible = false, + resizeTimer = null; + + + /* Creating the plugin */ + + $.fn.touchTouch = function(){ + + var placeholders = $([]), + index = 0, + allitems = this, + items = allitems; + + + + + + // Appending the markup to the page + overlay.hide().appendTo('body'); + slider.appendTo(overlay); + + // Creating a placeholder for each image + items.each(function(){ + //if the anchor tag contains a caption attribute, add it into the array, then remove it from the anchor + if($(this).attr('caption')) + { + //captions[$(this).index()] = $(this).attr('caption'); + + $(this).data('caption',$(this).attr('caption')); + //console.log($(this).data('caption')); + $(this).removeAttr('caption'); + } + placeholders = placeholders.add($('
')); + }); + //console.log(captions); + /*if(captions.length > 0) + { + captionContainer.append(captionContent).appendTo(overlay); + }*/ + captionContainer.append(captionContent).appendTo(overlay); + // Hide the gallery if the background is touched / clicked + slider.append(placeholders).on('click',function(e){ + + 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){ + + var touch = e.originalEvent, + startX = touch.changedTouches[0].pageX; + + slider.on('touchmove',function(e){ + + e.preventDefault(); + + touch = e.originalEvent.touches[0] || + e.originalEvent.changedTouches[0]; + + if(touch.pageX - startX > 10){ + + slider.off('touchmove'); + showPrevious(); + } + + else if (touch.pageX - startX < -10){ + + slider.off('touchmove'); + showNext(); + } + }); + + // Return false to prevent image + // highlighting on Android + return false; + + }).on('touchend',function(){ + + slider.off('touchmove'); + + }); + + // Listening for clicks on the thumbnails + items.on('click', function(e){ + + e.preventDefault(); + + var $this = $(this), + galleryName, + selectorType, + $closestGallery = $this.parent().closest('[data-gallery]'); + + // Find gallery name and change items object to only have + // that gallery + + //If gallery name given to each item + if ($this.attr('data-gallery')) { + + galleryName = $this.attr('data-gallery'); + selectorType = 'item'; + + //If gallery name given to some ancestor + } else if ($closestGallery.length) { + + galleryName = $closestGallery.attr('data-gallery'); + selectorType = 'ancestor'; + + } + + //These statements kept seperate in case elements have data-gallery on both + //items and ancestor. Ancestor will always win because of above statments. + if (galleryName && selectorType == 'item') { + + 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(){ + + return $(this).parent().closest('[data-gallery]').length; + + }); + + } + + // Find the position of this image + // in the collection + index = items.index(this); + + showOverlay(index); + + + showImage(index); + + // Preload the next image + preload(index+1); + + // Preload the previous + preload(index-1); + + + + }); + + // If the browser does not have support + // for touch, display the arrows + if ( !("ontouchstart" in window) ){ + overlay.append(prevArrow).append(nextArrow); + + prevArrow.click(function(e){ + e.preventDefault(); + showPrevious(); + }); + + nextArrow.click(function(e){ + e.preventDefault(); + showNext(); + }); + } + + // Listen for arrow keys + $(window).bind('keydown', function(e){ + + if (e.keyCode == 37) { + showPrevious(); + } + + else if (e.keyCode==39) { + showNext(); + } + + }); + //listen for resize event of the browser + $(window).bind('resize',function(){ + + + if(resizeTimer) clearTimeout(resizeTimer); + resizeTimer = setTimeout(function(){ + if(captionContainer.is(":visible")) + { + + showCaption(index); + } + },100); + + }); + //listen for orientationchange + $(window).bind('orientationchange',function(){ + if(captionContainer.is(":visible")) + { + showCaption(index); + } + + + }); + + /* Private functions */ + + + function showOverlay(index){ + // If the overlay is already shown, exit + if (overlayVisible){ + return false; + } + + // Show the overlay + overlay.show(); + + setTimeout(function(){ + // Trigger the opacity CSS transition + overlay.addClass('visible'); + }, 100); + + // Move the slider to the correct image + offsetSlider(index); + + // Raise the visible flag + overlayVisible = true; + } + + function hideOverlay(){ + + // If the overlay is not shown, exit + if(!overlayVisible){ + return false; + } + if(captionContainer.is(":visible")) + { + + captionContent.text(''); + captionContainer.hide(); + } + + // Hide the overlay + overlay.hide().removeClass('visible'); + overlayVisible = false; + + //Clear preloaded items + $('.placeholder').empty(); + + + //Reset possibly filtered items + items = allitems; + } + + function offsetSlider(index){ + + // This will trigger a smooth css transition + slider.css('left',(-index*100)+'%'); + + } + + // Preload an image by its index in the items array + function preload(index){ + + setTimeout(function(){ + showImage(index,true); + }, 1000); + } + + // Show image in the slider + function showImage(index,preload=false){ + //console.log(index); + //hasCaption = typeof hasCaption !== 'undefined'? hasCaption:false; + // If the index is outside the bonds of the array + 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(){ + //console.log(index); + if(placeholders.eq(index).find('img').length == 0) + { + placeholders.eq(index).html(this); + + if(!preload) + { + setTimeout(function(){ + + showCaption(index); + },500); + } + + + + + + } + + + }); + } + + // Load the image and execute a callback function. + // Returns a jQuery object + + function loadImage(src, callback){ + + var img = $('').on('load', function(){ + callback.call(img); + }); + + img.attr('src',src); + + } + + function showNext(){ + + // If this is not the last image + if(index+1 < items.length){ + index++; + + offsetSlider(index); + //always hide the caption before showing it + + captionContainer.hide(); + + + setTimeout(function(){ + showCaption(index); + + },500); + + + preload(index+1); + + } + + else{ + // Trigger the spring animation + slider.addClass('rightSpring'); + captionContainer.addClass('rightSpring'); + + setTimeout(function(){ + slider.removeClass('rightSpring'); + captionContainer.removeClass('rightSpring'); + + },500); + } + } + + function showPrevious(){ + + // If this is not the first image + if(index>0){ + index--; + + offsetSlider(index); + //always hide the caption before showing it + + captionContainer.hide(); + + + setTimeout(function(){ + showCaption(index); + + },500); + + + preload(index-1); + + } + + else{ + // Trigger the spring animation + slider.addClass('leftSpring'); + captionContainer.addClass('leftSpring'); + + setTimeout(function(){ + slider.removeClass('leftSpring'); + captionContainer.removeClass('leftSpring'); + + },500); + } + } + + function showCaption(idx){ + var caption = items.eq(idx).data('caption'); + + if(caption != undefined && caption != '') + { + var current_placeholder = placeholders.eq(idx); + var current_img = current_placeholder.find('img'); + //get the padding of the caption content + var padding = parseInt(captionContent.css('padding-left')); + //set the content and width of the caption + captionContent.text(caption).css('width',current_img.width()- 2 * padding); + //set the distance from the bottom for the caption container + //fade in the caption container + captionContainer.css({'bottom':current_placeholder.height() - current_img.height() - current_img.position().top}).fadeIn('slow'); + } + //console.log("show:",items.eq(idx)); + + + } + + + }; + +})(jQuery); From b1d2f3c7120231d8118e5c914ed2be9ec24ccd91 Mon Sep 17 00:00:00 2001 From: Leo Lee Date: Fri, 10 Mar 2017 01:33:41 -0500 Subject: [PATCH 16/17] clean up the code --- assets/touchTouch/touchTouch.jquery.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 2030b39..cd7e35c 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -51,11 +51,7 @@ } placeholders = placeholders.add($('
')); }); - //console.log(captions); - /*if(captions.length > 0) - { - captionContainer.append(captionContent).appendTo(overlay); - }*/ + captionContainer.append(captionContent).appendTo(overlay); // Hide the gallery if the background is touched / clicked slider.append(placeholders).on('click',function(e){ @@ -283,8 +279,7 @@ // Show image in the slider function showImage(index,preload=false){ - //console.log(index); - //hasCaption = typeof hasCaption !== 'undefined'? hasCaption:false; + // If the index is outside the bonds of the array if(index < 0 || index >= items.length){ return false; @@ -297,6 +292,7 @@ { placeholders.eq(index).html(this); + //only show the caption if the image isn't preloaded if(!preload) { setTimeout(function(){ @@ -413,7 +409,7 @@ //fade in the caption container captionContainer.css({'bottom':current_placeholder.height() - current_img.height() - current_img.position().top}).fadeIn('slow'); } - //console.log("show:",items.eq(idx)); + } From 92f971f45dac6adc629decd8929e6940d15e0ca8 Mon Sep 17 00:00:00 2001 From: Leo Lee Date: Wed, 22 Mar 2017 01:03:49 -0400 Subject: [PATCH 17/17] Fix the IE issue --- assets/touchTouch/touchTouch.jquery.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index cd7e35c..d6fb538 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -149,7 +149,7 @@ showOverlay(index); - showImage(index); + showImage(index,false); // Preload the next image preload(index+1); @@ -278,7 +278,7 @@ } // Show image in the slider - function showImage(index,preload=false){ + function showImage(index,preload){ // If the index is outside the bonds of the array if(index < 0 || index >= items.length){ @@ -287,7 +287,7 @@ // Call the load function with the href attribute of the item loadImage(items.eq(index).attr('href'), function(){ - //console.log(index); + if(placeholders.eq(index).find('img').length == 0) { placeholders.eq(index).html(this);