Skip to content

Commit

Permalink
FIX: Zoombox.js update
Browse files Browse the repository at this point in the history
  • Loading branch information
Maximilian Schmidt committed May 24, 2019
1 parent b6cb0c2 commit 5e640fa
Show file tree
Hide file tree
Showing 6 changed files with 3,833 additions and 47 deletions.
86 changes: 57 additions & 29 deletions Resources/Public/JavaScript/main.js
100644 → 100755
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3037,14 +3037,22 @@
imageClass: 'zoombox-image',
innerClass: 'zoombox-inner',
listenKeys: true,
showAsGallery: false,
sliderDraggable: true,
sliderLooped: true,
sliderNextButton: '<button type="button" class="slick-next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14"><path d="M4.648 7.5q0 0.102-0.078 0.18l-3.641 3.641q-0.078 0.078-0.18 0.078t-0.18-0.078l-0.391-0.391q-0.078-0.078-0.078-0.18t0.078-0.18l3.070-3.070-3.070-3.070q-0.078-0.078-0.078-0.18t0.078-0.18l0.391-0.391q0.078-0.078 0.18-0.078t0.18 0.078l3.641 3.641q0.078 0.078 0.078 0.18zM7.648 7.5q0 0.102-0.078 0.18l-3.641 3.641q-0.078 0.078-0.18 0.078t-0.18-0.078l-0.391-0.391q-0.078-0.078-0.078-0.18t0.078-0.18l3.070-3.070-3.070-3.070q-0.078-0.078-0.078-0.18t0.078-0.18l0.391-0.391q0.078-0.078 0.18-0.078t0.18 0.078l3.641 3.641q0.078 0.078 0.078 0.18z"></path></svg></button>',
sliderPrevButton: '<button type="button" class="slick-prev"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14"><path d="M4.898 10.75q0 0.102-0.078 0.18l-0.391 0.391q-0.078 0.078-0.18 0.078t-0.18-0.078l-3.641-3.641q-0.078-0.078-0.078-0.18t0.078-0.18l3.641-3.641q0.078-0.078 0.18-0.078t0.18 0.078l0.391 0.391q0.078 0.078 0.078 0.18t-0.078 0.18l-3.070 3.070 3.070 3.070q0.078 0.078 0.078 0.18zM7.898 10.75q0 0.102-0.078 0.18l-0.391 0.391q-0.078 0.078-0.18 0.078t-0.18-0.078l-3.641-3.641q-0.078-0.078-0.078-0.18t0.078-0.18l3.641-3.641q0.078-0.078 0.18-0.078t0.18 0.078l0.391 0.391q0.078 0.078 0.078 0.18t-0.078 0.18l-3.070 3.070 3.070 3.070q0.078 0.078 0.078 0.18z"></path></svg></button>',
sliderNextButton: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14"><path d="M4.648 7.5q0 0.102-0.078 0.18l-3.641 3.641q-0.078 0.078-0.18 0.078t-0.18-0.078l-0.391-0.391q-0.078-0.078-0.078-0.18t0.078-0.18l3.070-3.070-3.070-3.070q-0.078-0.078-0.078-0.18t0.078-0.18l0.391-0.391q0.078-0.078 0.18-0.078t0.18 0.078l3.641 3.641q0.078 0.078 0.078 0.18zM7.648 7.5q0 0.102-0.078 0.18l-3.641 3.641q-0.078 0.078-0.18 0.078t-0.18-0.078l-0.391-0.391q-0.078-0.078-0.078-0.18t0.078-0.18l3.070-3.070-3.070-3.070q-0.078-0.078-0.078-0.18t0.078-0.18l0.391-0.391q0.078-0.078 0.18-0.078t0.18 0.078l3.641 3.641q0.078 0.078 0.078 0.18z"></path></svg>',
sliderPrevButton: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 8 14"><path d="M4.898 10.75q0 0.102-0.078 0.18l-0.391 0.391q-0.078 0.078-0.18 0.078t-0.18-0.078l-3.641-3.641q-0.078-0.078-0.078-0.18t0.078-0.18l3.641-3.641q0.078-0.078 0.18-0.078t0.18 0.078l0.391 0.391q0.078 0.078 0.078 0.18t-0.078 0.18l-3.070 3.070 3.070 3.070q0.078 0.078 0.078 0.18zM7.898 10.75q0 0.102-0.078 0.18l-0.391 0.391q-0.078 0.078-0.18 0.078t-0.18-0.078l-3.641-3.641q-0.078-0.078-0.078-0.18t0.078-0.18l3.641-3.641q0.078-0.078 0.18-0.078t0.18 0.078l0.391 0.391q0.078 0.078 0.078 0.18t-0.078 0.18l-3.070 3.070 3.070 3.070q0.078 0.078 0.078 0.18z"></path></svg>',
slideTransition: 'ease',
slideTransitionSpeed: 300,
temporary: false,
wrapperClass: 'zoombox-image-wrapper'
wrapperClass: 'zoombox-image-wrapper',
}

var state = {
initialized: false,
visible: false,
currentSlide: undefined,
slideCount: undefined,
}

$.fn.zoombox = function(options) {
Expand All @@ -3063,9 +3071,9 @@
}

if(options.temporary) {
var overlay = $(document.body).append('<div id="' + options.containerId+'-temp' + '"><div class="' + options.buttonClass + '">&times;</div><div class="' + options.innerClass + '"></div></div>').find('#'+options.containerId+'-temp');
var overlay = $(document.body).append('<div id="' + options.containerId + '-temp' + '" class="zoombox-overlay"><div class="' + options.buttonClass + '">&times;</div><div class="' + options.innerClass + '"></div></div>').find('#' + options.containerId + '-temp');
} else {
var overlay = $(document.body).append('<div id="' + options.containerId + '"><div class="' + options.buttonClass + '">&times;</div><div class="' + options.innerClass + '"></div></div>').find('#'+options.containerId);
var overlay = $(document.body).append('<div id="' + options.containerId + '" class="zoombox-overlay"><div class="' + options.buttonClass + '">&times;</div><div class="' + options.innerClass + '"></div></div>').find('#' + options.containerId);
}
var inner = overlay.find('.'+options.innerClass);

Expand All @@ -3079,6 +3087,7 @@
overlay.remove();
} else {
inner.slick('slickUnfilter',0);
state.visible = false;
}
overlay.trigger('zoomboxOverlayHidden');
});
Expand All @@ -3094,6 +3103,7 @@
overlay.remove();
} else {
inner.slick('slickUnfilter',0);
state.visible = false;
}
overlay.trigger('zoomboxOverlayHidden');
});
Expand Down Expand Up @@ -3126,17 +3136,17 @@

if(!options.temporary) {
$(this[i]).attr('data-index',i).on('click',function (event) {
if($(this).is('a')) {
event.preventDefault();
}
event.preventDefault();

overlay.trigger('zoomboxOverlayShowing');

overlay.fadeIn(options.fadeDuration,function () {
state.visible = true;
overlay.trigger('zoomboxOverlayShown');
});

inner.slick('slickGoTo',$(this).data('index'),true);
state.currentSlide = inner.slick('slickCurrentSlide');

if($(this).attr('rel') !== undefined) {
var rel = $(this).attr('rel');
Expand All @@ -3147,30 +3157,32 @@
} else {
var _this = this;

if(options.forceSourceAttr) {
var src = $(_this).attr(options.forceSourceAttr);
} else {
if($(_this).is('a')) {
var src = $(_this).attr('href');
} else if($(_this).is('img')) {
var src = $(_this).attr('src');
if (options.showAsGallery == false) {
if (options.forceSourceAttr) {
var src = $(_this).attr(options.forceSourceAttr);
} else {
var src = $(_this).data('src');
if ($(_this).is('a')) {
var src = $(_this).attr('href');
} else if ($(_this).is('img')) {
var src = $(_this).attr('src');
} else {
var src = $(_this).data('src');
}
}
}

inner.slick('slickFilter',function () {
return ($(this).find('img').attr('src') === src);
})
inner.slick('slickFilter', function () {
return ($(this).find('img').attr('src') === src);
})
}
}

setTimeout(function () {
if(options.centerImages) {
inner.find('.slick-slide').each(function (i,e,a) {
$(this).css('margin-top',(inner.outerHeight() - $(this).outerHeight()) / 2);
if (options.centerImages) {
setTimeout(function () {
inner.find('.slick-slide').each(function (i, e, a) {
$(this).css('margin-top', (inner.outerHeight() - $(this).outerHeight()) / 2);
})
}
},50);
}, 50);
}

$(window).trigger('resize');
})
Expand All @@ -3184,14 +3196,15 @@
draggable: options.sliderDraggable,
infinite: options.sliderLooped,
mobileFirst: false, //TODO: Test this option
nextArrow: options.sliderNextButton,
nextArrow: '<button type="button" class="slick-next">'+options.sliderNextButton+'</button>',
pauseOnHover: options.disableAutoplayOnHover,
prevArrow: options.sliderPrevButton,
prevArrow: '<button type="button" class="slick-prev">'+options.sliderPrevButton+'</button>',
speed: options.slideTransitionSpeed,
touchMove: !options.disableTouchMove,
waitForAnimate: options.ignoreInputOnMove
}).on('afterChange',function (e) {
overlay.trigger('zoomboxChanged');
state.currentSlide = inner.slick('slickCurrentSlide');
if(state.visible) overlay.trigger('zoomboxChanged');
})

if(options.listenKeys) {
Expand All @@ -3203,6 +3216,7 @@
inner.slick('unslick');
overlay.remove();
} else {
state.visible = false;
inner.slick('slickUnfilter',0);
}
overlay.trigger('zoomboxOverlayHidden');
Expand Down Expand Up @@ -3235,13 +3249,27 @@
$(window).trigger('resize');
}

state.initialized = true;

if(options.enforceChaining) {
return this;
} else {
return $('#'+options.containerId) || $('#'+options.containerId+'-temp');
}
};

window.zoombox = {
isInitialized: function () {
return state.initialized;
},
isVisible: function () {
return state.visible;
},
getCurrentSlide: function () {
return state.currentSlide;
}
}

}( jQuery ));

$(function() {
Expand Down
4 changes: 2 additions & 2 deletions Resources/Public/JavaScript/main.min.js
100644 → 100755
View file

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions Resources/Public/Styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,15 @@
.slick-arrow.slick-hidden {
display: none; }

#zoombox-overlay, #zoombox-overlay-temp {
.zoombox-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999; }
#zoombox-overlay > .zoombox-close-btn, #zoombox-overlay-temp > .zoombox-close-btn {
.zoombox-overlay > .zoombox-close-btn {
position: absolute;
right: 15px;
top: 15px;
Expand All @@ -93,32 +93,32 @@
cursor: pointer;
z-index: 10000;
color: #333; }
#zoombox-overlay > .zoombox-inner, #zoombox-overlay-temp > .zoombox-inner {
.zoombox-overlay > .zoombox-inner {
overflow: hidden;
margin: 15px;
height: calc(100% - 30px);
position: static; }
@media (min-width: 768px) {
#zoombox-overlay > .zoombox-inner, #zoombox-overlay-temp > .zoombox-inner {
.zoombox-overlay > .zoombox-inner {
margin: 25px 50px;
height: calc(100% - 50px); } }
#zoombox-overlay > .zoombox-inner > .zoombox-image, #zoombox-overlay-temp > .zoombox-inner > .zoombox-image {
.zoombox-overlay > .zoombox-inner > .zoombox-image {
max-width: 100%;
height: auto; }
#zoombox-overlay > .zoombox-inner .slick-slide, #zoombox-overlay-temp > .zoombox-inner .slick-slide {
.zoombox-overlay > .zoombox-inner .slick-slide {
float: left;
outline: none !important;
margin: 5px; }
#zoombox-overlay > .zoombox-inner .slick-slide .zoombox-image, #zoombox-overlay-temp > .zoombox-inner .slick-slide .zoombox-image {
.zoombox-overlay > .zoombox-inner .slick-slide .zoombox-image {
display: block;
margin: 0 auto;
max-width: calc(100vw - 50px);
max-height: calc(100vh - 50px); }
@media (min-width: 768px) {
#zoombox-overlay > .zoombox-inner .slick-slide .zoombox-image, #zoombox-overlay-temp > .zoombox-inner .slick-slide .zoombox-image {
.zoombox-overlay > .zoombox-inner .slick-slide .zoombox-image {
max-width: calc(100vw - 150px);
max-height: calc(100vh - 70px); } }
#zoombox-overlay > .zoombox-inner .slick-arrow, #zoombox-overlay-temp > .zoombox-inner .slick-arrow {
.zoombox-overlay > .zoombox-inner .slick-arrow {
position: absolute;
top: calc(50% - 25px);
height: 50px;
Expand All @@ -129,11 +129,11 @@
border: none;
outline: none;
cursor: pointer; }
#zoombox-overlay > .zoombox-inner .slick-arrow.slick-prev, #zoombox-overlay-temp > .zoombox-inner .slick-arrow.slick-prev {
.zoombox-overlay > .zoombox-inner .slick-arrow.slick-prev {
left: 0; }
#zoombox-overlay > .zoombox-inner .slick-arrow.slick-next, #zoombox-overlay-temp > .zoombox-inner .slick-arrow.slick-next {
.zoombox-overlay > .zoombox-inner .slick-arrow.slick-next {
right: 0; }
#zoombox-overlay > .zoombox-inner .slick-arrow > svg, #zoombox-overlay-temp > .zoombox-inner .slick-arrow > svg {
.zoombox-overlay > .zoombox-inner .slick-arrow > svg {
max-height: 100%;
width: auto; }

Expand All @@ -146,7 +146,7 @@
float: left;
padding: 0 15px 30px; }
.gallery .gallery-item img {
width: 100%;
max-width: 100%;
height: auto; }
.gallery .gallery-item figcaption .caption {
display: block;
Expand Down
Loading

0 comments on commit 5e640fa

Please sign in to comment.