Yii 1.1: adgallery

A Yii framework wrapper for the AD Gallery jquery plugin

This extension allows you to transform a list of images into an attractive gallery with scrollable thumbnails. Features include:

  • Events that accept javascript callbacks

  • Optional separation of thumb and big image for bandwidth optimization

  • Extremely customizable

This widget has been tested in the following browsers:

  • Firefox 3.6.13

  • Chrome 8.0.552.231

  • Safari 5.0.3 (6533.19.4)

Please leave a comment if you test it in any other browsers so that I can include them in this list (if they work) and fix them if they do not work!

1.0.1 Bug Fixes

  • The ad-gallery jquery plugin uses javascript to set some sizes and css to set others. I tried to simplify this by setting all sizes with javascript so that they can be passed to the widget directly. Because of this, some browsers had an issue with the height of the main image not setting properly. This has been fixed in 1.0.1

  • The gallery slideshow autostarted even if agSlideShowAutoStart was set to false. This has been fixed in 1.0.1


Yii 1.1


Unzip and move the adGallery folder to your extension folder.


Simply provide a list of images in an array when calling the widget. The list can be simple or detailed, or you can mix simple and detailed in the same array. See the example:

            'imageList' => array(
                    'image_url' => 'images/1.jpg',
                    'thumb_url' => 'images/thumbs/t1.jpg',
                    'title' => 'Test tile',
                    'link' => 'http://www.google.com/',
                    'alt' => 'Something something',
                    'image_url' => 'images/2.jpg',
                    'title' => 'Test tile sdfjaskdf',
                    'link' => 'http://www.msn.com/',

You can also specify size information if you wish:

            'agWidth' => 450, //450 px wide main image
            'agHeight' => 200, //200 px wide main image
            'agThumbHeight' => 75, //75px tall thumb images
            'agEffect' => 'slide-vert', //vertically slide between images
            'agSlideShowAutoStart' => 'true', //Automatically start a slide show
            'imageList' => array(...),

Total 8 comments

#7874 report it
Volodymyr Vialyi at 2012/04/24 08:26am
error in js : thumb_opacity: 0,7,

Problem is comma between 0 and 7

I had to specify agThumbOpacity directly for fix it

$this->widget('ext.adGallery.AdGallery', array('agThumbOpacity'=>'0.7'));

#7695 report it
saegeek at 2012/04/10 06:54am
It needs correct permissions

I used the sample code and it can't move the JS file to /assets/

The widget registers the JS as following :

<script type="text/javascript" src="/assets/1369e66/jquery.ad-gallery/jquery.ad-gallery.pack.js"></script>

If your jquery.ad-gallery.pack.js cannot be found (404 error) and the "jquery.ad-gallery" folder stills empty on Linux you will have to recursively apply read-write permissions for "www-data" or "others" to /protected/extensions/adGallery

#7222 report it
MadSkillsTisdale at 2012/03/05 01:35pm
Re: How would I go about changing px to ems?

This is a yii wrapper around a jquery plugin that someone else developed. The px is hard coded in the javascript file, but you can change that inside


Just make sure to compress your changes into the file


after you change to ems so that it is included correctly by the widget. I hope this helps

#7204 report it
vcrach at 2012/03/03 03:06pm
How would I go about changing px to ems?

Hi, could you tell me how I might edit this so that it with my site, i.e. change to em measurement rather than px?

#4704 report it
DG Esteban A. Pérez at 2011/08/05 01:30pm
$agDisplayNextAndPrev is Private, not public

So, please change #159 AdGallery.php to fix it :D

Thank you!

#4201 report it
MadSkillsTisdale at 2011/06/15 01:06pm
Where to put the sample code

You use the sample code snippets in your template (view) files

#4195 report it
atachi at 2011/06/15 10:24am
how to use this extention

sorry I am a beginner in Yii, how do I use this extension, because it is less clear explanation on the site, and also help in the path configurations include

above code is written in what files and directories

thank you

#2441 report it
MadSkillsTisdale at 2011/01/02 10:34pm
How to center the gallery

Someone sent me a message about centering the gallery. If you specify a classname or a css id for the widget, you can just put margin:auto on the class or id you specify and it will be centered. If you do not specify a classname you can use

.adGallery { margin: auto; }

in your css. I hope that helps!

Leave a comment

Please to leave your comment.

Create extension