dimsemenov / PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent
http://photoswipe.com
MIT License
24.18k stars 3.31k forks source link

Using Photoswipe with Owl-carousel together #1561

Open Barinburo opened 6 years ago

Barinburo commented 6 years ago

I'm using owl carousel and decided to add the Photoswipe popup lightbox to be able to click on image in the carousel. Lightbox works , but always opening the first image in the carousel, doesn`t matter what image in the carousel. The other one lightbox ( like Meow ) - works fine.

Thank's for any help.

Barinburo commented 6 years ago

the script code for lightbox gallery and carousel :

` if(jQuery('.popup-gallery').length > 0) {

    jQuery(document).on('click', '.popup-gallery .popup-item a', function(event) {
        if(!jQuery(this).hasClass('permalink')) {
            var image = [];
            var $pic     = jQuery(this).parents('.popup-gallery');

            var getItems = function() {
                var items = [],
                    $el = '';
                if($pic.hasClass('owl-carousel')) {
                    $el = $pic.find('.owl-item:not(.cloned) a:visible');
                } else {
                    $el = $pic.find('.popup-item a');
                }
                $el.each(function() {
                    var $href   = jQuery(this).attr('href'),
                        $size   = jQuery(this).data('size').split('x'),
                        $width  = $size[0],
                        $height = $size[1];

                    if(jQuery(this).data('type') == 'video') {
                        var item = {
                            html: jQuery(this).data('video')
                        };
                    } else {
                        var item = {
                            src : $href,
                            w   : $width,
                            h   : $height
                        }
                    }

                    items.push(item);
                });
                return items;
            }

            var items = getItems();

            jQuery.each(items, function(index, value) {
                image[index]     = new Image();
                if(value['src']) {
                    image[index].src = value['src'];
                }
            });

            event.preventDefault();

            var $index = jQuery(this).parents('.popup-item').index();

            if(jQuery(this).parent().hasClass('thumbnails')) {
                $index++;
            }
            if(jQuery(this).parent().parent().hasClass('owl-item')) {
                $index = jQuery(this).data('id');
            }
            if(jQuery(this).parents('.popup-gallery').find('.grid-sizer').length > 0) {
                $index = $index-1;
            }
            var options = {
                index: $index,
                bgOpacity: 0.7,
                showHideOpacity: true
            }

            var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);

            lightBox.listen('beforeChange', function() {
                var currItem = jQuery(lightBox.currItem.container);
                jQuery('.pswp__video').removeClass('active');
                var currItemIframe = currItem.find('.pswp__video').addClass('active');
                jQuery('.pswp__video').each(function() {
                    if (!jQuery(this).hasClass('active')) {
                        jQuery(this).attr('src', jQuery(this).attr('src'));
                    }
                });
            });

            lightBox.listen('close', function() {
                jQuery('.pswp__item .pswp__zoom-wrap').remove();
            });
            lightBox.init();
        }
    });
}

`

Barinburo commented 6 years ago

with the Standart WP Gallery - Lightbox works fine with the Owl Carousel - Lightbox always opening from 1st image