07c290a453
- zoesch.de - blitzkiste.net - gruene-hassberge (norbert.zoesch.de) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
379 lines
16 KiB
Smarty
379 lines
16 KiB
Smarty
{combine_css path="themes/bootstrap_darkroom/components/photoswipe/dist/photoswipe.css" order=-11}
|
|
{combine_css path="themes/bootstrap_darkroom/components/photoswipe/dist/default-skin/default-skin.css" order=-12}
|
|
{combine_script id="photoswipe" require="jquery" path="themes/bootstrap_darkroom/components/photoswipe/dist/photoswipe.min.js" load="footer"}
|
|
{combine_script id="photoswipe.ui" require="photoswipe" path="themes/bootstrap_darkroom/components/photoswipe/dist/photoswipe-ui-default.min.js" load="footer"}
|
|
{footer_script require='jquery' require="photoswipe.ui"}{strip}
|
|
var selector = '{$selector}';
|
|
|
|
function startPhotoSwipe(idx) {
|
|
$(selector).each(function() {
|
|
$('#thumbnail-active').addClass('active');
|
|
var $pic = $(this),
|
|
getItems = function() {
|
|
var items = [];
|
|
$pic.find('a').each(function() {
|
|
if ($(this).attr('data-video')) {
|
|
var $src = $(this).data('src-original'),
|
|
$size = $(this).data('size-original').split('x'),
|
|
$width = $size[0],
|
|
$height = $size[1],
|
|
$src_preview = $(this).data('src-medium'),
|
|
$size_preview = $(this).data('size-medium').split(' x '),
|
|
$width_preview = $size_preview[0],
|
|
$height_preview = $size_preview[1],
|
|
$href = $(this).attr('href'),
|
|
$title = '<a href="' + $href + '">' + $(this).data('name') + '</a><ul><li>' + $(this).data('description') + '</li></ul>';
|
|
var item = {
|
|
is_video : true,
|
|
href : $href,
|
|
src : $src_preview,
|
|
w : $width_preview,
|
|
h : $height_preview,
|
|
title : $title,
|
|
videoProperties: {
|
|
src : $src,
|
|
w : $width,
|
|
h : $height,
|
|
}
|
|
};
|
|
} else {
|
|
var $src_xlarge = $(this).data('src-xlarge'),
|
|
$size_xlarge = $(this).data('size-xlarge').split(' x '),
|
|
$width_xlarge = $size_xlarge[0],
|
|
$height_xlarge = $size_xlarge[1],
|
|
$src_large = $(this).data('src-large'),
|
|
$size_large = $(this).data('size-large').split(' x '),
|
|
$width_large = $size_large[0],
|
|
$height_large = $size_large[1],
|
|
$src_medium = $(this).data('src-medium'),
|
|
$size_medium = $(this).data('size-medium').split(' x '),
|
|
$width_medium = $size_medium[0],
|
|
$height_medium = $size_medium[1],
|
|
$href = $(this).attr('href'),
|
|
$title = '<a href="' + $href + '"><div><div>' + $(this).data('name');
|
|
{if $theme_config_extra->photoswipe_metadata}
|
|
$title += '<ul id="pswp--caption--date_created" class="pull-right"><li><em>' + $(this).data('date-created') + '</em></li></ul>';
|
|
{/if}
|
|
$title += '</div>';
|
|
{literal}
|
|
if ($(this).data('description').length > 0) {$title += '<ul id="pswp--caption--description"><li>' + $(this).data('description') + '</li></ul>'; }
|
|
{/literal}
|
|
{if $theme_config_extra->photoswipe_metadata}
|
|
$title += '<ul id="pswp--caption--metadata" class="pull-right">';
|
|
{literal}
|
|
if ($(this).data('exif-make').length > 0) {$title += '<li><em>' + $(this).data('exif-make') + '</em></li>';}
|
|
if ($(this).data('exif-model').length > 0) {$title += '<li><em> ' + $(this).data('exif-model') + '</em></li>';}
|
|
if ($(this).data('exif-lens').length > 0) {$title += '<li><em>, ' + $(this).data('exif-lens') + '</em></li>';}
|
|
if ($(this).data('exif-focal-length').length > 0) {$title += '<li><em>, ' + $(this).data('exif-focal-length') + '</em></li>';}
|
|
if ($(this).data('exif-apperture') > 0) {$title += '<li><em>, f/' + $(this).data('exif-apperture') + '</em></li>';}
|
|
if ($(this).data('exif-shutter-speed').length > 0) {$title += '<li><em>, ' + $(this).data('exif-shutter-speed') + '</em></li>';}
|
|
if ($(this).data('exif-iso') > 0) {$title += '<li><em>, ISO' + $(this).data('exif-iso') + '</em></li>';}
|
|
{/literal}
|
|
$title += '</ul>';
|
|
{/if}
|
|
$title += '</div></a>';
|
|
var item = {
|
|
is_video: false,
|
|
href: $href,
|
|
mediumImage: {
|
|
src : $src_medium,
|
|
w : $width_medium,
|
|
h : $height_medium,
|
|
title : $title
|
|
},
|
|
largeImage: {
|
|
src : $src_large,
|
|
w : $width_large,
|
|
h : $height_large,
|
|
title : $title
|
|
},
|
|
xlargeImage: {
|
|
src : $src_xlarge,
|
|
w : $width_xlarge,
|
|
h : $height_xlarge,
|
|
title : $title
|
|
}
|
|
};
|
|
}
|
|
items.push(item);
|
|
});
|
|
return items;
|
|
};
|
|
var items = getItems();
|
|
|
|
var $pswp = $('.pswp')[0];
|
|
if (typeof(idx) === "number") {
|
|
var $index = idx;
|
|
} else {
|
|
var $index = $(selector + ' a.active').data('index');
|
|
}
|
|
if (navigator.userAgent.match(/IEMobile\/11\.0/)) {
|
|
var $history = false;
|
|
} else {
|
|
var $history = true;
|
|
}
|
|
var options = {
|
|
index: $index,
|
|
showHideOpacity: true,
|
|
closeOnScroll: false,
|
|
closeOnVerticalDrag: false,
|
|
focus: false,
|
|
history: $history,
|
|
preload: [1,2],
|
|
{if $theme_config->social_enabled}
|
|
shareButtons: [
|
|
{if $theme_config->social_facebook}{literal}
|
|
{id:'facebook', label:'<i class="fa fa-facebook fa-2x"></i> Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
|
|
{/literal}{/if}
|
|
{if $theme_config->social_twitter}{literal}
|
|
{id:'twitter', label:'<i class="fa fa-twitter fa-2x"></i> Tweet', url:'https://twitter.com/intent/tweet?url={{url}}'},
|
|
{/literal}{/if}
|
|
{if $theme_config->social_google_plus}{literal}
|
|
{id:'google', label:'<i class="fa fa-google-plus fa-2x"></i> Share on Google+', url:'https://plus.google.com/share?url={{url}}'},
|
|
{/literal}{/if}
|
|
{if get_device() == 'mobile'}{literal}
|
|
{id:'whatsapp', label:'<i class="fa fa-whatsapp fa-2x"></i> Share via WhatsApp', url:'whatsapp://send?text={{url}}', download:true},
|
|
{/literal}{/if}
|
|
{literal}
|
|
{id:'pinterest', label:'<i class="fa fa-pinterest fa-2x"></i> Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media=' + window.location + '/../{{raw_image_url}}'},
|
|
{id:'download', label:'<i class="fa fa-cloud-download fa-2x"></i> Download image', url:'{{raw_image_url}}', download:true}
|
|
{/literal}
|
|
],
|
|
{/if}
|
|
};
|
|
var photoSwipe = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
|
|
var realViewportWidth,
|
|
useLargeImages = false,
|
|
firstResize = true,
|
|
imageSrcWillChange;
|
|
|
|
photoSwipe.listen('beforeResize', function() {
|
|
realViewportWidth = photoSwipe.viewportSize.x * window.devicePixelRatio;
|
|
if(useLargeImages && realViewportWidth < 1335) {
|
|
useLargeImages = false;
|
|
imageSrcWillChange = true;
|
|
} else if(!useLargeImages && realViewportWidth >= 1335) {
|
|
useLargeImages = true;
|
|
imageSrcWillChange = true;
|
|
}
|
|
|
|
if(imageSrcWillChange && !firstResize) {
|
|
photoSwipe.invalidateCurrItems();
|
|
}
|
|
|
|
if(firstResize) {
|
|
firstResize = false;
|
|
}
|
|
|
|
imageSrcWillChange = false;
|
|
});
|
|
|
|
photoSwipe.listen('gettingData', function(index, item) {
|
|
if(!item.is_video) {
|
|
if( useLargeImages ) {
|
|
item.src = item.xlargeImage.src;
|
|
item.w = item.xlargeImage.w;
|
|
item.h = item.xlargeImage.h;
|
|
item.title = item.xlargeImage.title;
|
|
} else {
|
|
item.src = item.largeImage.src;
|
|
item.w = item.largeImage.w;
|
|
item.h = item.largeImage.h;
|
|
item.title = item.largeImage.title;
|
|
}
|
|
}
|
|
});
|
|
|
|
var autoplayId = null;
|
|
$('.pswp__button--autoplay').on('click touchstart', function(event) {
|
|
event.preventDefault();
|
|
if (autoplayId) {
|
|
clearInterval(autoplayId);
|
|
autoplayId = null;
|
|
$('.pswp__button--autoplay').removeClass('stop');
|
|
} else {
|
|
autoplayId = setInterval(function() { photoSwipe.next(); $index = photoSwipe.getCurrentIndex(); }, {$theme_config_extra->photoswipe_interval});
|
|
$('.pswp__button--autoplay').addClass('stop');
|
|
}
|
|
});
|
|
|
|
photoSwipe.listen('destroy', function() {
|
|
if (autoplayId) {
|
|
clearInterval(autoplayId);
|
|
autoplayId = null;
|
|
$('.pswp__button--autoplay').removeClass('stop');
|
|
}
|
|
$('.pswp__button--autoplay').off('click touchstart');
|
|
$(selector).find('a.active').removeClass('active');
|
|
});
|
|
|
|
photoSwipe.init();
|
|
|
|
detectVideo(photoSwipe);
|
|
|
|
photoSwipe.listen('initialZoomInEnd', function() {
|
|
curr_idx = photoSwipe.getCurrentIndex();
|
|
if (curr_idx !== $index && autoplayId == null) {
|
|
photoSwipe.goTo($index);
|
|
}
|
|
$('.pswp__button--details').on('click touchstart', function() {
|
|
location.href = photoSwipe.currItem.href
|
|
});
|
|
});
|
|
|
|
photoSwipe.listen('afterChange', function() {
|
|
detectVideo(photoSwipe);
|
|
$('.pswp__button--details').off().on('click touchstart', function() {
|
|
location.href = photoSwipe.currItem.href
|
|
});
|
|
});
|
|
|
|
photoSwipe.listen('beforeChange', function() {
|
|
removeVideo();
|
|
});
|
|
|
|
photoSwipe.listen('resize', function() {
|
|
if ($('.pswp-video-modal').length > 0) {
|
|
var vsize = setVideoSize(photoSwipe.currItem, photoSwipe.viewportSize);
|
|
console.log('PhotoSwipe resize in action. Setting video size to ' + vsize.w + 'x' + vsize.h);
|
|
$('.pswp-video-modal').css({literal}{'width':vsize.w, 'height':vsize.h}{/literal});
|
|
updateVideoPosition(photoSwipe);
|
|
}
|
|
});
|
|
|
|
photoSwipe.listen('close', function() {
|
|
removeVideo();
|
|
});
|
|
});
|
|
|
|
function removeVideo() {
|
|
if ($('.pswp-video-modal').length > 0) {
|
|
if ($('#pswp-video').length > 0) {
|
|
$('#pswp-video')[0].pause();
|
|
$('#pswp-video')[0].src = "";
|
|
$('.pswp-video-modal').remove();
|
|
$('.pswp__img').css('visibility','visible');
|
|
$(document).off('webkitfullscreenchange mozfullscreenchange fullscreenchange');
|
|
if (navigator.userAgent.match(/(iPhone|iPad|Android)/)) {
|
|
$('.pswp-video-modal').css('background', '');
|
|
}
|
|
} else {
|
|
$('.pswp-video-modal').remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
function detectVideo(photoSwipe) {
|
|
var is_video = photoSwipe.currItem.is_video;
|
|
if (is_video) {
|
|
addVideo(photoSwipe.currItem, photoSwipe.viewportSize);
|
|
updateVideoPosition(photoSwipe);
|
|
}
|
|
}
|
|
|
|
function addVideo(item, vp) {
|
|
var vfile = item.videoProperties.src;
|
|
var vsize = setVideoSize(item, vp);
|
|
var v = $('<div />', {
|
|
class:'pswp-video-modal',
|
|
css : ({literal}{'position': 'absolute','width':vsize.w, 'height':vsize.h}{/literal})
|
|
|
|
});
|
|
v.one('{if get_device() == 'desktop'}click{else}tap{/if}', (function(event) {
|
|
event.preventDefault();
|
|
var playerCode = '<video id="pswp-video" width="100%" height="auto" autoplay controls>' +
|
|
'<source src="'+vfile+'" type="video/mp4"></source>' +
|
|
'</video>';
|
|
$(this).html(playerCode);
|
|
$('.pswp__img').css('visibility','hidden');
|
|
$('.pswp-video-modal video').css('visibility', 'visible');
|
|
if (navigator.userAgent.match(/(iPhone|iPad|Android)/)) {
|
|
$('.pswp-video-modal').css('background', 'none');
|
|
}
|
|
if ($('.pswp__button--autoplay.stop').length > 0) $('.pswp__button--autoplay.stop')[0].click();
|
|
}));
|
|
if (navigator.appVersion.indexOf("Windows") !== -1 && navigator.userAgent.match(/(Edge|rv:11)/)) {
|
|
v.insertAfter('.pswp__scroll-wrap');
|
|
} else {
|
|
v.appendTo('.pswp__scroll-wrap');
|
|
}
|
|
|
|
{* this is soooo nasty, but i have no better idea to fix the fullscreen video issue on OS X, Chrome/Windows *}
|
|
if ((navigator.appVersion.indexOf("Windows") !== -1 && navigator.userAgent.match(/(Chrome|Firefox)/)) || navigator.userAgent.match(/(X11|Macintosh)/)) {
|
|
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function(e) {
|
|
var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
|
|
event = state ? 'FullscreenOn' : 'FullscreenOff',
|
|
holder_height = item.h;
|
|
if (event === 'FullscreenOn') {
|
|
$('#the_page').hide();
|
|
$('body').css('height', window.screen.height);
|
|
$('.pswp-video-modal').css('height', window.screen.height);
|
|
} else {
|
|
$('#the_page').show();
|
|
$('body').css('height', '');
|
|
$('.pswp-video-modal').css('height', holder_height);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function updateVideoPosition(o, w, h) {
|
|
var item = o.currItem;
|
|
var vp = o.viewportSize;
|
|
var vsize = setVideoSize(item, vp);
|
|
var top = (vp.y - vsize.h)/2;
|
|
var left = (vp.x - vsize.w)/2;
|
|
$('.pswp-video-modal').css({literal}{position:'absolute',top:top, left:left}{/literal});
|
|
}
|
|
|
|
function setVideoSize(item, vp) {
|
|
var w = item.videoProperties.w,
|
|
h = item.videoProperties.h,
|
|
vw = vp.x,
|
|
vh = vp.y,
|
|
r;
|
|
if (vw < w) {
|
|
r = w/h;
|
|
vh = vw/r;
|
|
if (vp.y < h) {
|
|
vh = vp.y*0.85;
|
|
vw = vh*r;
|
|
}
|
|
w = vw;
|
|
h = vh;
|
|
} else if (vp.y < h) {
|
|
r = w/h;
|
|
vh = vp.y*0.85;
|
|
vw = vh*r;
|
|
w = vw;
|
|
h = vh;
|
|
}
|
|
|
|
return {
|
|
w: w,
|
|
h: h
|
|
};
|
|
}
|
|
};
|
|
|
|
$(document).ready(function() {
|
|
$('#startPhotoSwipe').on('click', function(event) {
|
|
event.preventDefault;
|
|
startPhotoSwipe();
|
|
});
|
|
{if get_device() != 'desktop'}
|
|
$('#theImage').on('doubletap', startPhotoSwipe);
|
|
{/if}
|
|
{if isset($U_SLIDESHOW_START)}
|
|
$('#startSlideshow').on('click touchstart', function() {
|
|
startPhotoSwipe(0);
|
|
$('.pswp__button--autoplay')[0].click();
|
|
});
|
|
{/if}
|
|
if (window.location.hash === "#start-slideshow") {
|
|
startPhotoSwipe();
|
|
$('.pswp__button--autoplay')[0].click();
|
|
}
|
|
});
|
|
{/strip}{/footer_script}
|