arno
/
lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use <img> for the main photo #361 #185

Browse Source 
- Let the browser decide which photo to load
- Removed photo.getSize
- Automacialy center photos, without adding extra css from small images
pull/444/head
Tobias Reich 9 years ago
parent e6059dbd32
commit 51d237dcd2
5 changed files with 37 additions and 120 deletions
Show Stats Download Patch File Download Diff File

20
src/scripts/build.js
Unescape View File

@ -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`<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>`
if (hasMedium===false) {
} else if (size==='medium') {
html += lychee.html`<div id='image' class='$${ visibleControls===true ? '' : 'full' }'><div><img src='$${ data.url }'></div></div>`
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') {
} else {
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>`
}

12
src/scripts/header.js
Unescape View File

@ -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

36
src/scripts/photo.js
Unescape View File

@ -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,

40
src/scripts/view/main.js
Unescape View File

@ -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()

49
src/styles/_imageview.scss
Unescape View File

@ -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 -------------------------------------------------------------- //

Write Preview
Loading…
Cancel
Save