jQuery: image preview like Google Images

jQuery: image preview like Google Images

How to implement the image preview effect of Google Images with jQuery.

During the last two months I've been working a lot with images on the client-side. Surely an interesting feature for image galleries is the ability to show dynamically the relevant information just below the current image or the current line. This is exactly what Google Images does.

The principle is simple: you have to insert an additional element just after every row. This element will be later populated and showed by jQuery every time we click on an image.


<ul id="image-wrapper">
	<li><!-- Our row -->
		<figure data-title="Image 1" data-desc="Lorem ipsum dolor sit amet.">
		  <a href="#" class="image-link">
			<img src="/path/to/image.jpg" alt="" />
		  </a>
		</figure>
		<!-- Other figure elements -->
		<div class="image-details"><!-- Our additional element -->
			<a href="#" class="image-details-close">Close</a>
			<div class="image-details-content">
				<figure class="image"><!-- The full size image goes here --></figure>
			</div>
			<div class="image-details-desc">
				<h3 class="image-details-title"><!-- data-title goes here --></h3>
				<p class="image-details-text"><!-- data-desc goes here --></p>	
			</div>
		</div>
	</li>
	<!-- Other rows -->
</ul>

With jQuery we have simply to add two actions on the HTML links with class image-link and image-details-close. The former will populate and show our hidden element, the latter will hide again the aforementioned element.


(function( $ ) {
	$.imagePreview = function( element ) {
		this.$element = $( element );
		this.init();
	};
	
	$.imagePreview.prototype = {
		init: function() {
			this.$triggers = this.$element.find( ".image-link" );
			this.$closeLinks = this.$element.find( ".image-details-close" );
			
			this.open();
			this.close();
		},
		
		_getContent: function( element ) {
			var $parent = element.parent(),
				title = $parent.data( "title" ),
				desc = $parent.data( "desc" ),
				html = element.html();
				
				return {
					title: title,
					desc: desc,
					html: html
				}
		},
		
		open: function() {
			var self = this;
			self.$triggers.on( "click", function( e ) {
				e.preventDefault();
				var $a = $( this ),
					content = self._getContent( $a ),
					$li = $a.parents( "li" ),
					$details = $( ".image-details", $li ),
					$contentImage = $( ".image", $details ),
					$detailsTitle = $( ".image-details-title", $details ),
					$detailsText = $( ".image-details-text", $details );
					
					$contentImage.html( content.html );
					$detailsTitle.text( content.title );
					$detailsText.text( content.desc );
					
					self.$element.find( ".image-details" ).slideUp( "fast" );
					$details.slideDown( "fast" );
				
			});
		},
		close: function() {
			this.$closeLinks.on( "click", function( e ) {
				e.preventDefault();
				$( this ).parent().slideUp( "fast" );
				
			});
		}	
	};
	
	$(function() {
		var preview = new $.imagePreview( "#image-wrapper" );
		
	});
	
})( jQuery );

You can see the demo with the working code below.

See the Pen jQuery: image preview like Google Images by Gabriele Romanato (@gabrieleromanato) on CodePen.