Yii 1.1: How to use YiiBooster Bootstrap Gallery

9 followers

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

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.

Total 3 comments

#17633 report it
Louis Gac at 2014/07/09 10:51am
Old version of YiiBooster

YiiBooster is now base on boostrap 3. So, this tutorial is outdated.

#13832 report it
Stefano Mtangoo at 2013/06/29 02:31pm
Cannot display correctly

See Image below for more reference. But dialog is hidden up the browser window. Is there setting to tell dialog not to hide itself?

The Detailed info Here

#10916 report it
yasen at 2012/12/03 02:10am
Cool

Thanks for sharing your knowledge with the community, Antonio.

Leave a comment

Please to leave your comment.

Write new article