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
- Download either a trial or commercial version of Cloud Zoom V2.0 (or newer)
- Extract the downloaded file, 'cloudzoom.zip'. You should end up with a folder called 'cloudzoom'
- Download a copy of the Cloud Zoom WordPress module, 'cloudzoom-wordpress.zip'
- Create a folder called 'cloudzoom-wordpress' in your '/wp-content/plugins' directory
- Extract 'cloudzoom-wordpress.zip' into your 'cloudzoom-wordpress' folder
- Copy the contents of your 'cloudzoom' folder, into the empty 'cloudzoom' folder found inside '/wp-content/plugins/cloudzoom-wordpress'
- Activate the module in the usual way via the WordPress plugins section
Using Cloud Zoom in WordPress Posts
- 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.
- From the media library, insert the small image into your post. For 'Link URL' select 'none', and select 'full size'.
- 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" />
- 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' "/>
- 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.