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

Replaced window.devicePixelRatio with srcset

Browse Source
This commit is contained in:
Tobias Reich 2016-01-04 21:56:37 +01:00
parent 7f627a88c3
commit 23e78edc39
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/scripts/build.js
View File

@ -45,13 +45,13 @@ build.album = function(data) {
let html = '' let html = ''
let { path: thumbPath, hasRetina: thumbRetina } = lychee.retinize(data.thumbs[0]) let { path: retinaThumbUrl, isPhoto } = lychee.retinize(data.thumbs[0])
html += lychee.html` html += lychee.html`
<div class='album' data-id='$${ data.id }'> <div class='album' data-id='$${ data.id }'>
<img src='$${ data.thumbs[2] }' width='200' height='200' alt='thumb' data-overlay='false'> <img src='$${ data.thumbs[2] }' width='200' height='200' alt='thumb' data-overlay='false'>
<img src='$${ data.thumbs[1] }' width='200' height='200' alt='thumb' data-overlay='false'> <img src='$${ data.thumbs[1] }' width='200' height='200' alt='thumb' data-overlay='false'>
<img src='$${ thumbPath }' width='200' height='200' alt='thumb' data-overlay='$${ thumbRetina }'> <img src='$${ data.thumbs[0] }' srcset='$${ retinaThumbUrl } 1.5x' width='200' height='200' alt='thumb' data-overlay='$${ isPhoto }'>
<div class='overlay'> <div class='overlay'>
<h1 title='$${ data.title }'>$${ data.title }</h1> <h1 title='$${ data.title }'>$${ data.title }</h1>
<a>$${ data.sysdate }</a> <a>$${ data.sysdate }</a>
@ -82,11 +82,11 @@ build.photo = function(data) {
let html = '' let html = ''
let { path: thumbPath, hasRetina: thumbRetina } = lychee.retinize(data.thumbUrl) let { path: retinaThumbUrl } = lychee.retinize(data.thumbUrl)
html += lychee.html` html += lychee.html`
<div class='photo' data-album-id='$${ data.album }' data-id='$${ data.id }'> <div class='photo' data-album-id='$${ data.album }' data-id='$${ data.id }'>
<img src='$${ thumbPath }' width='200' height='200' alt='thumb'> <img src='$${ data.thumbUrl }' srcset='$${ retinaThumbUrl } 1.5x' width='200' height='200' alt='thumb'>
<div class='overlay'> <div class='overlay'>
<h1 title='$${ data.title }'>$${ data.title }</h1> <h1 title='$${ data.title }'>$${ data.title }</h1>
` `

9
src/scripts/lychee.js
View File

@ -310,11 +310,10 @@ lychee.animate = function(obj, animation) {
lychee.retinize = function(path = '') { lychee.retinize = function(path = '') {
let pixelRatio = window.devicePixelRatio, let extention = path.split('.').pop(),
extention = path.split('.').pop(), isPhoto = extention!=='svg'
hasRetina = extention!=='svg'
if ((pixelRatio!=null && pixelRatio>1) && hasRetina===true) { if (isPhoto===true) {
path = path.replace(/\.[^/.]+$/, '') path = path.replace(/\.[^/.]+$/, '')
path = path + '@2x' + '.' + extention path = path + '@2x' + '.' + extention
@ -323,7 +322,7 @@ lychee.retinize = function(path = '') {
return { return {
path, path,
hasRetina isPhoto
} }
} }