Thumbnail zoom click

HTML

<script src="http://www.jacklmoore.com/js/jquery.zoom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.18/jquery.zoom.min.js"></script>
	<a class="zoom main" id="main-zoom">
		<img src="http://www.jacklmoore.com/img/daisy.jpg" enlarge="http://www.jacklmoore.com/img/daisy.jpg" width="555" height="320" alt="Daisy on the Ohoopee"/>
	</a>

CSS

.zoom{
  display:inline-block;
  position: relative;
}
/* magnifying glass icon */
.zoom.main{
  display:table;
  margin-bottom: 5px;
}
.zoom.main:after{
  content:'';
  display:block; 
  width:33px; 
  height:33px; 
  position:absolute; 
  top:0;
  right:0;
  background:url(icon.png);
}

.zoom img{
  display: block;
}

.zoom img::selection{ background-color: transparent; }
.zoom.thumb img{
  width: 100%;
  height: auto;
}
.zoom.thumb{
  width: 100px;
  height: 100px;
  display:inline-block;
  margin-right: 5px;
  float: left;
  &:last-child{
    margin-right:0;
  }
}

JavaScript

$(document).ready(function(){
	var zoomInitial = $('#main-zoom img').attr('enlarge');
	 $('#main-zoom').zoom({url: zoomInitial});

});