Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

handlling other attributes of images #32

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

handlling other attributes of images #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions assets/touchTouch/touchTouch.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
58 changes: 47 additions & 11 deletions assets/touchTouch/touchTouch.jquery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
slider = $('<div id="gallerySlider">'),
prevArrow = $('<a id="prevArrow"></a>'),
nextArrow = $('<a id="nextArrow"></a>'),
closeOverlay = $('<a id="closeOverlay">X</a>'),
overlayVisible = false;


Expand All @@ -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(){

Expand All @@ -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){
Expand Down Expand Up @@ -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('<div class="gallery_content"/>');
placeholders.eq(index).find('.gallery_content').append('<span class="other_contents"/>');
// 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('<a class="image_link" href="'+placeholders.eq(index).find('img').attr('link')+'">GO TO THE SITE</a>');
}
// 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('<p class="image_title">'+placeholders.eq(index).find('img').attr('title')+'</p>');
}
// 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('<p class="image_caption">'+placeholders.eq(index).find('img').attr('caption')+'</p>');
}
});
}

// 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 = $('<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(){
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h2>A gallery optimized for touch devices</h2>
</header>

<div class="thumbs">
<a href="http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_m.jpg)" title="Lion Rock"></a>
<a href="http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_m.jpg)" title="Lion Rock" caption="first" link="https://google.co.in"></a>
<a href="http://farm8.staticflickr.com/7042/6895252645_45f5dfffaa_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7042/6895252645_45f5dfffaa_m.jpg)" title="Holsten Gate"></a>
<a href="http://farm8.staticflickr.com/7183/6943277737_21b521659c_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7183/6943277737_21b521659c_m.jpg)" title="Blue Hour"></a>
<a href="http://farm8.staticflickr.com/7047/7000951429_5eae078a62_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7047/7000951429_5eae078a62_m.jpg)" title="Waikato Landscape"></a>
Expand Down