Hộp đèn jQuery có zoom

Question

Có một tập lệnh hoặc plugin jQuery mở hình ảnh trong hộp đèn và cho phép bạn phóng to thêm trong hộp đèn không? Tôi đã tìm thấy PLENTY của các kịch bản làm một trong hai, hoặc một số biến thể của nó, nhưng không ai dường như làm cả hai. Các gói tùy chọn duy nhất tôi thấy rằng nhiều hơn hoặc ít hơn đã làm những gì tôi muốn là ajax-zoom, nhưng đó là một con thú khá nặng cho một điều đơn giản như vậy. Chưa kể, máy chủ chia sẻ của tôi không thích nó một chút.

Answer 1

Tôi đang gặp vấn đề tương tự và đã chỉ đưa ra ajax-zoom.com

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

Nó không những gì chúng ta muốn, nhưng nó khá phiền phức. Tôi đang sử dụng Concrete5 và có một add-on gọi jqZoom ảnh mà là một di chuột đơn giản đẹp hơn zoom

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

c5extras.com/add-ons/jqzoom

Lý tưởng nhất là tôi muốn nhúng điều này thành cửa sổ bật lên kiểu hộp đèn tiêu chuẩn, đơn giản, gọn gàng. Tôi đã hỏi cộng đồng C5 để xem liệu có ai đó làm việc này vì tôi không có kỹ năng cần thiết hay không. Nếu tôi nhận được bất cứ nơi nào tôi sẽ đăng ở đây.

Bạn có nhận được bất cứ đâu với nhiệm vụ của mình không?

Answer 2

Chỉ trong trường hợp không ai tìm thấy giải pháp, đây là cách để thực hiện. Bạn sẽ cần phải sử dụng fancybox thay vì lightbox và elevatezoom. Bạn có thể tìm thấy chúng tại các liên kết sau đây:

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

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

Một khi bạn đã tải về này, thêm các plugin khác nhau trong tiêu đề (hoặc ở dưới cùng của cơ thể đối với một tải nhanh hơn), tiêu đề của bạn sẽ trông như thế này:

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

Chỉ cần sau khi jquery.fancybox, thêm dòng sau:

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

Đây là bản sửa lỗi để vùng chứa thu phóng xuất hiện phía trên hộp ưa thích thực tế.

Thêm lớp .fancybox vào các liên kết gói hình ảnh của bạn.

Sau đó, thêm dòng sau sau các kịch bản khác nhau:

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

Sau đó, bạn nên có lense làm việc với Fancybox!