2amigos / yii2-gallery-widget

BlueImp Gallery Widget for Yii2

Gallery Widget for Yii2

Renders a BlueImp Gallery and/or Carousel. BlueImp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional.

For more information, please visit http://blueimp.github.io/Gallery/

Installation

The preferred way to install this extension is through composer.

Either run

$ composer require 2amigos/yii2-gallery-widget:~1.0

or add

"2amigos/yii2-gallery-widget": "~1.0"

to the require section of your composer.json file.

Usage

Using Gallery With LightBox

// on your view
<?php $items = [
    [
        'url' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_b.jpg',
        'src' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_s.jpg',
        'options' => array('title' => 'Camposanto monumentale (inside)')
    ],
    [
        'url' => 'http://farm3.static.flickr.com/2863/9479121747_0b37c63fe7_b.jpg',
        'src' => 'http://farm3.static.flickr.com/2863/9479121747_0b37c63fe7_s.jpg',
        'options' => array('title' => 'Hafsten - Sunset')
    ],
    [
        'url' => 'http://farm4.static.flickr.com/3712/9478186779_81c2e5f7ef_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3712/9478186779_81c2e5f7ef_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
    [
        'url' => 'http://farm4.static.flickr.com/3789/9476654149_b4545d2f25_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3789/9476654149_b4545d2f25_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
    [
        'url' => 'http://farm8.static.flickr.com/7429/9478868728_e9109aff37_b.jpg',
        'src' => 'http://farm8.static.flickr.com/7429/9478868728_e9109aff37_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
    [
        'url' => 'http://farm4.static.flickr.com/3825/9476606873_42ed88704d_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3825/9476606873_42ed88704d_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
    [
        'url' => 'http://farm4.static.flickr.com/3749/9480072539_e3a1d70d39_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3749/9480072539_e3a1d70d39_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
    [
        'url' => 'http://farm8.static.flickr.com/7352/9477439317_901d75114a_b.jpg',
        'src' => 'http://farm8.static.flickr.com/7352/9477439317_901d75114a_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
    [
        'url' => 'http://farm4.static.flickr.com/3802/9478895708_ccb710cfd1_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3802/9478895708_ccb710cfd1_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
];?>
<?= dosamigos\gallery\Gallery::widget(['items' => $items]);?>
// ...

Using Carousel With Json Encoded Items

// on your view
<?php $items = [
    [
        'title' => 'Sintel',
        'href' => 'http://media.w3.org/2010/05/sintel/trailer.mp4',
        'type' => 'video/mp4',
        'poster' => 'http://media.w3.org/2010/05/sintel/poster.png'
    ],
    [
        'title' => 'Big Buck Bunny',
        'href' => 'http://upload.wikimedia.org/wikipedia/commons/7/75/Big_Buck_Bunny_Trailer_400p.ogg',
        'type' => 'video/ogg',
        'poster' => 'http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Big.Buck.Bunny.-.Opening.Screen.png/' .
            '800px-Big.Buck.Bunny.-.Opening.Screen.png'
    ],
    [
        'title' => 'Elephants Dream',
        'href' => 'http://upload.wikimedia.org/wikipedia/commons/transcoded/8/83/Elephants_Dream_%28high_quality%29.ogv/' .
            'Elephants_Dream_%28high_quality%29.ogv.360p.webm',
        'type' => 'video/webm',
        'poster' => 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Elephants_Dream_s1_proog.jpg/' .
            '800px-Elephants_Dream_s1_proog.jpg'
    ],
    [
        'title' => 'LES TWINS - An Industry Ahead',
        'href' => 'http://www.youtube.com/watch?v=zi4CIXpx7Bg',
        'type' => 'text/html',
        'youtube' => 'zi4CIXpx7Bg',
        'poster' => 'http://img.youtube.com/vi/zi4CIXpx7Bg/0.jpg'
    ],
    [
        'title' => 'KN1GHT - Last Moon',
        'href' => 'http://vimeo.com/73686146',
        'type' => 'text/html',
        'vimeo' => '73686146',
        'poster' => 'http://b.vimeocdn.com/ts/448/835/448835699_960.jpg'
    ]
];?>
<?= dosamigos\gallery\Carousel::widget([
    'items' => $items, 'json' => true,
    'clientEvents' => [
        'onslide' => 'function(index, slide) {
            console.log(slide);
        }'
]]);
// ...

Multiple Carousel instances on one page

// on your view
<?php $items = [
    [
        'title' => 'Sintel',
        'href' => 'http://media.w3.org/2010/05/sintel/trailer.mp4',
        'type' => 'video/mp4',
        'poster' => 'http://media.w3.org/2010/05/sintel/poster.png'
    ],
    [
        'title' => 'Big Buck Bunny',
        'href' => 'http://upload.wikimedia.org/wikipedia/commons/7/75/Big_Buck_Bunny_Trailer_400p.ogg',
        'type' => 'video/ogg',
        'poster' => 'http://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Big.Buck.Bunny.-.Opening.Screen.png/' .
            '800px-Big.Buck.Bunny.-.Opening.Screen.png'
    ],
    [
        'title' => 'Elephants Dream',
        'href' => 'http://upload.wikimedia.org/wikipedia/commons/transcoded/8/83/Elephants_Dream_%28high_quality%29.ogv/' .
            'Elephants_Dream_%28high_quality%29.ogv.360p.webm',
        'type' => 'video/webm',
        'poster' => 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Elephants_Dream_s1_proog.jpg/' .
            '800px-Elephants_Dream_s1_proog.jpg'
    ]
];?>
<?= dosamigos\gallery\Carousel::widget([
    'items' => $items, 'json' => true,
    'templateOptions' => ['id'=>'gallery_1'],
    'clientOptions' => ['container'=>'#gallery_1'],
    'options' => ['id'=>'gallery_1'],
]);

<?= dosamigos\gallery\Carousel::widget([
    'items' => $items, 'json' => true,
    'templateOptions' => ['id'=>'gallery_2'],
    'clientOptions' => ['container'=>'#gallery_2'],
    'options' => ['id'=>'gallery_2'],
]);
?>  

You can access to different instances in JS now

blueimp_galleries['gallery_1'].initSlides();
blueimp_galleries['gallery_1'].next();

Testing

$ ./vendor/bin/phpunit

Contributing

Please see CONTRIBUTING for details.

Credits

• All Contributors

License

The BSD License (BSD). Please see License File for more information.

web, mobile development & design
www.2amigos.us

yii2-gallery-widget's Issues

Change size gallery

Hi Dear, and tank you for this Extension useful,

I have a question : How Can I Change Width and height Gallery slide show?
I have a div with width:600px and height : 400px; I put the code in there, but it is much larger than 600x400 :(.

Plz guide me !!

error when installing 1.1.*

when installing throw composer get the following errors :
Problem 1
- The requested package bower-asset/blueimp-gallery could not be found in any version, there may be a typo in the package name.
Problem 2
- Installation request for 2amigos/yii2-gallery-widget 1.1.* -> satisfiable by 2amigos/yii2-gallery-widget[1.1.0].
- 2amigos/yii2-gallery-widget 1.1.0 requires bower-asset/blueimp-gallery ~2.17.0 -> no matching package found.

as mention in
https://packagist.org/packages/2amigos/yii2-gallery-widget

what to do?

Add images dynamically

How do i add images dynamically on page load or on user click a button

issue installing the gallery widget

Good day,
I keep getting this error whenever i try to install the widget.
I have changed my minimum stability setting in my composer.json to @dev, but still I keep getting the same error
Your requirements could not be resolved to an installable set of packages.

Problem 1
- 2amigos/yii2-gallery-widget 1.0.x-dev requires bower-asset/blueimp-gallery ~2.17.0 -> no matching package found.
- 2amigos/yii2-gallery-widget 1.1.0 requires bower-asset/blueimp-gallery ~2.17.0 -> no matching package found.
- 2amigos/yii2-gallery-widget 1.0.3 requires bower-asset/blueimp-gallery ~2.17.0 -> no matching package found.
- 2amigos/yii2-gallery-widget 1.0.2 requires bower-asset/blueimp-gallery ~2.15.0 -> no matching package found.
- 2amigos/yii2-gallery-widget 1.0.1 requires bower-asset/blueimp-gallery ~2.15.0 -> no matching package found.
- 2amigos/yii2-gallery-widget 1.0.0 requires bower-asset/blueimp-gallery ~2.15 -> no matching package found.
- Installation request for 2amigos/yii2-gallery-widget ~1.0 -> satisfiable by 2amigos/yii2-gallery-widget[1.0.0, 1.0.1, 1.0.2, 1.0.3, 1.1.0, 1.0.x-dev].

Potential causes:

• A typo in the package name
• The package is not available in a stable-enough version according to your minimum-stability setting
  see https://getcomposer.org/doc/04-schema.md#minimum-stability for more details.

Read https://getcomposer.org/doc/articles/troubleshooting.md for further common problems.

How to enable enableRotation ???

Is this possible to enable rotation with this gallery

How instance two gallery or carousel??

Hello all
is it possible to instance two widget of 2amigos Gallery || Carousel on the same views page?? For example: i have a page with a Carousel that work fine, without problem. On the same page i insert also another control Gallery with the same instance:

$items]);?>

.. .. ..

$items]);?>

When select an image of my Gallery, 2amigos don't show the previous resource gallery images.

Thanks
Marco

multiple galleries issue

Hi
I used "yii2-gallery-widget" in a page several times.
that is create many id="blueimp-gallery" div (renderTemplate function ran several time) That was conflict in gallery show.
I added this code in first of renderTemplate function (in /src/Gallery.php) and problem solved:
static $isRendered = false;
if ($isRendered) {
return '';
}
please solve this issue (by this way or better way).

i want to know this is static code for gallery there are no option to upload image for gallery.

please tell me this extension only use for static page.

bug in Internet Explorer

this issue does not include this specific widget, but from original blueimp gallery. i already try contact the author but i don' t received response, and in the repository i can not add the issue.
the problem is:

in internet explorer 11 with blueimp carousel, when i click in button "next" when the animation starts in the right side of carousel the next image appears and disappear, like the gif example in the site of blueimp. Sometimes this happens also when the page refresh. You can try in Internet explorer in https://blueimp.github.io/Gallery/

Example in GIF:
https://i.stack.imgur.com/aBiaJ.gif

No tests in composer installed instance

There are tests in git but no tests in composer installed instance. What i am doing wrong? Thanks.

LightBox is not Poping up on click

Everything is working cool but the LightBox is not Poping up on click its redirecting to image link.
i can`t find the reason w

hy this is happening

Multiple galleries on the page

When I added two galleries to the page, they looks like not work. Try:

<?php $items = [
    [
        'url' => 'http://farm4.static.flickr.com/3712/9478186779_81c2e5f7ef_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3712/9478186779_81c2e5f7ef_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
    [
        'url' => 'http://farm4.static.flickr.com/3802/9478895708_ccb710cfd1_b.jpg',
        'src' => 'http://farm4.static.flickr.com/3802/9478895708_ccb710cfd1_s.jpg',
        'options' => array('title' => 'Sail us to the Moon')
    ],
];?>
<?= dosamigos\gallery\Gallery::widget(['items' => $items]);?>

<?php $items = [
    [
        'url' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_b.jpg',
        'src' => 'http://farm8.static.flickr.com/7429/9478294690_51ae7eb6c9_s.jpg',
        'options' => array('title' => 'Camposanto monumentale (inside)')
    ],
    [
        'url' => 'http://farm3.static.flickr.com/2863/9479121747_0b37c63fe7_b.jpg',
        'src' => 'http://farm3.static.flickr.com/2863/9479121747_0b37c63fe7_s.jpg',
        'options' => array('title' => 'Hafsten - Sunset')
    ],
];?>
<?= dosamigos\gallery\Gallery::widget(['items' => $items]);?>

Q:Replace event drag images with click on image

Hello,

is there any way to change some code to put links for images and not drag with mouse. This is more Q then issue but this is fasts way :) thank you.

LightBox

Hi, thanks for the great extension. I have a question about a specific type of implementation. I'm looking to have a video button "overlay" on all the images in the carousel. I want the video to open in a lightbox. Is this possible?

ERROR ON COMPOSER INSTALLATION.

Please how can I install this with Composer.

I tried: require "2amigos/yii2-gallery-widget" "~1.0"

It gave me an error: 'Your requirement could not be resolved to an installable set of packages'

The package is not available in a stable-enough version according to your minimum stability setting.

Please What can I do to install it ?

Gallery not work in other language

I m trying to use this gallery widget: https://github.com/2amigos/yii2-gallery-widget
Everything is fine and images are detected when url is in default language (i.e: www.myapp.com/index.php/uploads/myimg.jpg )
This widget not work and display only images without gallery widget when url is in other language i.e ( www.myapp.com/index.php/cn/uploads/myimg.jpg )
I configure like this : ‘src’ => Url::to(’@web/uploads/myimage.jpg) and this only work in default language. What’s the problem with it ?

Create gallery from database.

Hello,
I am having trouble creating a gallery from a database.
Could you give me an example. I have passed data to the view but do not know how to format it for the widget.
Database field are: id, url, src, options, imageOptions.

Thanks

bower-asset/blueimp-gallery could not be found in any version

Can't figure out how to install yii2-gallery-widget. I've tried many things. Any hints appreciated. Here are the error messages from composer:

• 2amigos/yii2-gallery-widget 1.0.3 requires bower-asset/blueimp-gallery ~2.17.0 -> no matching package found.

  • 2amigos/yii2-gallery-widget 1.0.2 requires bower-asset/blueimp-gallery ~2.15.0 -> no matching package found.
  • 2amigos/yii2-gallery-widget 1.0.1 requires bower-asset/blueimp-gallery ~2.15.0 -> no matching package found.
  • 2amigos/yii2-gallery-widget 1.0.0 requires bower-asset/blueimp-gallery ~2.15 -> no matching package found.
  • Installation request for 2amigos/yii2-gallery-widget ^1.0 -> satisfiable by 2amigos/yii2-gallery-widget[1.0.0, 1.0.1, 1.0.2, 1.0.3].

• The requested package bower-asset/blueimp-gallery could not be found in any version, there may be a typo in the package name.

How to get the js instance of the gallery or carousel?

Hello,

How can I get the js instance of the gallery? I want to run Blueimp API commands...
I tried:

var gallery = $('#blueimp-gallery').data('gallery');

As shown at the official Blueimp Gallery docs, but that always returns undefined...

The problem:

I have an Youtube video slideshow inside a modal. When I hide the modal before pausing the video, I keep listening the audio..
I would like to stop the video when hiding the modal.

Thanks!

Q: Add class to IMG

I want to add 'class' => 'img-responsive' to my image to make responsive my 'src' like:

<div id="w1">
   <a class="gallery-item" href="http://a.com/b.jpg" title="text">
      <img src="http://a.com/b.jpg" class="img-responsive">
   </a>
</div>

if i add'options' => array('class' => 'img-responsive')

i get this:

<div id="w1">
   <a class="gallery-item" href="http://a.com/b.jpg" title="text" class="img-responsive">
      <img src="http://a.com/b.jpg">
   </a>
</div>

how can i write my personal class in an img tag?

all ok

assets error for newest file-upload-widget

In your package yii2-file-upload-widget, you use this package as a dependency to handle preview of upload pictures. But I'm using it as a preview to download.

Then I found that:

This package require "bower-asset/blueimp-gallery": "~2.17.0",this means blueimp-gallery between 2.17.0 and 2.18.0, but blueimp-gallery has updated to 2.28.0. I think you should use this for fix: "bower-asset/blueimp-gallery": "2.*".

Implement Blueimp Bootstrap Image Gallery

I think it would be a good idea to implement this https://github.com/blueimp/Bootstrap-Image-Gallery as it will improve significantly the gallery.

What do you think?

Anchor tag in H3 Title when Pop-Up showing

Hello Sir,
This plugins is wonderful at all. I choose it but i have faced big problem when i implementing this in my project. Please provide me healthy advice.
Can you provide some more details regarding options of this widget, i can't able to custom template on it. Can i add anchor tag with an url in H3 with title when we open image on popup pictures slider. Please provide us more detail for this widget.

field "title"

Sorry for my english, I hope clearly describe.

You have a good extension, but there is a small flaw I believe. There is a "title" field you want to fill in, but in fact it is no where to be filled. It would be nice if you add the field or during the loading of images (each image) or after.

$items = [
    [
        'url' => '',
        'src' => '',
        'options' => array('title' => '???????????????????????????????????????')
    ],
]

Uncaught ReferenceError: blueimp is not defined

I get this error in console:

GET http://localhost/webapplication/frontend/web/assets/5aaa8e05/css/blueimp-gallery.min.css
1:462 GET http://localhost/webapplication/frontend/web/assets/5aaa8e05/js/blueimp-gallery.min.js 404 (Not Found)
1:468 Uncaught ReferenceError: blueimp is not defined