franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Sync feed scroll with lightbox

Browse Source
This commit is contained in:
Franzz
2022-09-13 09:37:21 +02:00
parent 4ed3fc4638
commit eaadd23c1a
2 changed files with 54 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
script/lightbox.js
View File

@@ -64,6 +64,7 @@
sanitizeTitle: false
//ADDED-START
, hasVideo: true
, onMediaChange: (oMedia) => {}
//ADDED-END
};
@@ -122,10 +123,10 @@
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />\
<div class="lb-nav">\
<div class="lb-prev-area">\
<a class="lb-prev" aria-label="Previous image" href="" ></a>\
<a class="lb-prev" aria-label="Previous image" href="" role="button"></a>\
</div>\
<div class="lb-next-area">\
<a class="lb-next" aria-label="Next image" href="" ></a>\
<a class="lb-next" aria-label="Next image" href="" role="button"></a>\
</div>\
</div>\
<div class="lb-loader">\
@@ -140,7 +141,7 @@
<span class="lb-number"></span>\
</div>\
<div class="lb-closeContainer">\
<a class="lb-close"></a>\
<a class="lb-close" role="button"></a>\
</div>\
</div>\
</div>\
@@ -325,25 +326,9 @@
}
//ADDED-END
this.album = [];
//this.album = [];
var imageNumber = 0;
function addToAlbum($link) {
self.album.push({
alt: $link.attr('data-alt'),
link: $link.attr('href'),
title: $link.attr('data-title') || $link.attr('title')
//ADDED-START
, orientation: $link.attr('data-orientation')
, type: $link.attr('data-type')
, id: $link.attr('data-id')
, $Media: $link.attr('data-type')=='video'?self.$video:self.$image
, width: $link.find('img').attr('width')
, height: $link.find('img').attr('height')
//ADDED-END
});
}
// Support both data-lightbox attribute and rel attribute implementations
var dataLightboxValue = $link.attr('data-lightbox');
var $links;
@@ -351,7 +336,7 @@
if (dataLightboxValue) {
$links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]');
for (var i = 0; i < $links.length; i = ++i) {
addToAlbum($($links[i]));
this.addToAlbum($($links[i]));
if ($links[i] === $link[0]) {
imageNumber = i;
}
@@ -359,12 +344,12 @@
} else {
if ($link.attr('rel') === 'lightbox') {
// If image is not part of a set
addToAlbum($link);
this.addToAlbum($link);
} else {
// If image is part of a set
$links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]');
for (var j = 0; j < $links.length; j = ++j) {
addToAlbum($($links[j]));
this.addToAlbum($($links[j]));
if ($links[j] === $link[0]) {
imageNumber = j;
}
@@ -390,6 +375,23 @@
this.changeImage(imageNumber);
};
Lightbox.prototype.addToAlbum = function($link) {
if(!this.album) this.album = [];
this.album.push({
alt: $link.attr('data-alt'),
link: $link.attr('href'),
title: $link.attr('data-title') || $link.attr('title')
//ADDED-START
, orientation: $link.attr('data-orientation')
, type: $link.attr('data-type')
, id: $link.attr('data-id')
, $Media: $link.attr('data-type')=='video'?this.$video:this.$image
, width: $link.find('img').attr('width')
, height: $link.find('img').attr('height')
//ADDED-END
});
}
//ADDED-START
Lightbox.prototype.getMaxSizes = function(iMediaWidth, iMediaHeight, sMediaType) {
var iWindowWidth = $(window).width();
@@ -487,7 +489,7 @@
this.$outerContainer.addClass('animating');
this.$container.removeClass('moveable moving');
oSpot.updateHash('media', self.album[imageNumber].id);
this.options.onMediaChange(self.album[imageNumber]);
var $hasVideoNav = this.$container.hasClass('lb-video-nav');
switch(self.album[imageNumber].type) {