Hopefully, this belongs in Tips.
And hopefully, it will work for folks other than me.
I too would like some sort of slideshow option for use in PhotoStructure.
I implemented /part/ of a solution.
Let us suppose we are looking at the “front door” of PhotoStructure … lots of photos chosen for us. Cool.
Or suppose we are looking at a folder, or a query result …
In any of these … there’s a bunch of photos on the page, with enough information in the DOM (document object model) to figure out the URLs for the pictures.
I wrote a javascript snippet that:
searches the appropriate parts of the DOM, then searches for the pictures in those parts
it adjusts the URLs for the pictures (to get to the picture w/o the wrappings PS’s webpage has)
it collects the URLs into an array
the scrippt then creates (in the current page) an HTML DIV that covers the entire page, and puts an IMG (picture) in that DIV.
The code then walks through the array of pictures, assigning the SRC of the IMG to each picture in turn, waits a bit, then goes to the next picture.
Ok … that’s a script for a slideshow … but how to make it useful? How do we get it to run when we want (for a page)
Ideally, our dear author would eventually do a better job and perhaps add a button for slideshow on any grid screen. (I hope that doesn’t come off as criticism. I mean it as “hint … hint”. Please feel free to use or be inspired by the code below…)
For now … I took the script and added “javascript:” etc to the beginning of it to turn it into a sort-of URL … and made it a bookmark. (I had heard of such a thing, but had not used it before now.)
So now … I can go to PS, or search in PS, get a screenful of pictures … and then, from that page of pictures, choose my bookmark. The code in the bookmark messes with the DOM, and starts showing pictures.
I made the code check if the special DIV already existed … if it does, the code gets rid of the DIV and exits. Ie … call the script once … it starts a slide show. Call it again … it stops the slideshow. (or one could refresh the page to stop the slideshow by reloading the page)
The slideshow has no other features. And makes assumtions that might not be correct.
Folks better at javascript might have some fun embellishing it. Lots of things could be done. And I might do some. But I thought I would go ahead and share the code now.
I ran the code through a javascript minifier before using it in a bookmark.
Here’s the minimized version, copied from my Chrome bookmarks … a few very long lines.
javascript:(function(){function collectlinks(stuff){var zPic;for(let j=0;j<stuff.length;j++){const element2=stuff[j];elements3=element2.getElementsByTagName(‘a’);for(let k=0;k<elements3.length;k++){const element3=elements3[k];zPic=element3.href;zPic=zPic.replace(“asset”,“img”);zPic=zPic.replace(/?v=(.*)/,%22/fit/1080%22);links[linkidx]=zPic;linkidx++;}}};console.log(%22start%22);var%20coverdiv=document.getElementById(%22coverdiv%22);if(coverdiv){coverdiv.remove();return;}%20var%20elements;var%20elements2;var%20elements3;var%20zPic;var%20zStart;let%20links=;var%20linkidx=0;elements2=document.getElementsByClassName(%27gallery%20leaf%20m%27);if(elements2.length==0){elements2=document.getElementsByClassName(%27gallery%20leaf%20s%27);}%20if(elements2.length==0){elements2=document.getElementsByClassName(%27gallery%20leaf%20l%27);}%20if(elements2.length==0){elements=document.getElementsByClassName(%27child-tag%27);for(let%20i=0;i%3Celements.length;i++){const%20element=elements[i];elements2b=element.getElementsByClassName(%27gallery%20sample%20m%27);if(elements2b.length==0){elements2b=element.getElementsByClassName(%27gallery%20sample%20s%27);}%20if(elements2b.length==0){elements2b=element.getElementsByClassName(%27gallery%20sample%20l%27);}%20collectlinks(elements2b);}}else{collectlinks(elements2);}%20const%20fullScreenDiv=document.createElement(%27div%27);fullScreenDiv.id=%22coverdiv%22;fullScreenDiv.style.position=%27fixed%27;fullScreenDiv.style.top=%270%27;fullScreenDiv.style.left=%270%27;fullScreenDiv.style.width=%27100%%27;fullScreenDiv.style.height=%27100%%27;fullScreenDiv.style.backgroundColor=%27rgba(0,%200,%200,%201)%27;fullScreenDiv.style.zIndex=%279999%27;fullScreenDiv.textContent=%27This%20div%20covers%20the%20entire%20body!%27;let%20newObj=document.createElement(%22IMG%22);newObj.setAttribute(%22id%22,%22slideimg%22);newObj.setAttribute(%22src%22,links[0]);newObj.style.width=%27100%%27;newObj.style.height=%27100%%27;newObj.style.objectFit=%27contain%27;fullScreenDiv.appendChild(newObj);document.body.appendChild(fullScreenDiv);var%20slide=document.getElementById(%22slideimg%22);var%20i=0;var%20loop=function(){slide.src=links[i];i++;if(i%3E=links.length)i=0;setTimeout(loop,3000);};loop();})()
/**** end of minimized code **** */
/* *** And here’s the non-mimized version, although gmail appears to have stripped out the indenting tabs I had **** */
javascript: (function () {
function collectlinks( stuff ) {
var zPic;
for (let j = 0; j < stuff.length; j++) {
const element2 = stuff[j];
elements3 = element2.getElementsByTagName(‘a’);
for (let k = 0; k < elements3.length; k++) {
const element3 = elements3[k];
zPic = element3.href;
// console.log(zPic);
zPic = zPic.replace(“asset”,“img”);
// console.log(zPic); // ok
zPic = zPic.replace(/?v=(.*)/,“/fit/1080”);
//console.log(zPic);
links[linkidx] = zPic;
linkidx++;
}
}
};
console.log(“start”);
var coverdiv = document.getElementById(“coverdiv”);
if (coverdiv) {
// Remove the element from the DOM
coverdiv.remove();
return;
}
var elements;
var elements2;
var elements3;
var zPic;
var zStart;
let links = ;
var linkidx = 0;
elements2 = document.getElementsByClassName(‘gallery leaf m’);
if (elements2.length == 0) {
elements2 = document.getElementsByClassName(‘gallery leaf s’);
}
if (elements2.length == 0) {
elements2 = document.getElementsByClassName(‘gallery leaf l’);
}
if (elements2.length == 0) {
elements = document.getElementsByClassName(‘child-tag’);
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
elements2b = element.getElementsByClassName(‘gallery sample m’);
if ( elements2b.length == 0 ) {
elements2b = element.getElementsByClassName(‘gallery sample s’);
}
if ( elements2b.length == 0 ) {
elements2b = element.getElementsByClassName(‘gallery sample l’);
}
collectlinks(elements2b);
}
} else {
collectlinks(elements2);
}
const fullScreenDiv = document.createElement(‘div’);
fullScreenDiv.id = “coverdiv”;
fullScreenDiv.style.position = ‘fixed’;
fullScreenDiv.style.top = ‘0’;
fullScreenDiv.style.left = ‘0’;
fullScreenDiv.style.width = ‘100%’;
fullScreenDiv.style.height = ‘100%’;
fullScreenDiv.style.backgroundColor = ‘rgba(0, 0, 0, 1)’;
fullScreenDiv.style.zIndex = ‘9999’; /* Ensure it’s on top of other content /
fullScreenDiv.textContent = ‘This div covers the entire body!’; / Optional: add some content */
let newObj = document.createElement(“IMG”);
newObj.setAttribute(“id”, “slideimg”);
newObj.setAttribute(“src”, links[0]);
newObj.style.width = ‘100%’;
newObj.style.height = ‘100%’;
newObj.style.objectFit = ‘contain’; /* or ‘cover’, ‘fill’, ‘none’, ‘scale-down’ */
fullScreenDiv.appendChild(newObj);
document.body.appendChild(fullScreenDiv);
var slide = document.getElementById(“slideimg”);
var i = 0;
var loop = function() {
slide.src = links[i];
i++;
if (i >= links.length) i = 0;
setTimeout(loop, 2000);
};
loop();
})()
/* end of non-minimized code */
I’ve gotten it to work on Chrome on a Windows machine and on a Mac.
And on Safari on a Mac
And on Safari on an iPad (after some wrangling of settings.)
I hope someone can take this and make something better.
Or at least that some folks can have fun with it.
DarkLensman
(a fan of EE “Doc” Smith’s Lensman books)