Display image on CGridView column and open a fancy-box

This wiki article has not been tagged with a corresponding Yii version yet.
Help us improve the wiki by updating the version information.

1) Add a fancy-box extension on admin page

<?php 
$this->widget('application.extensions.fancybox.EFancyBox', array(
    'target'=>'a[class=fancybox1]',
    'config'=>array(),
    )
); 
?>

2) write your code on admin.php file

$height='30px';
 $width='30px';
 $path='/upload/liquor/';
array(
		    'name'=>'liquor_logo',
		    'type'=>'html',
                    'filter' => '',
		    'value'=>'(!empty($data["liquor_logo"])) ? CHtml::link(CHtml::tag("img",array("height"=>\''.$height.'\',\'width\'=>\''.$width.'\',"src" => UtilityHtml::getAdminImage(GxHtml::valueEx($data,\'liquor_logo\'),\''.$path.'\'))),"",array("class"=>"fancybox1","href"=> UtilityHtml::getAdminImage(GxHtml::valueEx($data,\'liquor_logo\'),\''.$path.'\'))) :  CHtml::tag("img",array("height"=>\''.$height.'\',\'width\'=>\''.$width.'\',"src" => UtilityHtml::getAdminImage(GxHtml::valueEx($data,\'liquor_logo\'),\''.$path.'\')))',
                    'htmlOptions' => array('width' => '10%'),   
		),	

3)create the UtilityHtml.php file on component folder otherwise which common file call you can put the function...getImageCoupon

public static function getAdminImage($image, $path) {

		if ($image != '' && file_exists(YiiBase::getPathOfAlias('webroot') . $path . $image)) {
			return Yii::app()->request->baseUrl . $path . $image;
		} else {
			return Yii::app()->request->baseUrl . $path . 'images.jpg';
		}
	}

4)this fancy-box call if you want to change the pagination then open a image on fancy box

then you want to add a after Ajax Method on admin grid view

'afterAjaxUpdate'=>'function(){
		fancy();
	}',

and add a script on admin page

<script type="text/javascript">
	$(document).ready(function() {
	    $(".fancybox1").fancybox({
	          helpers: {
	              title : {
	                  type : 'float'
	              }
	          }
	      });
	});
	
</script>

Hope it will be helpful...

0 0
2 followers
Viewed: 17 019 times
Version: Unknown (update)
Category: Tutorials
Written by: Ankit Modi
Last updated by: Ankit Modi
Created on: Aug 3, 2013
Last updated: 9 years ago
Update Article

Revisions

View all history

Related Articles