Adding AD Gallery to an Yii application

Site has moved

This site has moved to a new location. Visit the new site at http://programsdream.nl.

By Ronald van Belzen | June 7, 2013

AD Gallery is "A highly customizable gallery/showcase plugin for jQuery". In other words it is a jQuery plugin to create an image gallery on a web page. As many lightbox and image gallery plugins, AD Gallery makes implementation relatively easy. For that reason the javascript part of the example shown below is the easiest part, while the rest is not overly complex either.

Still, to understand the script it is useful to know how it is called from the controller:

class OverviewController extends Controller { 
  // other action functions 

  public function actionView($id) { 
    $model=Gallery::model()->findByPk($id); 
    if($model===null) 
      throw new CHttpException(404,'The requested page does not exist.'); 
    $criteria = new CDbCriteria; 
    $criteria->condition = "gallery_id = $id"; 
    $criteria->order = 'sort ASC'; 
    $models = GalleryImage::model()->findAll($criteria); 
    $this->render('view', array( 
      'gallery'=>$model, 
      'models'=>$models, 
    ));
  } 
}

The model Gallery contains the information about different galleries. Most important attribute of this model is storage that contains the location of the directory in which the images are stored. The model GalleryImage links images to a gallery and contains the information about the image file names. The controller action renders the view view that shows the image gallery:

<?php 
/* @var $this OverviewController */ 
/* @var $gallery Gallery */ 
/* @var $models[] GalleryImage */ 

$this->breadcrumbs=array( 
  $this->module->id=>array('index'), 
  $gallery->name, 
); 
$location = Yii::app()->request->baseUrl.$gallery->storage.'/'; 

Yii::app()->clientScript->registerCssFile(Yii::app()->request->baseUrl . '/protected/modules/gallery/js/adgallery/jquery.ad-gallery.css'); 
Yii::app()->clientScript->registerCoreScript('jquery'); 
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl . '/protected/modules/gallery/js/adgallery/jquery.ad-gallery.js'); 

Yii::app()->clientScript->registerScript('gallery', " 
  var galleries = $('.ad-gallery').adGallery({ 
    width: 800, 
    height: 600, 
    thumb_opacity: 0.85, 
    effect: 'fade' 
  }); 
", CClientScript::POS_END); ?> 
<h1><?php echo $gallery->name; ?></h1> 
<p><?php echo $gallery->description; ?></p> 
<div class="ad-gallery" style="margin:auto"> 
  <div class="ad-image-wrapper"></div> 
  <div class="ad-controls"></div> 
  <div class="ad-nav"> 
    <div class="ad-thumbs"> 
      <ul class="ad-thumb-list"> 
      <?php foreach($models as $model): ?> 
        <li> 
          <?php echo CHtml::link( 
            CHtml::image($location.$model->thumbnail, $model->description, array( 
              'title'=>$model->title, 
            )), 
            $location.$model->mediumsize ); ?> 
        </li> 
      <?php endforeach; ?> 
      </ul> 
    </div> 
  </div> 
</div>

The CSS file and Javascript file of the AD Gallery plugin are included in the page together with a copy of the jQuery file. In lines 17-24 the AD Gallery function adGallery() is called for the container(s) of the images with the class name ad-gallery. This script places the images in the gallery. Of course, the image container needs to be loaded before the script executes. For this reason the script that calls adGallery() is placed at the bottom (alternatively CClientScript::POS_READY could have been used).

The images inside the image container <div class="ad-gallery" /> are added as links to the images while the link itself shows the thumbnail version of the image. The image title is added to the title attribute of the thumbnail image. The image description is shown in the alt attribute of the thumbnail image.