Display image on CGridView column and open a fancy-box

3 followers

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...

Be the first person to leave a comment

Please to leave your comment.

Write new article