Picture behaviour

I place lots of small pictures onto a page, activate “Zoom picture in lightbox” / unlimited (because, when somebody has a huge or high resolution screen …) - in the image settings I chose 1x and 2x.
When I preview the page, the pictures behave like I want them to: click on a small pict. it enlarges, click on the enlarged one it goes back to small.
But after I published the site, the picture enlarges, and clicking on it it gets (slightly) bigger, but to go to the small version I have to click the “back” button, which is annoying.
What did I do wrong? What can I do, to make it work the “preview” way?
PS: I disabled the action overlay, because all of the possibilities are too big IMHO. It would be nice, if those overlays could be size adjustable.

1 Like

@chrisMF, You can read further here about lightbox - https://sparkleapp.com/docs/how-to-zoom-an-image-in-a-lightbox.html

If I hazard a guess (without actually seeing it) I’m thinking that your lightbox images are larger then the browser window it is opening into and that is why when you click (most of the time you would have a view-glass icon with a “+” in it) on them they further enlarge to their original size. To go back to your thumbnails just click on the image (if there is no “+” icon), outside the lightbox image, or the x at the top left-hand corner.

If none of that is working please go over the documentation and re-publish your page and hopefully it all comes together, but if not have a talk with @duncan

Thanks greenskin for your reply. I tried in several browsers. Only Safari behaves like I want it to behave, all others (Firefox, Vivaldi, Cliqz, Brave and Chromium) have the + icon and I can only go back to the original with the “back” arrow of the browser.
Yes, a few smaller pictures work the way everything works in preview (Firefox was used to preview!). I still don’t understand, why in Preview everything looks ok and when published (not yet online, just in a folder) doesn’t work that way.
Anyways: I have now about 300 pictures I scanned from photos in the same/similar size. Would it help if I changed the “unlimited” to “up to 1000 px”? And do I have to change that for each and every picture separately or is there a batch command (which I couldn’t find)?
If I decide to batch change the size of all my pictures (make them smaller) do I have to reconnect each picture individually again, or does it help if the smaller versions are in the original place with the same name?
Lots of questions and lot of work to be redone …

@chrisMF, So if I read correctly you are viewing your site (exported instead of published to a server) via a browser on your iMac from a folder? I wonder if that is your issue? Safari being native to macOS would be far better integrated then the third-party browsers.

Are you able to publish your website to a hosting server to see if you have the same issues? From this end I’m guessing a bit because I have nothing to reference.

That’s unexpected. Link to the site?

Thanks Greenskin and Duncan. I think I found the solution: When I choose “offline compatible” in publish to disk and resave the whole site, the pictures behave “normally”. I had it on the default “High Performance” setting first.
And now I try to upload to my server which will take some time (there are videos involved) and report back. But it’s a private site with password ( nothing illegal or “dirty”, just private) so I will not be able to share, sorry.

I’m back with good news: I uploaded the whole site with “High Performance” setting and everything behaves as it should. So, thanks again, and sorry for the fuss …

1 Like

Ok that explains it then.

When you export to disk Sparkle produces “web ready” files, meaning they are intended to be viewed from a web server. The pages are faster when viewed via a web server, because Sparkle implements the performance improvements that make the site quicker to load (namely deferring loading CSS and Javascript), as suggested by all page speed tests, a metric also used by Google to rank sites.

The problem with the speed-up techniques is they don’t work when loading the page from the finder directly, and there’s no way to make them compatible.

There are two possible solutions:

1- view the site via a web server, so publishing it to a hidden/temporary location on your web server
2- export to disk by setting the “offline compatible” option during export setup, this produces a different slower site that works when loaded from the finder

You managed to get to the solution. The documentation does mention this:

By ‍default ‍Sparkle ‍produces ‍high ‍performance ‍HTML ‍that ‍works ‍when ‍uploaded ‍to ‍a ‍web ‍server. ‍If ‍you ‍intend ‍to ‍load ‍the ‍HTML ‍files ‍directly ‍in ‍the ‍browser ‍from ‍the ‍local ‍disk ‍you ‍will ‍need ‍to ‍set ‍the ‍code ‍generation ‍option ‍to ‍“Offline ‍compatible”.

but maybe we need stronger wording there. I wouldn’t know how to improve Sparkle to make it more clear. Previewing files in the browser is an old timer’s habit that is no longer relevant.

1 Like

OK (and thanks), Duncan, it’s probably NOT the problem of the documentation, but because most things are so easy to do and understand with Sparkle, so one is tempted not to read the documentation in detail. And because before, in a smaller project, it worked perfectly (with smaller pictures) I was surprised and taken off guard when this time it didn’t.
And by the way: I AM an old timer! And coming from lay-out I am used to check and double-check all the details before publishing. And further more, because of a (for most people) unbelievably slow internet connection, it’s not easy to make quick adjustments.

Understood. The Sparkle built in preview should help with that, or a one-off publish to a hidden/test URL.

The latter was actually the original reason for supporting multiple publish locations per project, say “staging” and “live site”.

I agree with the topic starter that the images of the overlay are too large. I turn them off as well, for that reason.

Also, it would be nice if, when you change the background colour or opacity, this will be the default with your next image. Once you choose a style, you keep it in the whole document, I would say.

I am also curious if it is possible to choose all the pics to change them in a bigger size while clicking on it. I’m very happy with Sparkle. http://www.devrind.eu/waterbieskreek/activiteiten.html