Cloud Zoom WordPress Module

We are often asked about integrating Cloud Zoom into WordPress, so we created a WordPress module to make it easier.

Note: the WordPress module is only for the new Cloud Zoom V2.0 or newer.

Integrating Cloud Zoom WordPress Module

1. Download either a trial or commercial version of Cloud Zoom V2.0 (or newer)
2. Extract the downloaded file, 'cloudzoom.zip'. You should end up with a folder called 'cloudzoom'
3. Download a copy of the Cloud Zoom WordPress module, 'cloudzoom-wordpress.zip'
4. Create a folder called 'cloudzoom-wordpress' in your '/wp-content/plugins' directory
5. Extract 'cloudzoom-wordpress.zip' into your 'cloudzoom-wordpress' folder
6. Copy the contents of your 'cloudzoom' folder, into the empty 'cloudzoom' folder found inside '/wp-content/plugins/cloudzoom-wordpress'
7. Activate the module in the usual way via the WordPress plugins section

Using Cloud Zoom in WordPress Posts

1. Upload some images into the WordPress media library. You will need a small image to display on the page, and a large image for the zoom.
2. From the media library, insert the small image into your post. For 'Link URL' select 'none', and select 'full size'.
3. Using the HTML viewer in the post editor, you should see something like this:

   <img class="alignnone size-full wp-image-5" title="image1"
        src="/path/to/my/images/imagesmall.jpg" alt="" width="300" height="400" />
       

4. Now you need to add the cloudzoom CSS class, and set up the data-cloudzoom attribute for the zoom image:

<img class="cloudzoom alignnone size-full wp-image-5" title="image1"
   src="/path/to/my/images/imagesmall.jpg" alt="" width="300" height="400"
   data-cloudzoom = " zoomImage: '/path/to/my/images/imagebig.jpg' "/>

5. Save the post and preview it - Cloud Zoom should now be working on your image.

WordPress.com now accepts payments in Bitcoin, we do too.