- Let the browser decide which photo to load - Removed photo.getSize - Automacialy center photos, without adding extra css from small images
This commit is contained in:
Tobias Reich
parent
e6059dbd32
commit
51d237dcd2
@ -113,24 +113,18 @@ build.photo = function(data) {
|
||||
|
||||
}
|
||||
|
||||
build.imageview = function(data, size, visibleControls) {
|
||||
build.imageview = function(data, visibleControls) {
|
||||
|
||||
let html = ''
|
||||
let html = '',
|
||||
hasMedium = data.medium!==''
|
||||
|
||||
if (size==='big') {
|
||||
if (hasMedium===false) {
|
||||
|
||||
if (visibleControls===true) html += lychee.html`<div id='image' style='background-image: url($${ data.url })'></div>`
|
||||
else html += lychee.html`<div id='image' style='background-image: url($${ data.url });' class='full'></div>`
|
||||
html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }'></div></div>`
|
||||
|
||||
} else if (size==='medium') {
|
||||
} else {
|
||||
|
||||
if (visibleControls===true) html += lychee.html`<div id='image' style='background-image: url($${ data.medium })'></div>`
|
||||
else html += lychee.html`<div id='image' style='background-image: url($${ data.medium });' class='full'></div>`
|
||||
|
||||
} else if (size==='small') {
|
||||
|
||||
if (visibleControls===true) html += lychee.html`<div id='image' class='small' style='background-image: url($${ data.url }); width: $${ data.width }px; height: $${ data.height }px; margin-top: -$${ parseInt(data.height/2-20) }px; margin-left: -$${ data.width/2 }px;'></div>`
|
||||
else html += lychee.html`<div id='image' class='small' style='background-image: url($${ data.url }); width: $${ data.width }px; height: $${ data.height }px; margin-top: -$${ parseInt(data.height/2) }px; margin-left: -$${ data.width/2 }px;'></div>`
|
||||
html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }' srcset='$${ data.medium } 1920w, $${ data.url } $${ data.width }w'></div></div>`
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.width<view.width&& photo.json.width<view.height)) size = 'small'
|
||||
|
||||
return size
|
||||
|
||||
}
|
||||
|
||||
photo.getArchive = function(photoID) {
|
||||
|
||||
let link,
|
||||
|
||||
@ -97,42 +97,6 @@ $(document).ready(function() {
|
||||
|
||||
})
|
||||
|
||||
const getPhotoSize = function(photo) {
|
||||
|
||||
// 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.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.width>view.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<view.width&& photo.width<view.height)) size = 'small'
|
||||
|
||||
return size
|
||||
|
||||
}
|
||||
|
||||
const loadPhotoInfo = function(photoID) {
|
||||
|
||||
let params = {
|
||||
@ -157,10 +121,8 @@ const loadPhotoInfo = function(photoID) {
|
||||
document.title = 'Lychee - ' + data.title
|
||||
header.dom('.header__title').html(lychee.escapeHTML(data.title))
|
||||
|
||||
let size = getPhotoSize(data)
|
||||
|
||||
// Render HTML
|
||||
imageview.html(build.imageview(data, size, true))
|
||||
imageview.html(build.imageview(data, true))
|
||||
imageview.find('.arrow_wrapper').remove()
|
||||
imageview.addClass('fadeIn').show()
|
||||
|
||||
|
||||
@ -17,34 +17,43 @@
|
||||
// ImageView -------------------------------------------------------------- //
|
||||
#image {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 30px;
|
||||
bottom: 30px;
|
||||
left: 30px;
|
||||
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transition: top .3s;
|
||||
will-change: transform;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
animation-name: zoomIn;
|
||||
animation-duration: .3s;
|
||||
animation-timing-function: $timingBounce;
|
||||
}
|
||||
|
||||
&.small {
|
||||
top: 50%;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: 50%;
|
||||
}
|
||||
&.full #image {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.full {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
#image > 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 -------------------------------------------------------------- //
|
||||
|
||||
Loading…
Reference in New Issue
Block a user