jQuery lightbox mit zoom

Nur im Falle, dass keiner die Lösung gefunden, hier ist ein Weg, es zu tun. Sie müssen mit fancybox anstatt der lightbox und elevatezoom. Sie finden Sie unter den folgenden links:

http://fancyapps.com/fancybox/#license

http://www.elevateweb.co.uk/image-zoom/download

Sobald Sie heruntergeladen haben, fügen Sie die verschiedenen plugins im header (oder auf der Unterseite des Körpers für ein schnelleres laden), Ihre überschrift sollte wie folgt Aussehen:

  <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>

Nur nach der jquery.fancybox, fügen Sie den folgenden:

<style type="text/css">
  .zoomContainer { z-index: 100000; }
</style>

Dies ist ein fix, damit die zoom-Behälter wird oberhalb der aktuellen fancybox.

Fügen Sie die Klasse .fancybox auf die links, die Verpackung Ihrer Bilder.

Dann fügen Sie den folgenden nach den verschiedenen Skripten:

    <script type="text/javascript">
     $(document).ready(function() {
      $(".fancybox").fancybox({
       afterShow: function() {
           $('.fancybox-image').elevateZoom({
             zoomType   : "lens",
             lensShape : "round",
             lensSize    : 200
           });
       }
      });
     });
    </script>

Sollten Sie dann die Linse arbeitet mit fancybox!

InformationsquelleAutor Cyrille Armanger