Jet Zoom Examples

Gallery Elements

Most HTML elements can be turned into a Jet Zoom gallery elements. These will load different images into a Jet Zoom instance.

Here we've used some styled links, but you can create galleries in whatever style you want: basic links, images, carousels etc.

Click...

Image 1 Image 2 Image 3

Hover...

Using the galleryEvent option, the elements can be setup to work on other events. The links below use the mouseover event:

First Second Third

Gallery Setup Code

<!-- Create a Jet Zoom in the usual way. -->
<img src="image1.jpg" id = "zoom1" class = "jetzoom"
     data-jetzoom = "zoomImage: 'bigimage1.jpg'" />

<!-- Identify elements as gallery elements using the 'jetzoom-gallery' class. -->
<!-- Use the 'useZoom' option to associate the element to specific Jet Zoom instance. -->
<a  href="#" class="jetzoom-gallery"
    data-jetzoom =
         "useZoom: '#zoom1', image: 'image1.jpg', zoomImage: 'bigimage1.jpg'"
    >Image 1</a>

<a  href="#" class="jetzoom-gallery"
    data-jetzoom =
         "useZoom: '#zoom1', image: 'image2.jpg', zoomImage: 'bigimage2.jpg'"
    >Image 2</a>

<a  href="#" class="jetzoom-gallery"
    data-jetzoom =
         "useZoom: '#zoom1', image: 'image3.jpg', zoomImage: 'bigimage3.jpg'"
    >Image 3</a>

Lens CSS

The lens can be altered using regular CSS. The default CSS class for the lens is jetzoom-lens in the jetzoom.css file, but you can alter this if you like, or specify different classes using the lensClass propery.

Here we have applied a thick coloured border, made the lens smaller with more rounded corners, and added a more prominent drop shadow.

Single Image Mode

Jet Zoom works best with two images, a low resolution image to display on the page, and a high resolution image to use as the zoom.

However, you can still use Jet Zoom with just one image.

If you don't specify the zoomImage property, Jet Zoom will use the same image for both page and zoom. Set the size of the page image to be smaller than the actual pixel size of the image to give a zoom effect. Most modern browsers do a good job of scaling down images.

Tints

A colour tint can be applied to the smaller image when the lens is visible.

Inner Zoom

Using the innerZoom property, the lens can be made invisible for a full size inner zoom effect.

Modal Pop-up Window (e.g. Fancy Box)

You can use Jet Zoom with modal plugins like the excellent Fancy Box.

Note: you will need to obtain your own appropriate Fancy Box license.

As well as Jet Zoom's own zoom lens, you can also make a large version of the image pop-up on the page by clicking/tapping.

Where multiple gallery images are used, Jet Zoom will pass the correct order of images to Fancy Box.

Insert the snippet of code below into the head part of your page, after loading the Jet Zoom and Fancy Box JavaScript files.

<script type="text/javascript">
    $(function(){
        $('#myJetZoom').bind('click',function(){       // Bind a click event to a Jet Zoom instance.
            var jetZoom = $(this).data('JetZoom');   // On click, get the Jet Zoom object,
            $.fancybox.open(jetZoom.getGalleryList()); // and pass Jet Zoom's image list to Fancy Box.
            return false;
        });
    });
</script>