Лайтбокс jQuery с масштабированием

Есть ли jQuery script или плагин, который открывает изображения в лайтбоксе и позволяет вам увеличить масштаб в лайтбокс? Я нашел PLENTY скриптов, которые делают либо, либо какой-то его вариант, но, похоже, ни один из них не работает. Единственный вариант пакета, который я обнаружил, что более или менее сделал то, что я хотел, был ajax-zoom, но это довольно тяжелый зверь для такой простой вещи. Не говоря уже о том, что моему совместному серверу это не очень нравится.

Ответ 1

На всякий случай никто не нашел решение, вот способ сделать это. Вам нужно будет использовать fancybox вместо lightbox и elevatezoom. Вы можете найти их по следующим ссылкам:

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

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

После того, как вы скачали это, добавьте различные плагины в заголовке (или в нижней части тела для более быстрой загрузки), ваш заголовок должен выглядеть следующим образом:

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

Сразу после jquery.fancybox добавьте следующее:

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

Это исправление, поэтому контейнер масштабирования отображается над фактическим fancybox.

Добавьте класс .fancybox в ссылки, обертывающие ваши изображения.

Затем добавьте следующее после разных скриптов:

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

Затем вы должны иметь линзу, работающую с fancybox!

Ответ 2

У меня такая же проблема, и я только придумал ajax-zoom.com

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

Он делает то, что мы хотим, но это довольно неуклюже. Я использую Concrete5, и есть надстройка, называемая jqZoom Image, которая является приятным простым наведением по масштабированию

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

c5extras.com/add-ons/jqzoom

В идеале я хотел бы встроить его в стандартный, простой, чистый лайтбокс. Я попросил сообщество C5 выяснить, подходит ли кто-либо для этого, поскольку у меня нет необходимых навыков. Если я получу где-нибудь, я отправлю сюда.

Вы попали куда-нибудь с кветом?