jQuery lightbox con zoom

Question

C'è uno script o un plugin jQuery che apre le immagini in una lightbox e ti permette di ingrandire ulteriormente all'interno del lightbox? Ho trovato un sacco di script che fanno entrambi, o qualche variante di esso, ma nessuno sembra fare entrambi. L'unico pacchetto di opzioni che ho trovato che più o meno ha fatto quello che volevo era un jax-zoom, ma è una bestia piuttosto pesante per una cosa così semplice. Per non parlare del fatto che il mio server condiviso non gli piace un po '.

Answer 1

Sto avendo lo stesso problema e sono venuto solo con ajax-zoom.com

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

Si fa quello che vogliamo, ma è piuttosto goffo. Sto usando Concrete5 e c'è un add-on chiamato jqZoom immagine che è un bel semplice passaggio del mouse sopra zoom

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

c5extras.com/add-ons/jqzoom

Idealmente vorrei incorporare questo in un pop-up standard lightbox semplice, pulito. Ho chiesto alla comunità C5 di vedere se qualcuno è pronto a farlo perché non ho le competenze richieste. Se vado da nessuna parte, posterò qui.

Sei arrivato ovunque con la tua ricerca?

Answer 2

Nel caso in cui nessuno abbia trovato la soluzione, ecco un modo per farlo. Dovrai usare fancybox invece di lightbox ed elevazoom. Li potete trovare nei seguenti link:

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

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

Una volta scaricato, aggiungere i diversi plugin nell'intestazione (o in basso del corpo per un caricamento più veloce), l'intestazione dovrebbe assomigliare a questa:

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

Subito dopo il jquery.fancybox, aggiungere il seguente:

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

Questa è una correzione in modo che il contenitore dello zoom appaia sopra la casella fancybox effettiva.

Aggiungere la classe .fancybox sui collegamenti che contengono le immagini.

quindi aggiungere il seguente dopo che i diversi script:

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

Si dovrebbe quindi avere la lente a lavorare con fancybox!