jQuery TouchTouch - Add SPAN over large image

Place a new element over the overlay image.

by Salustiano Silva

HTML

<div id="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" data-span="bubu 1"></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" data-span="bubu 2"></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" data-span="bubu 3"></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" data-span="bubu 4"></a>
	        <a href="http://farm6.staticflickr.com/5346/7051537899_efc7a44830_z.jpg" style="background-image:url(http://farm6.staticflickr.com/5346/7051537899_efc7a44830_m.jpg)" title="Tauranga Bridge" data-span="bubu 5"></a>
	        <a href="http://farm8.staticflickr.com/7268/6951148260_440661b4d1_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7268/6951148260_440661b4d1_m.jpg)" title="East Coast" data-span="bubu 6"></a>
	        <a href="http://farm8.staticflickr.com/7259/6930112984_5fcc076288_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7259/6930112984_5fcc076288_m.jpg)" title="Cathedral Cove" data-span="bubu 7"></a>
	        <a href="http://farm8.staticflickr.com/7276/6886626710_047cd03acb_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7276/6886626710_047cd03acb_m.jpg)" title="The Pond" data-span="bubu 8"></a>
            <a href="http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_m.jpg)" title="Good Night" data-span="bubu 9"></a>
...

CSS

/* 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;
    position:relative;
}

/* 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 span{
    position:absolute;
    display:block;
    bottom:0;
    left:0;
    height:30px;
    width:100%;
    text-align:center;
    color:#FFF;
    font-weight:strong;
}
#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...

JavaScript

/**
 * @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 = $('<div id="galleryOverlay">'),
		slider = $('<div id="gallerySlider">'),
		prevArrow = $('<a id="prevArrow"></a>'),
		nextArrow = $('<a id="nextArrow"></a>'),
		overlayVisible = false;
		
		
	/* Creating the plugin */
	
	$.fn.touchTouch = function(){
		
		var placeholders = $([]),
			index = 0,
			items = this;
		
		// 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($('<div class="placeholder">'));
		});
	
		// 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();
			
			// Find the position of this image
			// in the collection
			
			index =...