<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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/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.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0">
<ul class="owl-carousel owl-theme">
<li>
<a href="https://via.placeholder.com/360x360" data-size="1280x720">
<img src="https://via.placeholder.com/360x360" alt="1" title="Imagen 1"></a>
</li>
<li>
<a href="https://via.placeholder.com/360x360" data-size="720x1280">
<img src="https://via.placeholder.com/360x360" alt="2" title="Imagen 2"></a>
</li>
<li>
<a href="https://via.placeholder.com/360x360" data-size="1920x1920">
<img src="https://via.placeholder.com/360x360" alt="3">
</a>
</li>
<li>
<a href="https://via.placeholder.com/360x360" data-size="1000x640">
<img src="https://via.placeholder.com/360x360" alt="4">
</a>
</li>
<li>
<a href="https://via.placeholder.com/360x360" data-size="960x1000">
<img src="https://via.placeholder.com/360x360" alt="5">
</a>
</li>
<li>
<a href="https://via.placeholder.com/360x360" data-size="960x640">
<img src="https://via.placeholder.com/360x360" alt="6">
</a>
</li>
<li>
<a href="https://via.placeholder.com/360x360" data-size="1200x640">
<img src="https://via.placeholder.com/360x360" alt="7">
</a>
</li>
<li>
<a href="https://via.placeholder.com/360x360" data-size="960x1200">
<img src="https://via.placeholder.com/360x360" alt="8">
</a>
</li>
<li>
<a href="https://via.placeholder.com/360x360" data-size="800x640">
<img src="https://via.placeholder.com/360x360" alt="9">
</a>
</li>
</ul>
</div>
</div>
</div>
body {
background-color: #232323;
}
.owl-carousel {
padding: 0;
}
.owl-carousel li {
list-style: none;
margin-left: 10px;
}
.owl-carousel li img {
max-width: 100%;
height: auto;
border-radius: 3px;
transition: transform 0.15s ease-out;
}
.owl-carousel li img:hover {
transform: scale(0.98, 0.98);
}
.owl-carousel li img:active {
transform: scale(0.96, 0.96);
}
.owl-controls .owl-buttons div {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: white;
background: rgba(255, 255, 255, 0.75);
cursor: pointer;
line-height: 44px;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.owl-controls .owl-buttons div:hover {
background: white;
}
.owl-controls .owl-buttons div::focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.owl-controls .owl-buttons div::active {
opacity: 0.6;
}
.owl-controls .owl-buttons .owl-prev {
left: 10px;
right: auto;
}
.owl-controls .owl-buttons .owl-next {
right: 10px;
left: auto;
}
.owl-controls .owl-pagination {
text-align: center;
}
.owl-controls .owl-pagination .owl-page {
display: inline-block;
}
.owl-controls .owl-pagination .owl-page span {
background: none repeat scroll 0 0 #869791;
border-radius: 20px;
display: block;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
width: 12px;
}
@media only screen and (max-width: 960px) {
.container {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
.owl-carousel li {
padding-right: 5px;
padding-left: 5px;
}
}
$(function(){
// PhotoSwipe-HTML
function buildPswdHtml(){
$("body").append([
'<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">',
' <div class="pswp__bg"></div>',
' <div class="pswp__scroll-wrap">',
' <div class="pswp__container">',
' <div class="pswp__item"></div>',
' <div class="pswp__item"></div>',
' <div class="pswp__item"></div>',
' </div>',
' <div class="pswp__ui pswp__ui--hidden">',
' <div class="pswp__top-bar">',
' <div class="pswp__counter"></div>',
' <button class="pswp__button pswp__button--close" title="Close (Esc)"></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>',
' <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)"></button>',
' <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>',
' <div class="pswp__caption">',
' <div class="pswp__caption__center"></div>',
' </div>',
' </div>',
' </div>',
'</div>'
].join(""));
}
// PhotoSwipe items
function getGalleryItems($gallery){
var items = [];
$gallery.find("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);
});
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 = {
// Most important owl features
itemsCustom: [[0, 3]],
responsiveRefreshRate: 0,
// Navigation
navigation : true,
//navigationText : ["prev","next"]
navigationText: [
'<i class="glyphicon glyphicon-menu-left""></i>',
'<i class="glyphicon glyphicon-menu-right"></i>'
],
// Opciones indicadores
dots: true,
paginationSpeed: 300,
rewindSpeed: 400,
responsive:{
0:{
items:1
},
490:{
items:2
},
770:{
items:3
},
1200:{
items:4
},
1500:{
items:5
}
}
},
pswpOptions = {
bgOpacity: 0.9,
history: false,
shareEl: false
};
initializeGallery($(".owl-carousel"), owlOptions, pswpOptions);
});
