From 206330ec066c413536e9b08f1dab8eca483ca49a Mon Sep 17 00:00:00 2001 From: Ram Awadh Chauhan Date: Thu, 16 Oct 2014 17:02:00 +0530 Subject: [PATCH] hadlling other image field attributes --- assets/touchTouch/touchTouch.css | 53 +++++++++++++++++++++++ assets/touchTouch/touchTouch.jquery.js | 58 +++++++++++++++++++++----- index.html | 2 +- 3 files changed, 101 insertions(+), 12 deletions(-) diff --git a/assets/touchTouch/touchTouch.css b/assets/touchTouch/touchTouch.css index 314919e..a535d3b 100644 --- a/assets/touchTouch/touchTouch.css +++ b/assets/touchTouch/touchTouch.css @@ -137,3 +137,56 @@ background-position:right top; right:40px; } + +/* ****** gallery content ******* */ +.gallery_content { + display : inline; + width : 250px; + color : white; +} +.gallery_content a.image_link { + display : block; + width : 100%; + min-height: 25px; + color: #FFF; + padding-top: 20px; + +} + +.gallery_content .other_contents{ + width:100%; + display:block; + position: absolute; +} +.gallery_content p.image_title { + display : block; + width : 100%; + min-height: 25px; + top: 15px; + position:relative; +} +.gallery_content p.image_caption { + display : block; + width : 100%; + min-height: 25px; + position:relative; + top:15px; +} + +#galleryOverlay #closeOverlay{ +border: 2px solid #fff; +border-radius: 25px; +color: hsl(0, 100%, 100%); +cursor: pointer; +display: block; +font-size: 17px; +font-family: Arial; +line-height: 23px; +position: absolute; +right: 10px; +text-align: center; +top: 10px; +vertical-align: middle; +width: 25px; +height: 25px; +} diff --git a/assets/touchTouch/touchTouch.jquery.js b/assets/touchTouch/touchTouch.jquery.js index 16498e6..a40dc62 100644 --- a/assets/touchTouch/touchTouch.jquery.js +++ b/assets/touchTouch/touchTouch.jquery.js @@ -15,6 +15,7 @@ slider = $('
'), prevArrow = $(''), nextArrow = $(''), + closeOverlay = $('X'), overlayVisible = false; @@ -31,6 +32,10 @@ overlay.hide().appendTo('body'); slider.appendTo(overlay); + // Append closeOverlay to overlay + overlay.append(closeOverlay); + + // Creating a placeholder for each image items.each(function(){ @@ -45,6 +50,11 @@ } }); + // Hide the gallery if the closeOverlay is touched / clicked + $(closeOverlay).on('click', function(e){ + 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){ @@ -233,27 +243,53 @@ // 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); - }); + // 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'),items.eq(index).attr('link'),items.eq(index).attr('title'),items.eq(index).attr('caption'), function(){ + placeholders.eq(index).html(this); + // Appending div to show the other contents + placeholders.eq(index).append('
'); + placeholders.eq(index).find('.gallery_content').append(''); + // Checking link attribute if defind then showing in the gallery + if(placeholders.eq(index).find('img').attr('link') != '' && placeholders.eq(index).find('img').attr('link') != undefined){ + placeholders.eq(index).find('.other_contents').append('GO TO THE SITE'); + } + // Checking the title attribute for image, and displaying the title + if(placeholders.eq(index).find('img').attr('title') != '' && placeholders.eq(index).find('img').attr('title') != undefined){ + placeholders.eq(index).find('.other_contents').append('

'+placeholders.eq(index).find('img').attr('title')+'

'); + } + // Checking the caption attr, if availabe then displaying + if(placeholders.eq(index).find('img').attr('caption') != '' && placeholders.eq(index).find('img').attr('caption') != undefined){ + placeholders.eq(index).find('.other_contents').append('

'+placeholders.eq(index).find('img').attr('caption')+'

'); + } + }); } // Load the image and execute a callback function. // Returns a jQuery object - function loadImage(src, callback){ + function loadImage(src, link, title, caption, callback){ var img = $('').on('load', function(){ callback.call(img); }); - img.attr('src',src); + if(link != '' && link != undefined){ + img.attr('link',link); + } + if(caption != '' && caption != undefined){ + img.attr('caption',caption); + } + if(title != '' && title != undefined){ + img.attr('title',title); + img.attr('alt', title) + } + else{ + img.attr('alt', "") + } } function showNext(){ diff --git a/index.html b/index.html index 1e73798..a8f167c 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@

A gallery optimized for touch devices

- +