Thumbnail Gallery w/ Zoom

by zuhloobie

HTML

<script src="http://www.shynemedia.com/assets_site/plugins/simple-gallery/simplegallery.js"></script>
<script src="http://www.shynemedia.com/assets_site/plugins/zoom/jquery.zoom.js"></script>
<div class="container">
    	<div class="image wow rotateIn" data-wow-delay=".3s" data-wow-duration=".3s">
			<div id="gallery" class="zoom">
				<div class="content">
				<img src="http://dummyimage.com/900x900/000/fff" class="image_1">
				<img src="http://dummyimage.com/900x900/f00/fff" class="image_2" style="display:none">
				</div>
			</div>
		</div>
		<div class="body wow fadeInDown" data-wow-delay=".5s" data-wow-duration=".3s">
            <div class="thumbnail">
                <div class="thumb view2">
                    <a href="#" rel="2">
                        <img src="http://dummyimage.com/900x900/f00/fff" id="thumb_2" class="fit">
                    </a>
                </div>
                <div class="thumb view2">
                    <a href="#" rel="1">
                        <img src="http://dummyimage.com/900x900/000/fff" id="thumb_1" class="fit">
                    </a>
                </div>
            </div>
		</div>
    </div>
</div>

CSS

.zoom img::selection { background-color: transparent; }
.zoom img:hover {cursor:url(http://www.shynemedia.com/assets_site/plugins/zoom/grab.cur), default; }
.zoom img:active { cursor: url(http://www.shynemedia.com/assets_site/plugins/zoom/grabbed.cur), default; }

.container {width:100%; font-size:0px; padding:20px 0; text-align:left;}
.image {width:40%; display:inline-block; padding:0px 2% 0 0; vertical-align:top; text-align:center;}
.image img {max-width:300px; max-height:600px; box-shadow:0 8px 17px 0 rgba(0, 0, 0, 0.4); background-color:#EBEBEB;}
.body {width:38%; display:inline-block; padding:0px 0; color:#EBEBEB; font-size:14px; text-align:center; line-height:18px; vertical-align:top;}

.view2 {width:200px; height:100px; margin:1%; vertical-align:middle; display:inline-block; line-height:100px; white-space:nowrap;}
.view2 a img {vertical-align:middle; position:relative; max-height:100px; cursor:zoom-in;}
.thumb {display:inline-block; z-index:1; overflow:hidden; background-color:#EBEBEB;}

JavaScript

$('#gallery').simplegallery({
		galltime : 400, // transition delay
		gallcontent: '.content',
		gallthumbnail: '.thumbnail',
		gallthumb: '.thumb'
	});

$('.zoom').zoom({ on:'grab' });