"photoswipe & owl"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js"></script> <div class="container1"> <div class="owl-carousel owl-theme my-slider1"> <div class="item"> <a href="https://wallpaperaccess.com/full/2472569.jpg" data-size="1000x1000" data-title="" class="main-img"> <img src="https://wallpaperaccess.com/full/2472569.jpg"> </a> </div> <div class="item"> <a href="https://wallpaperaccess.com/full/2472433.jpg" data-size="1000x1000" data-title="" class="main-img"> <img src="https://wallpaperaccess.com/full/2472433.jpg"> </a> </div> <div class="item"> <a href="https://wallpaperaccess.com/full/2472399.jpg" data-size="1000x1000" data-title="" class="main-img"> <img src="https://wallpaperaccess.com/full/2472399.jpg"> </a> </div> <div class="item"> <a href="https://wallpaperaccess.com/full/2472433.jpg" data-size="1000x1000" data-title="" class="main-img"> <img src="https://wallpaperaccess.com/full/2472433.jpg"> </a> </div> </div> </div> <div class="container1"> <div class="owl-carousel owl-theme my-slider2"> <div class="item"> <a href="https://wallpaperaccess.com/full/2472569.jpg" data-size="1000x1000" data-title="" class="main-img"> <img src="https://wallpaperaccess.com/full/2472569.jpg"> </a> </div> <div class="item"> <a href="https://wallpaperaccess.com/full/2472433.jpg" data-size="1000x1000" data-title="" class="main-img"> <img src="https://wallpaperaccess.com/full/2472433.jpg"> </a> </div> <div class="item"> <a href="https://wallpaperaccess.com/full/2472399.jpg" data-size="1000x1000" data-title="" class="main-img"> <img src="https://wallpaperaccess.com/full/2472399.jpg"> </a> </div> <div class="item"> <a href="https://wallpaperaccess.com/full/2472433.jpg" data-size="1000x1000" data-title="" class="main-img"> <img src="https://wallpaperaccess.com/full/2472433.jpg"> </a> </div> </div> </div> <!-- Root element of PhotoSwipe. Must have class pswp. --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). --> <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. --> <div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 of them in the DOM to save memory. Don't modify these 3 pswp__item elements, data is added later on. --> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"><i class="las la-times pswp__button pswp__button--close"></i></button> <button class="pswp__button pswp__button--share" title="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR --> <!-- element will get class pswp__preloader--active when preloader is running --> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> <i class="las la-angle-double-left"></i> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> <i class="las la-angle-double-right"></i> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div>
.container1 { max-width: 800px; margin: 30px auto; }
(function($) { // Init empty gallery array var items = []; // Loop over gallery items and push it to the array $('.my-slider1').find('.item a').each(function() { var $anchor = $(this), size = $anchor.attr("data-size").split("x"), title = $anchor.attr("data-title"), item = { el: $anchor.get(0), src: $anchor.attr("href"), w: parseInt(size[0]), h: parseInt(size[1]) }; // Title if( title ) item.title = title; items.push(item); //console.log(items); }); // PhotoSwipe items function getGalleryItems($gallery){ var items = []; $gallery.find('.item a').each(function() { var $anchor = $(this), size = $anchor.attr("data-size").split("x"), title = $anchor.attr("data-title"), item = { el: $anchor.get(0), src: $anchor.attr("href"), w: parseInt(size[0]), h: parseInt(size[1]) }; // Title if( title ) item.title = title; items.push(item); console.log(items); }); return items; } //PhotoSwipe function openGallery($gallery, index, items, pswpOptions){ var $pswp = $(".pswp"), owl = $gallery.data("owlCarousel"), gallery; // Options var options = $.extend(true, { // index index: index, // Thumbnail getThumbBoundsFn: function(index){ var $thumbnail = $(items[index].el).find("img"), offset = $thumbnail.offset(); return { x: offset.left, y: offset.top, w: $thumbnail.outerWidth() }; } }, pswpOptions); // PhotoSwipe gallery = new PhotoSwipe($pswp.get(0), PhotoSwipeUI_Default, items, options); gallery.init(); // PhotoSwipe & OwlCarousel // gallery.listen("beforeChange", function(x){ // owl.goTo(this.getCurrentIndex()); // }); gallery.listen("close", function(){ this.currItem.initialLayout = options.getThumbBoundsFn(this.getCurrentIndex()); }); } // Options OWL function initializeGallery($elem, owlOptions, pswpOptions){ // PhotoSwipe DOM // if( $(".pswp").size() === 0 ){ // //buildPswdHtml(); // } // Gallery $elem.each(function(i){ var $gallery = $(this), uid = i + 1, items = getGalleryItems($gallery), options = $.extend(true, {}, pswpOptions); // OwlCarousel $gallery.owlCarousel(owlOptions); // Options options.galleryUID = uid; $gallery.attr("data-pswp-uid", uid); // PhotoSwipe $gallery.find(".owl-item").on("click", function(e){ if( !$(e.target).is("img") ) return; // items PhotoSwipe.init() openGallery($gallery, $(this).index(), items.concat(), options); return false; }); }); } // Options .owl-carousel var owlOptions = { nav: true, items: 2 }, owlOptions2 = { items: 3 }, pswpOptions = { bgOpacity: 0.9, history: false, shareEl: false }; initializeGallery($(".my-slider1"), owlOptions, pswpOptions); initializeGallery($(".my-slider2"), owlOptions2, pswpOptions); }(jQuery));

Related: See More


Questions / Comments: