CodePen Embed - Micro Image Gallery jQuery Plugin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Micro Image Gallery jQuery Plugin</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Micro Image Gallery jQuery Plugin with Preview" />
        <meta name="keywords" content="jquery,image gallery, plugin, thumnails, preview"/>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                font-family:Georgia,Times,serif;
                padding:50px;
                background:#f0f0f0 url(title.png) no-repeat top left;
            }
            a.back{
                background:transparent url(back.png) no-repeat top left;
                position:fixed;
                width:150px;
                height:27px;
                outline:none;
                top:0px;
                right:0px;
            }
            #content{
                width:700px;
                height:450px;
                margin:120px auto 0px auto;
            }

        </style>
    </head>
    <body>
        <div id="content">
            <a class="back" href="https://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin"></a>


            <div id="mG1" class="microGallery">
                <img src="Gallery1/1.JPG" alt=""/>
                <img src="Gallery1/2.JPG" alt=""/>
                <img src="Gallery1/3.JPG" alt=""/>
                <img src="Gallery1/4.JPG" alt=""/>
                <img src="Gallery1/5.JPG" alt=""/>
                <img src="Gallery1/6.JPG" alt=""/>
                <img src="Gallery1/7.JPG" alt=""/>
                <img src="Gallery1/8.JPG" alt=""/>
                <img src="Gallery1/9.JPG" alt=""/>
                <img src="Gallery1/10.JPG" alt=""/>
                <img src="Gallery1/11.JPG" alt=""/>
                <img src="Gallery1/12.JPG" alt=""/>
                <img src="Gallery1/13.JPG" alt=""/>
                <img src="Gallery1/14.JPG" alt=""/>
                <img src="Gallery1/15.JPG" alt=""/>
                <img src="Gallery1/16.JPG" alt=""/>
                <img src="Gallery1/17.JPG" alt=""/>
                <img src="Gallery1/18.JPG" alt=""/>
                <img src="Gallery1/19.JPG" alt=""/>
                <img src="Gallery1/20.JPG" alt=""/>
                <img src="Gallery1/21.JPG" alt=""/>
                <img src="Gallery1/22.JPG" alt=""/>
            </div>
            
        </div>
        <!-- The JavaScript -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.microgallery.js"></script>
        <script type="text/javascript">
            $(function() {
				
                $("#mG1").microgallery({
                    menu:true,
                    size:'small',
                    mode:'single'
                });
                
            });
        </script>
    </body>
</html>

.microGallery{
    position:relative;
    margin:30px 10px 10px 10px;
    float:left;
}
.microGallery img{
    margin-left:auto;
    margin-right:auto;
    border:none;
    -moz-box-shadow:0px 2px 4px #777;
    -webkit-box-shadow:0px 2px 4px #777;
    box-shadow:0px 2px 4px #777;
    display:none;
}
.nav{
    background-color:#f9f9f9;
    position:absolute;
    border:1px solid #fff;
    height:25px;
    top:-30px;
    left:5px;
    padding:3px;
    -moz-box-shadow:1px 1px 5px #aaa;
    -webkit-box-shadow:1px 1px 5px #aaa;
    box-shadow:1px 1px 5px #aaa;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;   
}
.smallGallery .nav{
    width:105px;
}
.mediumGallery .nav{
    width:165px;
}
.largeGallery .nav{
    width:225px;
}
a.thumbview{
    opacity:0.6;
    width:20px;
    height:21px;
    float:left;
    cursor:pointer;
}
a.grid{
    background:transparent url(../images/thumbs.png) no-repeat top left;
}
a.single{
    background:transparent url(../images/single.png) no-repeat top left;
}
a.thumbview:hover{
    opacity:1.0;
}
button.prev,button.next{
    float:right;
    width:22px;
    height:20px;
    cursor:pointer;
    opacity:0.6;
    outline:none;
    border:none;
}
button::-moz-focus-inner { border: 0; }
button.prev:hover,button.next:hover{
    opacity:1.0;
}
.nav button.disabled{
    opacity:0.2;
}
.nav button.disabled:hover{
    opacity:0.2;
}
button.next{
    background:transparent url(../images/arrows.png) no-repeat top left;
}
button.prev{
    background:transparent url(../images/arrows.png) no-repeat 0px -20px;
}
.images div{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    position:relative;
}
.smallGallery .images,
.mediumGallery .images,
.largeGallery .images{
    padding:10px;
    background-color:#f9f9f9;
    border:1px solid #fff;
    position:relative;
    -moz-box-shadow:1px 1px 5px #aaa;
    -webkit-box-shadow:1px 1px 5px #aaa;
    box-shadow:1px 1px 5px #aaa;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
.smallGallery .images,
.smallGallery .singleImg div{
    width:102px;
    height:102px;
}
.mediumGallery .images,
.mediumGallery .singleImg div{
    width:162px;
    height:162px;
}
.largeGallery .images,
.largeGallery .singleImg div{
    width:222px;
    height:222px;
}
.smallGallery .thumbs div,
.mediumGallery .thumbs div,
.largeGallery .thumbs div{
    float:left;
    margin:2px;
    cursor:pointer;
}
.smallGallery .thumbs div{
    width:30px;
    height:30px;
}
.mediumGallery .thumbs div{
    width:50px;
    height:50px;
}
.largeGallery .thumbs div{
    width:70px;
    height:70px;
}

(function($) {
	$.fn.microgallery = function(options) {
		var opts = $.extend({}, $.fn.microgallery.defaults, options);
		return this.each(function() {
			var $this = $(this);
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			var current=1;
			var mode=o.mode;
			var incfactor = 9;
			var _cnt = 0;
			var _all = $this.find('img').size();
			$this.find('img').each(function(){
				var theImage = new Image();
				$(theImage).load(function(){
					++_cnt;
					if(_cnt == _all)
						$.fn.build($this,o,mode,current,incfactor);	
				}).attr('src',$(this).attr('src'));	
			});
			/*  handlers */
			$('.next',$this).live('click',function(){
				if(!$(this).hasClass('disabled')){
					if(mode == 'single'){
						$current 	= $('.images div:nth-child('+current+')',$this);
						$next 		= $current.next();
						if($next.length){
							$current.hide();
							$next.css('display','table-cell');
							++current;	
							$.fn.checkLimits($this,current);
						}
					}
					else{
						$lastinset		= $('.images div:visible:last',$this);
						var idxLast 	= $lastinset.index();					
						
						$('.images div',$this).hide().slice(parseInt(idxLast+1),parseInt(idxLast+incfactor+1)).css('display','table-cell');
						
						$lastinsetnew	= $('.images div:visible:last',$this);
						var idxLastnew 	= $lastinsetnew.index();
						$firstinset		= $('.images div:visible:first',$this);
						var idxFirst 	= $firstinset.index();
						$.fn.checkLimits4Thumbs($this,idxFirst+1,idxLastnew+1);		
					}
				}
			});
			$('.prev',$this).live('click',function(){
				if(!$(this).hasClass('disabled')){
					if(mode == 'single'){
						$current 	= $('.images div:nth-child('+current+')',$this);
						$prev 		= $current.prev();
						if($prev.length){
							$current.hide();
							$prev.css('display','table-cell');
							--current;
							$.fn.checkLimits($this,current);					
						}
					}
					else{
						$firstinset		= $('.images div:visible:first',$this);
						var idxFirst 	= $firstinset.index();
						$('.images div',$this).hide().slice(parseInt(idxFirst-incfactor),parseInt(idxFirst)).css('display','table-cell');
						$lastinset		= $('.images div:visible:last',$this);
						var idxLast 	= $lastinset.index();
						$firstinsetnew		= $('.images div:visible:first',$this);
						var idxFirstnew 	= $firstinsetnew.index();
						$.fn.checkLimits4Thumbs($this,idxFirstnew+1,idxLast+1);		
					}
				}
			});
			$('.images div',$this).live('click',function(){
				//only if in thumb mode
				if(mode == 'thumbs'){
					/* get the index of the clickable image */
					var $theImage 	= $('img',$(this));
					var idx 		= $(this).index();
					
					current = idx+1;
					$.fn.toggleMode($this,mode,current,o);	
					mode='single';
					$.fn.checkLimits($this,current);
					$('.thumbview',$this).removeClass('single').addClass('grid');
				}	
			});
			$('.thumbview',$this).live('click',function(){
				(mode == 'single')?$(this).removeClass('grid').addClass('single'):$(this).removeClass('single').addClass('grid');
				$.fn.toggleMode($this,mode,current,o,incfactor);
				(mode == 'single')?mode='thumbs':mode='single';
				
				if (mode == 'single')
					$.fn.checkLimits($this,current)
				else{
					$lastinset		= $('.images div:visible:last',$this);
					var idxLast 	= $lastinset.index();
					$firstinset		= $('.images div:visible:first',$this);
					var idxFirst	= $firstinset.index();
					$.fn.checkLimits4Thumbs($this,idxFirst+1,idxLast+1);		
				}	
			});
            
		});
	};
	$.fn.microgallery.defaults = {
		size	: 'small',	/*small,medium,large*/
		menu	: true,
        mode    : 'single'
	};
	$.fn.microgallery.sizes = {
		smallW		: 102,
		smallH		: 102,
		smallThumbW	: 30,
		smallThumbH	: 30,
		mediumW		: 162,
		mediumH		: 162,
		mediumThumbW: 50,
		mediumThumbH: 50,
		largeW		: 222,
		largeH		: 222,
		largeThumbW	: 70,
		largeThumbH	: 70
	};
	$.fn.build = function($this,o,mode,current,incfactor){
			$this.find('img').wrap('<div style="display:none"/>').show();
			switch(o.size){
				case 'small'	:	
					$this.addClass('smallGallery');
					break;
				case 'medium'	:	
					$this.addClass('mediumGallery');
					break;
				case 'large'	:	
					$this.addClass('largeGallery');
					break;	
				default			:
					$this.addClass('smallGallery');
					break;	
			}
			
			var $images = $('<div/>',{
				className	:	'images singleImg'
			});
			
			$this.find('div').each(function(){
				var $theImage = $('img',$(this));
				$.fn.resize($theImage,'thumbs',o);
				$images.append($(this));
			});
			
			$images.find('div:first').css('display','table-cell');
			
			var $nav = $('<div/>',{
			    className	:	'nav',
				html		:	'<a class="thumbview grid"></a><button class="next"></button><button class="prev disabled"></button>'
			});
			if(!o.menu){
				$nav.css('top','0px');
				$this.hover(
					function(){
						$nav.stop().animate({'top':'-30px'},500);
					},
					function(){
						$nav.stop().animate({'top':'0px'},500);
					}
				);
			}	

			$this.append($nav).append($images);
			
			if(mode=='thumbs'){
				$('.thumbview',$this).removeClass('grid').addClass('single');
                $.fn.toggleMode($this,'single',current,o,incfactor);	
				$.fn.checkLimits($this,current)
            }
	};
	$.fn.toggleMode = function($mg,mode,current,o,incfactor){
		var $images = $('.images',$mg);
		if(mode == 'single'){
			//$.fn.resize($('img',$images),mode,o);
			$('img',$images).each(function(){
				var $theImage = $(this);
				$.fn.resize($theImage,mode,o);
			});
			$('div',$images).hide();
			var set = Math.floor((current-1)/incfactor)+1;
			var pos = set*incfactor;
			$images.removeClass('singleImg').addClass('thumbs').find('div').slice(pos-incfactor,pos).css('display','table-cell');
		}	
		else{
			//$.fn.resize($('img',$images),mode,o);
			$('img',$images).each(function(){
				var $theImage = $(this);
				$.fn.resize($theImage,mode,o);
			});
			$images.removeClass('thumbs').addClass('singleImg').find('div').hide();
			$images.find('div:nth-child('+current+')').css('display','table-cell');
		}
	};
	$.fn.checkLimits = function($mg,current){
		$current 	= $('.images div:nth-child('+current+')',$mg);
		$next 		= $current.next();
		$prev 		= $current.prev();
		(!$next.length)?$('.next',$mg).addClass('disabled'):$('.next',$mg).removeClass('disabled');	
		(!$prev.length)?$('.prev',$mg).addClass('disabled'):$('.prev',$mg).removeClass('disabled');	
	};
	$.fn.checkLimits4Thumbs = function($mg,left,right){
		$right 	= $('.images div:nth-child('+right+')',$mg);
		$left 	= $('.images div:nth-child('+left+')',$mg);
		$next 		= $right.next();
		$prev 		= $left.prev();
		(!$next.length)?$('.next',$mg).addClass('disabled'):$('.next',$mg).removeClass('disabled');	
		(!$prev.length)?$('.prev',$mg).addClass('disabled'):$('.prev',$mg).removeClass('disabled');	
	};
	$.fn.resize = function($img,mode,o){
		var maxW = 0;
		var maxH = 0;
		if(mode == 'single'){
			switch(o.size){
				case 'small'	:	
					maxW = $.fn.microgallery.sizes.smallThumbW;
					maxH = $.fn.microgallery.sizes.smallThumbH;
					break;
				case 'medium'	:	
					maxW = $.fn.microgallery.sizes.mediumThumbW;
					maxH = $.fn.microgallery.sizes.mediumThumbH;
					break;
				case 'large'	:	
					maxW = $.fn.microgallery.sizes.largeThumbW;
					maxH = $.fn.microgallery.sizes.largeThumbH;
					break;	
				default			:
					maxW = $.fn.microgallery.sizes.smallThumbW;
					maxH = $.fn.microgallery.sizes.smallThumbH;
					break;	
			}
		}
		else{
			switch(o.size){
				case 'small'	:	
					maxW = $.fn.microgallery.sizes.smallW;
					maxH = $.fn.microgallery.sizes.smallH;
					break;
				case 'medium'	:	
					maxW = $.fn.microgallery.sizes.mediumW;
					maxH = $.fn.microgallery.sizes.mediumH;
					break;
				case 'large'	:	
					maxW = $.fn.microgallery.sizes.largeW;
					maxH = $.fn.microgallery.sizes.largeH;
					break;	
				default			:
					maxW = $.fn.microgallery.sizes.smallW;
					maxH = $.fn.microgallery.sizes.smallH;
					break;	
			}
		}
		var theImage = new Image();
		theImage.src = $img.attr('src');
		var imgwidth = theImage.width;
		var imgheight = theImage.height;
		
		if(imgwidth > maxW){
			var newwidth = maxW;
			var ratio = maxW / imgwidth;
			var newheight = imgheight * ratio;
			if(newheight > maxH){
				var newnewheight = maxH;
				var newratio = maxH/newheight;
				var newnewwidth =maxW * newratio;
				$img.attr('width',newnewwidth);
				$img.attr('height',newnewheight);	
			}
			else{
				$img.attr('width',newwidth);
				$img.attr('height',newheight);	
			}
		}
		else if(imgheight > maxH){
			var newheight = maxH;
			var ratio = maxH / imgheight;
			var newwidth = imgwidth * ratio;
			if(newwidth > maxW){
				var newnewwidth = maxW;
				var newratio = maxW/newwidth;
				var newnewheight =maxH*newratio;
				$img.attr('height',newnewheight);
				$img.attr('width',newnewwidth);	
			}
			else{
				$img.attr('width',newwidth);
				$img.attr('height',newheight);	
			}
		}
		else{
			$img.attr('width',imgwidth);
			$img.attr('height',imgheight);
		}	
	};
})(jQuery);

This Pen is owned by hassn youssef on CodePen.

See more by @fask153 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.