1. Introduction
2. Usage
3. Resources
4. Final Notes

Introduction ¶

Since version 1.0.4, Yii developers can make use of the image gallery provided by Sebastian Tshan, a great javascript developer that has created some true gems like the jquery file upload plugin.

I couldn't yet include a proper API documentation to the YiiBooster site, I hope that with this simple tutorial I could solve the issues regarding the use of the bootstrap gallery on your projects.

Usage ¶

Preparation ¶

In order to use it, we need to first prepare our views. This tutorial assumes that you are using YiiBooster and that bootstrap.css has been already included.

Register Bootstrap Gallery Image CSS ¶

We register bootstrap css assets via the registerAssetCss method:

Yii::app()->bootstrap->registerAssetCss('bootstrap-image-gallery.min.css');

Render Provided View ¶

In order to easy the job of fellow developers, we have included the required template for the gallery to display correctly. You can change it at will by following the instructions provided at the plugin docs.

// assuming we are on a view
$this->renderPartial('bootstrap.views.gallery.preview');

Register Required Scripts ¶

As with the css assets, we have also provided registerAssetJs to register Bootstrap javascript assets.

Yii::app()->bootstrap->registerAssetJs('fileupload/load-image.min.js');
Yii::app()->bootstrap->registerAssetJs('bootstrap-image-gallery.min.js');

Initialization ¶

Initialize the Image Gallery widget by adding the following data-attributes to a container element containing a set of links to image files with the attribute rel="gallery":

<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery" data-filter="*" >
  <a href="http://placekitten.com/500/500" title="kitten" rel="gallery">
      <img src="http://placekitten.com/250/250" rel="list-gallery" />
  </a>
</div>

Resources ¶

• http://blueimp.github.com/Bootstrap-Image-Gallery/

Final Notes ¶

I truly hope to have the proper API documentation as soon as possible, in order to solve all the doubts that arise about the widgets provided with YiiBooster.