Timmywil/jquery.panzoom. SergeLand Image Zoomer v3.0. An inline lightbox alternative with slideshow. X Note: To see the full potential of CSS3 styling (shadows, gradients, rounded corners, alpha transparency), please view this page in a modern webkit or mozilla browser (Firefox 3.5+, Safari 4, Opera 10.50, Chrome 4).
Other browsers will degrade gracefully. Except for IE6, though, which I didn't bother to include. Feel free to come up with your own solution ;-) Example 1 The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image. No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. View HTML code used in this example Example 2 The navigation stays fixed to the right of the image. There is no enlarge button, but a click on the image enlaregs and shrinks it nevertheless. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
View HTML code used in this example. Image Zoom made easy. Zoomooz.js. Zoomooz is: 6KB gzipped and 18KB minified.
This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on.
You can also add some additional attributes for tuning the animation as data fields of the element: Here is a demo, click on the elements: Demos. jQuery plugin Easy Image Zoom. I have been working on a little script for a client of mine, that required product image magnification.
The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys! Just as with all my script I try to keep things as lightweight as possible, and most important, as customizable as possible. I hope you’ll find this very easy to apply to your own websites. Take a look at the demo or Download the plugin. Cloud Zoom: Official Website of the jQuery Image Zoom Plugin. jQuery gzoom plugin. Loading...
Based on the work of giancarlo mingati and leandro vieira Features: Click on plus and minus to zoom Drag the slider to zoom Zoom using mousewheel hover the image Moving mouse hover the image change the pan Click on the image to show in lightbox style jquery.ui framework styled Dependencies: Benplum/Zoomer. Cloud Zoom Image Zoom jQuery Plugin - jQuery Zoom Plugins Download.