Skip to content

Instantly share code, notes, and snippets.

@hagiang1305

hagiang1305/Slick + elevateZoom CSS

Created September 30, 2016 08:36
Show Gist options
  • Save hagiang1305/518e32ea9d57ce3defb817d921a94cdf to your computer and use it in GitHub Desktop.
Save hagiang1305/518e32ea9d57ce3defb817d921a94cdf to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Slick + elevateZoom 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;}
#gallery_01 img {
/* width: 96px; */
}
Raw
Slick + elevateZoom HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
</head>
<body>
<div class="zoom-left">
<img style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="411" />
<div id="gallery_01" style="width=500px; float:left; ">
<a href="#" class="elevatezoom-gallery active" data-update="" data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg">
<img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100" /></a>
<a href="#" class="elevatezoom-gallery"
data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg"
><img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100" /></a>
<a href="tester" class="elevatezoom-gallery"
data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg">
<img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100" />
</a>
<a href="tester" class="elevatezoom-gallery"
data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png"
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg"
class="slide-content"
><img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png" width="100" /></a>
</div>
</body>
</html>
Raw
Slick + elevateZoom JS
$(document).ready(function () {
$("#gallery_01").slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
fade: true,
});
$("#zoom_03").elevateZoom({gallery:'gallery_01',zoomType : "inner", cursor: 'pointer', galleryActiveClass: "active", imageCrossfade: true, loadingIcon: "http://www.elevateweb.co.uk/spinner.gif"});
$("#zoom_03").bind("click", function(e) {
var ez = $('#zoom_03').data('elevateZoom');
ez.closeAll(); //NEW: This function force hides the lens, tint and window
$.fancybox(ez.getGalleryList());
return false;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment