Cloud Zoom Examples

Gallery Elements

Most HTML elements can be turned into a Cloud Zoom gallery elements. These will load different images into a Cloud 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...

Hover...

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

Gallery Setup Code

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

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

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

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

Gallery Inside Content Slider

˂

• 
• 
• 
• 
• 
• 

˃

Using Thumbelina Content Slider

This example demonstrates gallery elements used inside the free Thumbelina content slider.

If you want to see the source and HTML more clearly, you can see a Standalone Example (opens in new window).

Lens and Zoom CSS

The lens and zoom window can be altered using regular CSS. The default CSS class for the lens is cloudzoom-lens and for the zoom, cloudzoom-zoom in the cloudzoom.css file. You can alter this if you like, or specify different classes using the lensClass and zoomClass properties.

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

Single Image Mode

Cloud 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 Cloud Zoom with just one image.

If you don't specify the zoomImage property, Cloud Zoom will use the same image for both page image and zoom image. Set the size of the page image to be smaller than the actual pixel size of the image used. The zoom image will appear at full size. 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 zoomPosition: 'inside' property, the lens can be made invisible for a full size inner zoom effect.

Also, using the autoInside: true property, inside mode can happen automatically if the page gets narrow on mobile devices.

Captions

Specify a source for the caption in the captionSource property.

The source can be any HTML attribute such as title, or a selector to some HTML content. Position captions top or bottom.

Position

Using the zoomPosition property, the zoom window can be made to appear at any one of 16 predefined positions around the page image, or specify a selector to place the zoom window anywhere on the page as here.

Cloud Zoom Triggers Modal Pop-up

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

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

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

Where multiple gallery images are used, Cloud 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 Cloud Zoom and Fancy Box JavaScript files.

<script type="text/javascript">
    $(function(){
        // Bind a click event to a Cloud Zoom instance.
        $('#myCloudZoom').bind('click',function(){
            // On click, get the Cloud Zoom object,
            var cloudZoom = $(this).data('CloudZoom');
            // Close the zoom window (from 2.1 rev 1211291557)
            cloudZoom.closeZoom();                       
            // and pass Cloud Zoom's image list to Fancy Box.
            $.fancybox.open(cloudZoom.getGalleryList()); 
            return false;
        });
    });
</script>
                

Cloud Zoom can be configured to display the entire zoom image. This is useful for a 'quick look' feature for multiple thumbnail images.

The zoom image will appear below this paragraph (using the zoomPosition option), and the 'flying' zoom animation has been turned off using the zoomFlyOut option.