diff --git a/src/scripts/build.js b/src/scripts/build.js
index 2da005a..3ebccf6 100644
--- a/src/scripts/build.js
+++ b/src/scripts/build.js
@@ -113,24 +113,18 @@ build.photo = function(data) {
}
-build.imageview = function(data, size, visibleControls) {
+build.imageview = function(data, visibleControls) {
- let html = ''
-
- if (size==='big') {
+ let html = '',
+ hasMedium = data.medium!==''
- if (visibleControls===true) html += lychee.html`
`
- else html += lychee.html``
+ if (hasMedium===false) {
- } else if (size==='medium') {
+ html += lychee.html``
- if (visibleControls===true) html += lychee.html``
- else html += lychee.html``
-
- } else if (size==='small') {
+ } else {
- if (visibleControls===true) html += lychee.html``
- else html += lychee.html``
+ html += lychee.html``
}
diff --git a/src/scripts/header.js b/src/scripts/header.js
index ef77d2e..bced47a 100644
--- a/src/scripts/header.js
+++ b/src/scripts/header.js
@@ -67,17 +67,11 @@ header.bind = function() {
header.show = function() {
- let newMargin = (-1 * ($('#imageview #image').height()/2) + 20)
-
clearTimeout($(window).data('timeout'))
lychee.imageview.removeClass('full')
header.dom().removeClass('header--hidden')
- // Adjust position or size of photo
- if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin)
- else $('#imageview #image').removeClass('full')
-
return true
}
@@ -90,15 +84,9 @@ header.hide = function(e, delay = 500) {
$(window).data('timeout', setTimeout(function() {
- let newMargin = (-1 * ($('#imageview #image').height()/2))
-
lychee.imageview.addClass('full')
header.dom().addClass('header--hidden')
- // Adjust position or size of photo
- if ($('#imageview #image.small').length>0) $('#imageview #image').css('margin-top', newMargin)
- else $('#imageview #image').addClass('full')
-
}, delay))
return true
diff --git a/src/scripts/photo.js b/src/scripts/photo.js
index 7bb4985..76ad97f 100644
--- a/src/scripts/photo.js
+++ b/src/scripts/photo.js
@@ -625,42 +625,6 @@ photo.share = function(photoID, service) {
}
-photo.getSize = function() {
-
- // Size can be 'big', 'medium' or 'small'
- // Default is big
- // Small is centered in the middle of the screen
- let size = 'big',
- scaled = false,
- hasMedium = photo.json.medium!=='',
- pixelRatio = window.devicePixelRatio,
- view = {
- width : $(window).width() - 60,
- height : $(window).height() - 100
- }
-
- // Detect if the photo will be shown scaled,
- // because the screen size is smaller than the photo
- if (photo.json.width>view.width || photo.json.height>view.height) scaled = true
-
- // Calculate pixel ratio of screen
- if (pixelRatio!=null && pixelRatio>1) {
- view.width = view.width * pixelRatio
- view.height = view.height * pixelRatio
- }
-
- // Medium available and
- // Medium still bigger than screen
- if (hasMedium===true && (1920>view.width && 1080>view.height)) size = 'medium'
-
- // Photo not scaled
- // Photo smaller then screen
- if (scaled===false && (photo.json.widthview.width || photo.height>view.height) scaled = true
-
- // Calculate pixel ratio of screen
- if (pixelRatio!=null && pixelRatio>1) {
- view.width = view.width * pixelRatio
- view.height = view.height * pixelRatio
- }
-
- // Medium available and
- // Medium still bigger than screen
- if (hasMedium===true && (1920>view.width && 1080>view.height)) size = 'medium'
-
- // Photo not scaled
- // Photo smaller then screen
- if (scaled===false && (photo.width div {
+ width: 0;
+ height: 0;
+ }
+
+ #image img {
+ max-width: calc(100vw - 60px);
+ max-height: calc(100vh - 90px);
+ width: auto;
+ height: auto;
+ transform: translate(-50%, -50%);
+ transition: max-width .3s, max-height .3s;
+ }
+
+ &.full #image img {
+ max-width: 100vw;
+ max-height: 100vh;
}
// Previous/Next Buttons -------------------------------------------------------------- //