Load HD Original Image
This commit is contained in:
parent
d7e581bbed
commit
1aa2b7f9ab
@ -49,10 +49,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//var allImagesCache = [];
|
||||||
var currimg=0;
|
var currimg=0;
|
||||||
var allimages = document.querySelectorAll('img');
|
var allimages = document.querySelectorAll('img.tile--img__img');
|
||||||
var timer;
|
var timer;
|
||||||
var imageTime = 3000;
|
var imageTime = 5000;
|
||||||
var running = false;
|
var running = false;
|
||||||
var paused = false;
|
var paused = false;
|
||||||
var imgcount=allimages.length;
|
var imgcount=allimages.length;
|
||||||
@ -60,7 +61,7 @@
|
|||||||
var lbimg = document.createElement('img');
|
var lbimg = document.createElement('img');
|
||||||
var imgCounter = document.createElement('span');
|
var imgCounter = document.createElement('span');
|
||||||
var lastScroll = 0;
|
var lastScroll = 0;
|
||||||
|
var cacheimg = document.createElement('img');
|
||||||
|
|
||||||
var tab = document.querySelector('.js-zci-link--images');
|
var tab = document.querySelector('.js-zci-link--images');
|
||||||
if(tab == null) { return; } // Need that tab
|
if(tab == null) { return; } // Need that tab
|
||||||
@ -68,16 +69,29 @@
|
|||||||
tab.addEventListener('click', addSlideshowButton);
|
tab.addEventListener('click', addSlideshowButton);
|
||||||
|
|
||||||
function updateImages() {
|
function updateImages() {
|
||||||
var testimages = document.querySelectorAll('img');
|
var testimages = document.querySelectorAll('img.tile--img__img');
|
||||||
var testcount = testimages.length;
|
var testcount = testimages.length;
|
||||||
if(testcount > imgcount) {
|
if(testcount > imgcount) {
|
||||||
console.log("Loading more images...");
|
console.log("Loading more images...");
|
||||||
imgcount = testcount;
|
|
||||||
allimages = testimages;
|
allimages = testimages;
|
||||||
|
imgcount = testcount;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
function loadDetailPaneImage(i) {
|
||||||
|
var detailPanes = document.querySelectorAll('.detail__pane');
|
||||||
|
console.log(detailPanes);
|
||||||
|
var detailPane = detailPanes[1];
|
||||||
|
if(detailPanes.length == 2) detailPane = detailPanes[0];
|
||||||
|
console.log(detailPane);
|
||||||
|
allimages[i] = detailPane.querySelector('img.detail__media__img-highres');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getImageHDSource(idx) {
|
||||||
|
return allimages[idx].attributes.getNamedItem('data-src').nodeValue.split("&")[0];
|
||||||
|
}
|
||||||
|
function cacheImage(idx) {
|
||||||
|
cacheimg.src = getImageHDSource(idx);
|
||||||
|
}
|
||||||
function showImage(idx){
|
function showImage(idx){
|
||||||
if(paused){
|
if(paused){
|
||||||
setTimeout(()=>showImage(idx),500);
|
setTimeout(()=>showImage(idx),500);
|
||||||
@ -91,7 +105,7 @@
|
|||||||
}
|
}
|
||||||
allimages[idx].click();
|
allimages[idx].click();
|
||||||
allimages[idx].scrollIntoView();
|
allimages[idx].scrollIntoView();
|
||||||
console.log("Showing Image "+idx+" ("+allimages[idx]+")");
|
lbimg.src = allimages[idx].src;
|
||||||
var useHeight=allimages[idx].height > allimages[idx].width;
|
var useHeight=allimages[idx].height > allimages[idx].width;
|
||||||
if(useHeight){
|
if(useHeight){
|
||||||
lbimg.style.height = '100%';
|
lbimg.style.height = '100%';
|
||||||
@ -100,11 +114,22 @@
|
|||||||
lbimg.style.height = '';
|
lbimg.style.height = '';
|
||||||
lbimg.style.width = '100%'
|
lbimg.style.width = '100%'
|
||||||
}
|
}
|
||||||
lbimg.src = allimages[idx].attributes.getNamedItem('data-src').nodeValue;
|
|
||||||
imgCounter.innerText = "Image " + idx + " / " + imgcount;
|
imgCounter.innerText = "Image " + idx + " / " + imgcount;
|
||||||
timer = setTimeout(() => showImage(++idx), imageTime);
|
// Load HD Version
|
||||||
|
setTimeout(()=>loadOrigImg(idx), 100);
|
||||||
|
}
|
||||||
|
function loadOrigImg(idx) {
|
||||||
|
var detailPanes = document.querySelectorAll('.detail__pane');
|
||||||
|
var detailPane = detailPanes[1];
|
||||||
|
if(detailPanes.length == 2) detailPane = detailPanes[0];
|
||||||
|
var imgsrc = detailPane.querySelector('img.detail__media__img-highres').src;
|
||||||
|
var newImg = new Image;
|
||||||
|
newImg.onload = function() {
|
||||||
|
lbimg.src = this.src;
|
||||||
|
timer = setTimeout(() => showImage(++idx), imageTime);
|
||||||
|
}
|
||||||
|
newImg.src = imgsrc
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function promptTime() {
|
function promptTime() {
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
@ -113,7 +138,6 @@
|
|||||||
showImage(currimg);
|
showImage(currimg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function goto(){
|
function goto(){
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
var resp = parseInt(prompt("GOTO:", currimg));
|
var resp = parseInt(prompt("GOTO:", currimg));
|
||||||
@ -124,7 +148,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function doGoto(num) {
|
function doGoto(num) {
|
||||||
updateImages();
|
updateImages();
|
||||||
if(num > imgcount) {
|
if(num > imgcount) {
|
||||||
@ -142,7 +165,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function pause(){
|
function pause(){
|
||||||
if(paused){
|
if(paused){
|
||||||
console.log("Resuming Slideshow");
|
console.log("Resuming Slideshow");
|
||||||
@ -154,7 +176,6 @@
|
|||||||
paused = !paused;
|
paused = !paused;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function rewind() {
|
function rewind() {
|
||||||
console.log("Rewinding Slideshow");
|
console.log("Rewinding Slideshow");
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
@ -162,7 +183,6 @@
|
|||||||
showImage(currimg);
|
showImage(currimg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function fastforward() {
|
function fastforward() {
|
||||||
console.log("Fast Forwarding Slideshow");
|
console.log("Fast Forwarding Slideshow");
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
|
Loading…
Reference in New Issue
Block a user