Drupal 7 Cloud Zoom Module

By shane
Thu, 2013-03-07 23:59
Daily Dose of Drupal Episode #123

Share with Others

The Drupal 7 Cloud Zoom module makes it easy to zoom in on a Drupal image. The Cloud Zoom module creates an image display formatter that can be used for various types of images including image galleries, product images, and more.

In this episode you will learn:

  • How to use the Cloud Zoom display formatter on a content type image
  • How to use the Cloud Zoom display formatter to create a simple image gallery

Thanks to Drupalize.me for sponsoring this episode of the Daily Dose of Drupal.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 123 and today we’re going to be going over the Cloud Zoom Module. The Cloud Zoom Module is a simple way to allow you to zoom in an image as you hover over it.

This is often use on various product websites or E-Commerce websites who actually zoom in on a product image but it doesn’t have to be used just on product websites or E-Commerce sites so we’ll go ahead and show you a simple way to get this installed on any Drupal 7 website. But before we get started as always I’m Shane Thomas, you can follow me on Twitter at smthomas3, you can also go to codekarate.com and sign up for the newsletter.

Today’s episode is sponsored by drupalize.me. Check out drupalize.me, learn more about Drupal and J Query by checking out some of their free videos and if you like what you see go ahead and sign up and if you do use the coupon code CK20FEB, you get 20% off. Let’s go ahead and get started; I followed the instructions on the Cloud Zoom project page so I actually downloaded the Drupal 7 module, I then used the Drush command right here and that downloaded the library.

If you do not have Drush you can click this link to get the zip folder and extract that in your site to all libraries cloud-zoom library and that’s all you really need to do to get started so let’s go ahead and take a look and you’ll see that we have the 7.x-1.1 version of Cloud Zoom or at the Cloud Zoom Module installed and I basically have an article content type here and I change the image field on this article content type to allow multiple images to be uploaded so you can see I uploaded 4 images on this piece of content.

So if you scroll down you can see that right now we have just 4 very large images. In order to make this the new Cloud Zoom formatter we’re going to come into our content types for article and go to Manage Display and for the image we change the format from the default of image to Cloud Zoom.

Once you do that you’re going to see you have a whole bunch of options here so you click on this little gear icon and you can start selecting how you want the Cloud Zoom Module to work.

The first if what you want the actual slide image or the image that you’re going to hover over to zoom in, what image styles you’re going to use. I’m going to select medium and I’ve actually adjusted this image style which you can of course adjust your image styles by going to Configuration Media Image Styles, you can add your own or adjust the ones that area already there.

Once they zoom in I’m going to leave the Zoom area as No Formatter so that way it should zoom in as much as possible. You can also select to use a Gallery Mode and this is going to work well with multiple images so it’s going to allow you to show the small thumbnails underneath the main image and we want to of course do that because we have multiple images and I’m going to select thumbnail as the Thumbnail Image Style.
You can select or change the Zoom area; you can also select and change the Zoom Style. So there’s a couple of different options to change how it looks and how it works and where it’s positioned at. I’m going to leave all those at the default and go ahead and click Update and save.

Now if I come back here you can see I have a smaller image, I have little thumbnails below and you can see as I hover over I’m able to zoom in on various parts of the image using the Cloud Zoom J Query plug-in. So that’s all there really all there is to it. As you can see it makes it really easy to create images or create simple galleries where users can actually zoom in on the image and zoom in on specific parts of the image using the Cloud Zoom Module.

Go ahead and give this module a try, like I said before it’s really good on E-Commerce sites for users to be able to zoom in to products and see the various product images but also can work on other types of sites where you want to display a smaller version of the image and then allow them to zoom in and see a little bit higher resolution of that specific spot in the image. Thanks again to drupalize.me for sponsoring this episode of the Daily Dose of Drupal and thank you for watching, we’ll see you next time.