diff --git a/assets/css/styles.css b/assets/css/styles.css index 0148379..2e95440 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,203 +1,204 @@ -/*------------------------- - 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 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..0e79764 100644 --- a/assets/touchTouch/touchTouch.css +++ b/assets/touchTouch/touchTouch.css @@ -1,139 +1,164 @@ -/* 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; +} +#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%; + + 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, #galleryOverlay #caption-container.rightSpring{ + -moz-animation: rightSpring 0.3s; + -webkit-animation: rightSpring 0.3s; +} + +#gallerySlider.leftSpring, #galleryOverlay #caption-container.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..d6fb538 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -15,17 +15,24 @@ slider = $('
'), prevArrow = $(''), nextArrow = $(''), - overlayVisible = false; + 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'); @@ -33,10 +40,19 @@ // Creating a placeholder for each image items.each(function(){ - - 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).data('caption',$(this).attr('caption')); + //console.log($(this).data('caption')); + $(this).removeAttr('caption'); + } + placeholders = placeholders.add($('
')); }); - + + captionContainer.append(captionContent).appendTo(overlay); // Hide the gallery if the background is touched / clicked slider.append(placeholders).on('click',function(e){ @@ -129,8 +145,11 @@ // Find the position of this image // in the collection index = items.index(this); + showOverlay(index); - showImage(index); + + + showImage(index,false); // Preload the next image preload(index+1); @@ -138,6 +157,8 @@ // Preload the previous preload(index-1); + + }); // If the browser does not have support @@ -168,7 +189,29 @@ } }); - + //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 */ @@ -200,6 +243,12 @@ if(!overlayVisible){ return false; } + if(captionContainer.is(":visible")) + { + + captionContent.text(''); + captionContainer.hide(); + } // Hide the overlay overlay.hide().removeClass('visible'); @@ -207,28 +256,30 @@ //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); + showImage(index,true); }, 1000); } // Show image in the slider - function showImage(index){ - + function showImage(index,preload){ + // If the index is outside the bonds of the array if(index < 0 || index >= items.length){ return false; @@ -236,7 +287,27 @@ // Call the load function with the href attribute of the item loadImage(items.eq(index).attr('href'), function(){ - placeholders.eq(index).html(this); + + if(placeholders.eq(index).find('img').length == 0) + { + placeholders.eq(index).html(this); + + //only show the caption if the image isn't preloaded + if(!preload) + { + setTimeout(function(){ + + showCaption(index); + },500); + } + + + + + + } + + }); } @@ -250,6 +321,7 @@ }); img.attr('src',src); + } function showNext(){ @@ -257,15 +329,32 @@ // 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); } } @@ -275,18 +364,57 @@ // 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'); + } + + + + } + + }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/index.html b/index.html index 1e73798..f2662ea 100644 --- a/index.html +++ b/index.html @@ -1,67 +1,69 @@ - - - - - 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

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

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

+ + + + + + + + + + + + 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