[SOLVED]PrettyPhoto & CDetailView

Yii 1.1 General Discussion
1

Hi,

I have a CGridView that uses the PrettyPhoto widget on a link column (see screenshot). All works well on the 1st page, but after using ajaxlink to browse to 2nd page, PrettyPhoto stops working.

I’ve looked to see if there are duplicate Id’s that the JS would stumble on but can’t see any.

Anybody have a solution for this?

Thanks,

Matt




<h1>Manage Galleries</h1>


<?php $this->widget('NotificationWidget'); ?>


<?php

$pretty = $this->createWidget('prettyPhoto');


$options = array(

    //'id' => 'pretty_photo',

    'show_title' => false,

    'overlay_gallery' => false,

    'opacity' => 0.8,

    'deeplinking' => false,

);


PrettyPhoto::addPretty('.link-column a', PrettyPhoto::PRETTY_SINGLE, PrettyPhoto::THEME_DEFAULT, $options);

?>


<?php

$this->widget('zii.widgets.grid.CGridView', array(

    'id' => 'gallery-grid',

    'dataProvider' => $model->search(),

    'filter' => $model,

    'columns' => array(

        'filename',

        array(

            'class' => 'CLinkColumn',

            'header' => 'Preview',

            'urlExpression' => 'Yii::app()->createUrl(Yii::app()->params["uploadDirectory"] . $data->filename)',

            'label' => 'Preview Image',

            'linkHtmlOptions' => array(

                //'class' => 'pretty_image',

            ),

        ),

        array(

            'class' => 'CButtonColumn',

            'header' => 'Update',

            'template' => '{update}',

        ),

        array(

            'class' => 'CButtonColumn',

            'header' => 'Delete',

            'template' => '{delete}',

        ),

    ),

)); ?>
2

Solution is to re-apply the PrettyPhoto JS after CGridView update. Take a look at the bottom of your page source to see the JS it is expecting.

Cheers,

Matt




<div id="adminPanel">

    <?php

    $this->widget('NotificationWidget');


    $pretty = $this->createWidget('prettyPhoto');


    $options = array(

        'id' => 'pretty_photo',

        'show_title' => false,

        'overlay_gallery' => false,

        'opacity' => 0.8,

        'deeplinking' => false,

    );


    PrettyPhoto::addPretty('.link-column a', PrettyPhoto::PRETTY_SINGLE, PrettyPhoto::THEME_DEFAULT, $options);


    $this->widget('zii.widgets.grid.CGridView', array(

        'id' => 'gallery-grid',

        'dataProvider' => $model->search(),

        'filter' => $model,

        'ajaxUpdate' => 'adminPanel',

        'afterAjaxUpdate' => 'function(id, data)

            {

                $(".link-column a").attr("rel","prettyPhoto");

                $("a[rel^=\'prettyPhoto\']").prettyPhoto({\'id\':\'pretty_photo\',\'show_title\':false,\'overlay_gallery\':false,\'opacity\':0.8,\'deeplinking\':false,\'theme\':\'pp_default\'});

            }',

        'columns' => array(

            'filename',

            array(

                'class' => 'CLinkColumn',

                'header' => 'Preview',

                'urlExpression' => 'Yii::app()->createUrl(Yii::app()->params["uploadDirectory"] . $data->filename)',

                'label' => 'Preview Image',

                'linkHtmlOptions' => array(

                //'class' => 'pretty_image',

                ),

            ),

            array(

                'class' => 'CButtonColumn',

                'header' => 'Update',

                'template' => '{update}',

            ),

            array(

                'class' => 'CButtonColumn',

                'header' => 'Delete',

                'template' => '{delete}',

            ),

        ),

    ));

    ?>

</div>