Bootstrap light box plugin
Based on A lightbox gallery plugin for Bootstrap https://github.com/ashleydw/lightbox
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist san27079/yii2-bootstrap-lightbox "*"
or add
"san27079/yii2-bootstrap-lightbox": "*"
to the require section of your composer.json
file.
Once the extension is installed, simply use it in your code by :
- create gallery
<?php echo LightBoxWidget::widget([
'data' => [
['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery', 'width' => 320],
['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery', 'width' => 320],
['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery', 'width' => 320],
['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery'],
['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery'],
['src' => 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery'],
['src' => 'https://unsplash.it/1200/768.jpg?image=251', 'thumb' => 'https://unsplash.it/600.jpg?image=251', 'title' => 'Test Gallery'],
],
'options' => [
'row_class' => 'row custom_row',
'column_class' => 'col-3',
]
]); ?>
- create one item
<?php echo LightBoxWidget::widget([
'data' => [
'src' => 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
'thumb' => 'https://unsplash.it/600.jpg?image=251',
'title' => 'Test Video',
'width' => 1280,
'height' => 720
],
'options' => [
'src_class' => 'row custom_row',
'thumb_class' => 'col-3',
]
]); ?>
options - array of params for customization plugin, it contains:
-
src_class - class of source
-
thumb_class - class of thumbnail,
params for gallery:
- row_class - gallery wrapper class,
- column_class - class for item or column
plugin_options - associative array of params for js plugin init for example:
alwaysShowClose, width / height, showArrows etc.