From bfde6d1523afe03ff9e5c5efe1f8f8dbd3743b27 Mon Sep 17 00:00:00 2001 From: gogi25 Date: Thu, 28 Feb 2013 23:47:24 +0530 Subject: [PATCH] intial commit --- README.md | 70 ++++--- YiiImageZoomer.php | 458 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 491 insertions(+), 37 deletions(-) create mode 100644 YiiImageZoomer.php diff --git a/README.md b/README.md index 01012f1..5b31afe 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ -************************************************************** Version 1.0 -- First Release *************************************************************** +\************************************************************** Version 1.0 -- First Release *************************************************************** - *********************************** Documentation Of Extension ******************************************* + *********************************** Documentation Of Extension ******************************************* -The Yii-Image-Zoomer is an Yii extension which consists of two type of image zoom.They are: +The Yii-Image-Zoomer is a extension which consists of two type of image zoom.They are: 1) Single Image Zoom: This type of zoom is used when you want to apply zoom effect on single image. 2) Multi-image Zoom: This type of zoom is used when you want to apply zoom effect on Multiple images . @@ -24,8 +24,8 @@ Tested on the following Yii Versions: 2) Copy the "spinner.gif" image which comes with this extension into _[/images]_ .This image is used by script .The folder or directory "images" is created by default when you create a new yii application, it is located at "yourapplicationwebroot/images" For Example: Let's say your application name is "Music_Cart" , than the images folder is located at -[Music_Cart/images]. Directory Structure will be like : - - Music_Cart/ - - - - images/ - --- spinner.gif + - - - images/ + --- spinner.gif 3) To use YII-IMAGE-ZOOMER in a page, include the following code in the page: @@ -38,9 +38,8 @@ Tested on the following Yii Versions: 'multiple_zoom'=>false, 'imagefolder'=>'images', 'single_image'=>array( - 'image_url'=>'millasmall.jpg', - 'image_name'=>'hayden', - 'image_large_url'=>'hayden.jpg', + 'image'=>'millasmall.jpg', + 'image_large'=>'hayden.jpg', 'image_alt'=>'Hayden', 'image_desc'=>'Hayden' @@ -76,26 +75,23 @@ Tested on the following Yii Versions: 'imagefolder'=>'images', 'images'=>array( array( - 'image_url'=>'haydensmall.jpg', - 'image_name'=>'hayden', - 'image_large_url'=>'hayden.jpg', - 'image_thumb_url'=>'hayden_tmb.jpg', + 'image'=>'haydensmall.jpg', + 'image_large'=>'hayden.jpg', + 'image_thumb'=>'hayden_tmb.jpg', 'image_alt'=>'Hayden', 'image_desc'=>'Hayden'), array( - 'image_url'=>'millasmall.jpg', - 'image_name'=>'Milla', - 'image_large_url'=>'milla.jpg', - 'image_thumb_url'=>'milla_tmb.jpg', + 'image'=>'millasmall.jpg', + 'image_large'=>'milla.jpg', + 'image_thumb'=>'milla_tmb.jpg', 'image_alt'=>'Milla', 'image_desc'=>'MIlla'), array( - 'image_url'=>'millasmall.jpg', - 'image_name'=>'Milla', - 'image_large_url'=>'milla.jpg', - 'image_thumb_url'=>'milla_tmb.jpg', + 'image'=>'millasmall.jpg', + 'image_large'=>'milla.jpg', + 'image_thumb'=>'milla_tmb.jpg', 'image_alt'=>'Milla', 'image_desc'=>'MIlla'), @@ -227,17 +223,17 @@ Tested on the following Yii Versions: single_image= @var array - this is where you specify the image for single image zoom @default: empty array * This parameter is an array which further containes Sub-Parameters,they are listed below * - 'image_url'= It specifies the specifies name of zoomable image (Example: 'hayden.jpg') - 'image_large_url'= It specifies the name of the magnified image. + 'image'= It specifies the specifies name of zoomable image (Example: 'hayden.jpg') + 'image_large'= It specifies the name of the magnified image. This should be a larger, higher resolution version of the original image (Example:hayden_large.jpg). 'image_alt'= It specifies the image alt text 'image_desc'= It specifies the image decription to be displayed Example : 'single_image'=>array( - 'image_url'=>'millasmall.jpg', - 'image_name'=>'hayden', - 'image_large_url'=>'hayden.jpg', + 'image'=>'millasmall.jpg', + 'image'=>'hayden', + 'image_large'=>'hayden.jpg', 'image_alt'=>'Hayden', 'image_desc'=>'Hayden' ) @@ -248,11 +244,11 @@ Tested on the following Yii Versions: images= @var array - this is where you specify the image for single image zoom @default: empty array * This parameter is an two-dimentional array which further containes Sub-Parameters,they are listed below * - 'image_url'= It specifies the specifies name of zoomable image (Example: 'hayden.jpg') - 'image_large_url'= It specifies the name of the magnified image. + 'image'= It specifies the specifies name of zoomable image (Example: 'hayden.jpg') + 'image_large'= It specifies the name of the magnified image. This should be a larger, higher resolution version of the original image (Example:hayden_large.jpg). - 'image_thumb_url'= It specifies the name of the thumb image (Example: hayden_thumb.jpg) + 'image_thumb'= It specifies the name of the thumb image (Example: hayden_thumb.jpg) This should be a smaller, lower resolution version of the original image (Example:hayden_thumb.jpg). 'image_alt'= It specifies the image alt text @@ -260,23 +256,23 @@ Tested on the following Yii Versions: Example: 'images'=>array( array( - 'image_url'=>'haydensmall.jpg', - 'image_large_url'=>'hayden.jpg', - 'image_thumb_url'=>'hayden_tmb.jpg', + 'image'=>'haydensmall.jpg', + 'image_large'=>'hayden.jpg', + 'image_thumb'=>'hayden_tmb.jpg', 'image_alt'=>'Hayden', 'image_desc'=>'Hayden'), array( - 'image_url'=>'millasmall.jpg', - 'image_large_url'=>'milla.jpg', - 'image_thumb_url'=>'milla_tmb.jpg', + 'image'=>'millasmall.jpg', + 'image_large'=>'milla.jpg', + 'image_thumb'=>'milla_tmb.jpg', 'image_alt'=>'Milla', 'image_desc'=>'MIlla'), array( - 'image_url'=>'millasmall.jpg', - 'image_large_url'=>'milla.jpg', - 'image_thumb_url'=>'milla_tmb.jpg', + 'image'=>'millasmall.jpg', + 'image_large'=>'milla.jpg', + 'image_thumb'=>'milla_tmb.jpg', 'image_alt'=>'Milla', 'image_desc'=>'MIlla'), ), diff --git a/YiiImageZoomer.php b/YiiImageZoomer.php new file mode 100644 index 0000000..2c551ff --- /dev/null +++ b/YiiImageZoomer.php @@ -0,0 +1,458 @@ +. 2013 + * @copyright Gogi . 2013 + * + */ +class YiiImageZoomer extends CWidget +{ + + // Below are the paramteres which can be customized according to your needs + + /** + * @var boolean $multiple_zoom - used to enable or disable MultiImage zoom + * when set to 'true' will enable MultiImage zoom + * when set to 'false' will disable MultiImage Zoom + * @default : none + */ + public $multiple_zoom; + + /** + * @var string $imagefolder - used to specify the images folder path + * @default : "/images" + */ + public $imagefolder='/images'; + + /** + * @var boolean $cursorshade - used to enable or disable cursor shade + * when set to 'true' will enable cursor shade + * when set to 'false' will disable the cursor shade + * @default : true + */ + public $cursorshade=false; + + /** + * @var string $cursorshadecolor - used to specify the cursor shade colour + * @default : "#fff" (white color) + */ + public $cursorshadecolor='#fff'; + + /** + * @var decimal $cursorshadeopacity - used to specify the cursor shade opacity + * minimum value = 0.1 which is almost transparent. + * maximum value=1 which is fully opaque (as if no opacity is applied). + * @default : 0.1 (almost transparent) + */ + + public $cursorshadeopacity=0.1; + + /** + * @var string $cursorshadeoborder - used to specify the cursor shade border + * @default: '1px solid black' + */ + public $cursorshadeborder='1px solid black'; + + /** + * @var boolean $imagevertcenter + * when set to 'true', the image will centers vertically within its container + * when set to 'false' the image will not centers vertically within its container + * @default: false + */ + public $imagevertcenter=false; + + /** + * @var boolean $magvertcenter + * when set to 'true',the magnified area centers vertically in relation to the zoomable image + * when set to 'false' the magnified area will not centers vertically in relation to the zoomable image + * @default: false + */ + public $magvertcenter=false; + + /** + * @var string $magnifierpos- used to set the position of the magnifying area relative to the original image. + * when set to "right" ,the position of the magnifying area will be set to right + * when set to "left", the position of the magnifying area will be set to left + * Note: If there's not enough room for it in the window in the desired direction, it will automatically shift to the other direction. + * @default: 'right' + */ + + public $magnifierpos='right'; + + /** + * @var array $magnifiersize- used to set the magnifying area's dimensions in pixels + * @default: Default is [200, 200] , or 200px wide by 200px tall + */ + public $magnifiersize=array('200','200'); + + /** + * @var int $width- this option lets you set the width of the zoomable image + * @default: undefined (script determines width of the zoomable image) + */ + public $width; + + /** + * @var int $height- this option lets you set the height of the zoomable image + * @default: undefined (script determines height of the zoomable image) + */ + public $height; + + /** + * @var array $zoomrange- used to set the zoom level of the magnified image relative to the original image. + * The value should be in the form [x, y], where x and y are integers that + * define the lower(minimum value:3) and upper bounds(maximum value:10) of the zoom level. + * @default: Default is [3,10] + */ + public $zoomrange=array(3,10); + + /** + * @var boolean $initzoomablefade- whether or not the zoomable image should fade in automatically when the page loads + * if set to 'true', the zoomable image will fade when the page loads + * if set to 'false', the zoomable image will not fade when the page loads + * Note: See also zoomablefade option. If zoomablefade is set to false, this will also be false. + * If you are using multi-zoom, if zoomablefade is true and this option is set to false, only the first zoomable image will not fade in and rest of the images when loaded will fade in. + * @default: true + */ + + public $initzoomablefade=true; + + /** + * @var boolean $zoomablefade- Sets whether or not the zoomable image within a + * Image Zoomer should fade in as the page loads and, if this is a multi-zoom, + * when the user switches between midsized images using the thumbnail links. + * + * @default: true + */ + + public $zoomablefade=true; + + /** + * @var int $speed- sets the duration of fade in for zoomable images (in milliseconds) when zoomablefade is set to true + * @default: 600 + */ + public $speed=600; + + /** + * @var int $zIndex-In most cases the script will determine the optimal z-index to use here, + * so this property should only be used if there are z-index stacking problems. If there are, + * use it to set the z-index for created elements. It should be at least as high as the highest + * z-index of the zoomable (midsized) image and, if any its positioned parents + * @default: script determines the optimal z-index value to use + */ + public $zIndex=0; + + /** + * @var array $images- this is where you specify the images for multi-zoom + * @default: empty array + */ + public $images=array(); + + /** + * @var array $single_image- this is where you specify the image for single image zoom + * @default: empty array + */ + public $single_image=array(); + + + //Below are the parameters which cannot be customized and these are meant to be used within the class + + + /** + * @var string $name- specifies the name used internally in the class + */ + private $name='YiiImageZoomer'; + + /** + * @var boolean $descpos- boolean used intenally in the class + */ + private $descpos=true; + + /** + * @var string $descArea- string variable used internally in the class + * .it specifies the description area or we can say that the container + * where the image description will be displayed. + */ + private $descArea='description'; + + /** + * @var array $js_options- array used internally in the class for storing the javascript options which are passed to the script later on. + */ + private $js_options=array(); + + /** + * Inits of the class. + */ + public function init() + { + parent::init(); + } + + public function run() + { + //creating clientScript instance + $cs = Yii::app()->clientScript; + $dir = dirname(__FILE__) . DIRECTORY_SEPARATOR; + $baseurl = Yii::app()->getAssetManager()->publish($dir . 'assets'); + $js_options = array(); + $assets=$dir.'assets'; + //if $assets containes path to a valid directory than we will publish the required assets + if(is_dir($assets)) + { + + //register the required scripts ans css files + $clientScript = Yii::app()->getClientScript(); + $clientScript->registerCssFile($baseurl . '/multizoom.css'); + $clientScript->registerCoreScript("jquery.min"); + $clientScript->registerScriptFile( $baseurl . '/multizoom.js'); + + //if the user want to use multi-image zoom and call the function related to multiple zoom + if($this->multiple_zoom!==FALSE) + { + echo $this->build_multiple_images(); + $options = $this->build_js_options(); + $cs->registerScript($this->name,"jQuery('#multizoom1').addimagezoom($options);",CClientScript::POS_READY ); + } + //else user want to use single image zoom + else + { + echo $this->build_single_image(); + $options = $this->build_js_options(); + $cs->registerScript($this->name,"jQuery('#image1').addimagezoom($options);",CClientScript::POS_READY ); + } + } + //else exception will be thrown + else + { + throw new Exception('YiiImageZoomer - Error: Couldn\'t publish assets.'); + } + } + + /** + * Generates the html for single image zoom + * @param : no paramter. + * @return string -$html (which containes the html code for single image zoom) + */ + + public function build_single_image() + { + + // if the image array "single_image" is not empty + if(!empty($this->single_image)) + { + //if the imageFolder exists + if(is_dir($this->imagefolder)) + { + //if the image file exists than generate the html string and return it + if(file_exists(Yii::getPathOfAlias('webroot') .'/'.$this->imagefolder. '/'.$this->single_image['image'])) + { + $html='
'; + $html.= '
'; + $html.='
'.$this->single_image['image_desc'].'
'; + return $html; + } + // else the file doesn't exist than throw an exception + else + { + throw new CHttpException(404, 'Error: The Image file '.$this->single_image['image'].' doesn\'t exists in ImageFolder '.$this->imagefolder.' please make sure that you have specified the correct image file name.'); + } + } + //else the imagefolder doesn't exist than throw an exception. + else + { + throw new CHttpException(404, 'Error: The ImageFolder '.$this->imagefolder.' doesn\'t exists please make sure that you have specified the correct image path.'); + } + } + //else "single_image" array is empty than throw an exception + else + { + throw new Exception('YiiImageZoomer - Error: No Image Is Provided Please Specify The Image To Zoom.'); + } + } + + /** + * Generates the javascript options based on the type of zoom + * @param : no paramter. + * @return string -$html (which containes the html code for multi-image zoom) + */ + public function build_multiple_images() + { + // if the image array "images" is not empty + if(!empty($this->images)) + { + //Loop through the images to check wheather they exists or not in the specified imageFolder + foreach($this->images as $image) + { + //if the file specified in "image" doesn't exists than throw an exception + if(file_exists(Yii::getPathOfAlias('webroot') .'/'.$this->imagefolder. '/'.$image['image'])===false) + { + throw new CHttpException(404, 'Error: The Image file "'.$image['image'].'" doesn\'t exists in ImageFolder "'.$this->imagefolder.'" please make sure that you have specified the correct image file name.'); + } + if(array_key_exists('image_large', $image)) + { + //if the file specified in "image_large" doesn't exists than throw an exception + if(file_exists(Yii::getPathOfAlias('webroot') .'/'.$this->imagefolder. '/'.$image['image_large'])===false) + { + throw new CHttpException(404, 'Error: The Image file "'.$image['image_large'].'" doesn\'t exists in ImageFolder "'.$this->imagefolder.'" please make sure that you have specified the correct image file name.'); + } + } + //if the file specified in "image_thumb" doesn't exists than throw an exception + if(file_exists(Yii::getPathOfAlias('webroot') .'/'.$this->imagefolder. '/'.$image['image_thumb'])===false) + { + throw new CHttpException(404, 'Error: The Image file "'.$image['image_thumb'].'" doesn\'t exists in ImageFolder "'.$this->imagefolder.'" please make sure that you have specified the correct image file name.'); + } + } + //generate the html to display + $html='
'; + $html.=''.$this->images['0']['image_alt'].'
'; + $html.='
'.$this->images['0']['image_desc'].'
'; + $html.='
'; + + //loop through the images to fetch image based data and genrate the html to display + foreach($this->images as $image) + { + $a_options=array(); + + if(array_key_exists('image_large', $image) and isset($image['image_large'])) + { + + $a_options['data-large']=Yii::app()->baseUrl.'/'.$this->imagefolder.'/'.$image['image_large']; + } + + if(isset($this->zoomrange) and !empty($this->zoomrange)) + { + + //$a_options['data-zoomrange']=$this->zoomrange['0']','.$this->zoomrange['1']; + } + + if(array_key_exists('image_desc', $image)and isset($image['image_desc'])) + { + $a_options['data-title']=$image['image_desc']; + } + $html.='$value) + { + $html.=" "."$key".'='."'$value'"." "; + } + $html.='data-magsize="'.$this->magnifiersize['0'].','.$this->magnifiersize['1'].'" data-dims="'.$this->width.','.$this->height.'" data-lens="'.$this->cursorshade.'">'; + $html.=''.$image['image_alt'].''; + $html.=''; + + } + $html.='
'; + return $html; + + } + //else throw exception that no images are provided(it means "images" array is empty) + else + { + throw new CHttpException(404, 'YiiImageZoomer - Error: No Images Are Provided Please Specify the images to zoom.'); + } + } + + /** + * Generates the javascript options based on the type of zoom + * @param : no paramter. + * @return array -$js_options (which containes the javascript encoded options which will be passed to the script) + */ + public function build_js_options() + { + //if the muti-image zoom is set than generate javascript options accordingly + if($this->multiple_zoom!==FALSE) + { + + //generating javascript options for multi-image zoom. + $this->js_options['cursorshade']=$this->cursorshade; + $this->js_options['magnifierpos']=$this->magnifierpos; + $this->js_options['speed']=$this->speed; + $this->js_options['zIndex']=$this->zIndex; + $this->js_options['cursorshadecolor']=$this->cursorshadecolor; + $this->js_options['cursorshadeopacity']=$this->cursorshadeopacity; + $this->js_options['cursorshadeborder']=$this->cursorshadeborder; + $this->js_options['imagevertcenter']= $this->imagevertcenter; + $this->js_options['magvertcenter']=$this->magvertcenter; + $this->js_options['magnifiersize']=array($this->magnifiersize['0'],$this->magnifiersize['1']); + $this->js_options['zoomrange']=array($this->zoomrange['0'],$this->zoomrange['1']); + $this->js_options['initzoomablefade']=$this->initzoomablefade; + $this->js_options['zoomablefade']=$this->zoomablefade; + $this->js_options['width'] = $this->width; + $this->js_options['height']= $this->height; + $this->js_options['descArea']='#'.$this->descArea; + $this->js_options['descpos']= $this->descpos; + + //encoding the javascript options + $this->js_options = CJavaScript::encode($this->js_options); + // return the generated javascript options array (which is $js_options) + return $this->js_options; + } + //else generate options for single image zoom + else + { + //if the large image file doesn't exist than throw an exception + if(file_exists(Yii::getPathOfAlias('webroot') .'/'.$this->imagefolder. '/'.$this->single_image['image_large'])===false) + { + throw new CHttpException(404, 'Error: The Image file "'.$this->single_image['image_large'].'" doesn\'t exists in ImageFolder "'.$this->imagefolder.'" please make sure that you have specified the correct image file name.'); + } + //else large image file exist , generate the javascript options + else + { + // $large_image stores the path to the large image path + $large_image=Yii::app()->baseUrl.'/'.$this->imagefolder.'/'.$this->single_image['image_large']; + + // generating the javascript options for single image zoom + $this->js_options['magnifierpos']=$this->magnifierpos; + $this->js_options['speed']=$this->speed; + $this->js_options['zIndex']=$this->zIndex; + $this->js_options['cursorshadecolor']=$this->cursorshadecolor; + $this->js_options['cursorshadeopacity']=$this->cursorshadeopacity; + $this->js_options['cursorshadeborder']=$this->cursorshadeborder; + $this->js_options['largeimage']=$large_image; + $this->js_options['cursorshade']=$this->cursorshade; + $this->js_options['imagevertcenter']= $this->imagevertcenter; + $this->js_options['magvertcenter']=$this->magvertcenter; + $this->js_options['magnifiersize']=array($this->magnifiersize['0'],$this->magnifiersize['1']); + $this->js_options['zoomrange']=array($this->zoomrange['0'],$this->zoomrange['1']); + $this->js_options['initzoomablefade']=$this->initzoomablefade; + $this->js_options['zoomablefade']=$this->zoomablefade; + $this->js_options['width'] = $this->width; + $this->js_options['height']= $this->height; + $this->js_options['descArea']='#'.$this->descArea; + $this->js_options['descpos']= $this->descpos; + + + //encoding the javascript options + $this->js_options = CJavaScript::encode($this->js_options); + //return the javascript options array (which is js_options) + return $this->js_options; + } + } + } +} + +/* File ends Here */ +?> \ No newline at end of file