<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));
