Is there a jQuery script or plugin that opens images in a lightbox and allows you to zoom in further within the lightbox? I have found PLENTY of scripts that do either, or some variant of it, but none seem to do both. The only option package I found that more or less did what I wanted to was ajax-zoom, but that's a rather heavy beast for such a simple thing. Not to mention, my shared server doesn't like it one bit.
Just in case no-one found the solution, here is a way to do it. You will need to use fancybox instead of lightbox and elevatezoom. You can find them at the following links:
http://fancyapps.com/fancybox/#license
http://www.elevateweb.co.uk/image-zoom/download
Once you have downloaded this, add the different plugins in the header (or at the bottom of the body for a faster loading), your header should look like this:
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/jquery.elevateZoom-3.0.8.min.js"></script>
Just after the jquery.fancybox, add the following:
<style type="text/css">
.zoomContainer { z-index: 100000; }
</style>
This is a fix so the zoom container appears above the actual fancybox.
Add the class .fancybox
on the links wrapping your images.
Then add the following after the different scripts:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
afterShow: function() {
$('.fancybox-image').elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 200
});
}
});
});
</script>
You should then have the lense working with fancybox!