yii-cloudzoom product image show . a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin

  1. Requirements
  2. Usage
  3. Resources

Cloud Zoom is a free jQuery image zoom plugin, a comparable alternative to products such as Magic Zoom. Compared to the popular jQZoom plugin, Cloud Zoom is smaller, has more features and more robust compatability across browsers

Requirements

tested on yii1.1.10 (may works with previous version )

Usage

download it , and extract it to your extensions dir (not mandatory , you can choose freely). then prepare the html structure for using cloudzoom .

...can use code blocks like the following...

usage example , in your view file: note: you can put this extension in any common dir (normally it 's extensions), but refer it using the correct path alias , i just use my own dir 'common.widgets.cloudzoom.CloudZoom' , so change it according to your circumstance

<?php
/**
  * User: yiqing
 * Date: 11-12-3
 * Time: 下午4:07
  */

$this->widget(
    'common.widgets.cloudzoom.CloudZoom',
    array()
);
?>

<div>

    <h4>
        the below is the default structure for using this plugin
    </h4>

    <p>
    <h5>note:</h5>
    you can overwrite the default CloudZoom setting be modify the "rel" attribute of the big image's wrapper tag "a"
    the available setting please read the doc (<a
    href="http://www.professorcloud.com/mainsite/cloud-zoom-integration.htm">CloudZoomDoc</a> )
    or read the source file ;

    <pre>
    $.fn.CloudZoom.defaults = {
        zoomWidth: 'auto',
        zoomHeight: 'auto',
        position: 'right',
        tint: false,
        tintOpacity: 0.5,
        lensOpacity: 0.5,
        softFocus: false,
        smoothMove: 3,
        showTitle: true,
        titleOpacity: 0.5,
        adjustX: 0,
        adjustY: 0
    };
    </pre>
    </p>
    <!--
    An anchor with class of 'cloud-zoom' should surround the small image.
    The anchor's href should point to the big zoom image.
    Any options can be specified in the rel attribute of the anchor.
    Options should be specified in regular JavaScript object format,
    but without the braces.
    -->

    <a href='http://www.professorcloud.com/images/zoomengine/bigimage00.jpg' class='cloud-zoom' id='zoom1'
       rel="adjustX: 10, adjustY:-4, softFocus:true , zoomWidth:700 , position:'right'">
        <img src="http://www.professorcloud.com/images/zoomengine/smallimage.jpg" alt='' align="left"
             title="Optional title display"/>
    </a>

    <div>
        <p>and here is some text</p>

        <!--
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->

        <a href='http://www.professorcloud.com/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery'
           title='Thumbnail 1'
           rel="useZoom: 'zoom1', smallImage: 'http://www.professorcloud.com/images/zoomengine/smallimage.jpg' ">
            <img src="http://www.professorcloud.com/images/zoomengine/tinyimage.jpg" alt="Thumbnail 1"/>
        </a>

        <a href='http://www.professorcloud.com/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery'
           title='Thumbnail 2'
           rel="useZoom: 'zoom1', smallImage: ' http://www.professorcloud.com/images/zoomengine/smallimage-1.jpg'">
            <img src="http://www.professorcloud.com/images/zoomengine/tinyimage-1.jpg" alt="Thumbnail 2"/>
        </a>

        <a href='http://www.professorcloud.com/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery'
           title='Thumbnail 3'
           rel="useZoom: 'zoom1', smallImage: 'http://www.professorcloud.com/images/zoomengine/smallimage-2.jpg' ">
            <img src="http://www.professorcloud.com/images/zoomengine/tinyimage-2.jpg" alt="Thumbnail 3"/>
        </a>

        <a href='http://www.professorcloud.com/images/zoomengine/bigimage03.jpg' class='cloud-zoom-gallery'
           title='Thumbnail 1'
           rel="useZoom: 'zoom1', smallImage: 'http://www.professorcloud.com/images/zoomengine/smallimage-3.jpg' ">
            <img src="http://www.professorcloud.com/images/zoomengine/tinyimage-3.jpg" alt="Thumbnail 1"/>
        </a>

        <a href='http://www.professorcloud.com/images/zoomengine/bigimage04.jpg' class='cloud-zoom-gallery'
           title='Thumbnail 2'
           rel="useZoom: 'zoom1', smallImage: ' http://www.professorcloud.com/images/zoomengine/smallimage-4.jpg'">
            <img src="http://www.professorcloud.com/images/zoomengine/tinyimage-4.jpg" alt="Thumbnail 2"/>
        </a>

    </div>

</div>

Resources

...external resources for this extension...

5 0
13 followers
1 142 downloads
Yii Version: 1.1
License: MIT
Category: User Interface
Developed by: yiqing95
Created on: Jul 25, 2012
Last updated: 5 years ago

Downloads

show all

Related Extensions