Home > JavaScript > MakeGallery – a simple jQuery gallery plug in

MakeGallery – a simple jQuery gallery plug in

February 14, 2010

MakeGallery – a simple jQuery gallery plug in

gallery.js


/*
*	MakeGallery
*	
*		A jQuery gallery plug in.
*
* @author:    Costin Trifan
* @date:      14.02.2010
* @license:   MIT License  http://en.wikipedia.org/wiki/MIT_License
* @version:   1.0
*/

(function($)
{
	$.fn.MakeGallery = function( options )
	{
		var defaults = {
			baseImageRef: $('#gallery_MainImage'),
			thumbsImgPath: 'thumbs/',
			largeImgPath: 'large/'
		};

		var options = $.extend(defaults, options);  

		if (options.baseImage == '') {
			options.baseImage = defaults.baseImage;
		}
		if (options.largeImgPath == '') {
			options.largeImgPath = defaults.largeImgPath;
		}
		if (options.thumbsImgPath == '') {
			options.thumbsImgPath = defaults.thumbsImgPath;
		}

		return this.each(function()
		{
			var  mainWrapper = $(this)
				,mainImg = options.baseImageRef
				,mainImgSrc = mainImg.attr('src')
				,path = '#' + $(this).attr('id'); /*[ get the ID of the main container. ]*/
				;

				// add the click event handler to all thumbs
				$(path+' .gallery_thumb').each(function()
				{
					$(this).click(function( event )
					{
						event.stopPropagation();

						var src = $(this).attr('src');
						src = src.replace(options.thumbsImgPath, options.largeImgPath);

						// update main image
						mainImg.attr('src', src);
					});
				});

			// reset main image
			$(path).hover(function(){}, function(){
				mainImg.attr('src', mainImgSrc);
			});

		}); /*[ end return ]*/
	}; /*[ end $.fn.MakeGallery ]*/
})(jQuery);

Usage


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Image Gallery - jQuery Plugin</title>

<style type="text/css">
/*
*	SET THE STYLES TO MATCH THE DESIGN
*/
div#gallery_MainWrapper { float: none; display: block; overflow: hidden; min-height: 1px; }
div#gallery_MainWrapper > div {
	width: 350px; height: 200px;
	margin: 0 auto;
}
ul, li { list-style-type: none; overflow: hidden; min-height: 1px; }
li { margin: 2px; padding: 2px; float: left; display: block; }
li img { border: none; cursor: pointer; }

img#gallery_MainImage { width: 350px; height: 200px; }
img.gallery_thumb { width: 125px; height: 94px; }

/*[ END GALLERY ]*/
</style>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
	<script src="gallery.js" type="text/javascript"></script>
	<script type="text/javascript">
    
		jQuery().ready(function($)
		{
			$('#gallery_MainWrapper').MakeGallery({
				baseImageRef: $('#gallery_MainImage')
				/*[, thumbsImgPath: 'thumbs/'
				   , largeImgPath: 'large/' ]*/
			});
		});
    
    </script>
</head>
<body>


	<div id="gallery_MainWrapper">
    
    	<div><img id="gallery_MainImage" alt="" title="" src="large/CIMG5233.gif" /></div>
    
    	<ul>
        	<li><img class="gallery_thumb" alt="" title="" src="thumbs/CIMG5233.gif" /></li>
        	<li><img class="gallery_thumb" alt="" title="" src="thumbs/CIMG5234.gif" /></li>
        	<li><img class="gallery_thumb" alt="" title="" src="thumbs/CIMG5254.gif" /></li>
        	<li><img class="gallery_thumb" alt="" title="" src="thumbs/CIMG5255.gif" /></li>
        	<li><img class="gallery_thumb" alt="" title="" src="thumbs/CIMG5256.gif" /></li>
        </ul>
    </div>


</body>
</html>

For this plug in to work, the thumbs and the large images should share the same name and extension!

Thumbs should be found in the thumbs folder and the large images in the large folder respectively.

Advertisements
%d bloggers like this: