jQuery lightbox with zoom [closed]

Question

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.

Answer 1

I'm having the same problem and have only come up with ajax-zoom.com

http://www.ajax-zoom.com/examples/example5.php

It does what we want, but it's rather clunky. I'm using Concrete5 and there's an add-on called jqZoom Image which is a nice simple hover over zoom

http://www.concrete5.org/marketplace/addons/jqzoom-image/

c5extras.com/add-ons/jqzoom

Ideally I would like to embed this into a standard, simple, clean lightbox style pop-up. I've asked the C5 community to see if anyone is up for doing this as I don't have the skills required. If I get anywhere I'll post here.

Did you get anywhere with your quest?

Answer 2

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!