Elevate Zoom

elevate-zoom.markdown

Elevate Zoom

Jquery Image Zoom Plugin Examples

A Pen by ASIF NAWAZ on CodePen.

License.

index.html

<div class="zoom-left">
<img style="border:1px solid #e8e8e6;" id="zoom_03" src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="411"  />

  <div class="clearfix"></div>

<a id="prev"> Previous </a>
<a id="next"> Next </a>
 
  <div class="clearfix"></div>

<div id="gallery_01" style="width="500pxfloat:left; ">
 
<a  href="#" class="elevatezoom-gallery active" data-update="" data-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" 
data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg">
<img src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100"  /></a>

<a  href="#" class="elevatezoom-gallery"
     data-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png"
     data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg"
    ><img src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100"  /></a>

<a href="tester" class="elevatezoom-gallery" 
     data-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png"
     data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg">
     <img src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100"  />
</a>

<a href="tester" class="elevatezoom-gallery" 
     data-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png"
     data-zoom-image="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg"
     
     class="slide-content"
    ><img src="https://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" width="100"  /></a>
    
</div>

script.js

//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({
	gallery:'gallery_01',
	cursor: 'pointer',
  easing : true,
	galleryActiveClass: 'active',
	imageCrossfade: true,
	loadingIcon: 'https://www.elevateweb.co.uk/spinner.gif'
});

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {
	var ez = $('#zoom_03').data('elevateZoom');
	$.fancybox(ez.getGalleryList());
	return false;
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>

style.css

/*set a border on the images to prevent shifting*/
#gallery_01 img{border:2px solid white;}
/*Change the colour*/
.active img{border:2px solid #333 !important;}

.clearfix {
    display: block;
    width: 100%;
    float: left;
}

.zoom-left {
    max-width: 412px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />