Custom HTML Gallery - Help needed

[rreyer]

I'm trying to build my own HTML gallery and so far it works better than I thought.
But there are some problems that I need help with.

I'd like my gallery to be super-simple:

• An overview with small swatches loads quickly
• When I click on a swatch I see a larger version (still just a small JPG, not the full RAW)

*image 1*

From iMatch I would create the swatches (with Design&Print) and the JPGs (Export), both have the same names.
My Python script would then build an HTML for a complete year and include jump markers for events (categories which it finds in the JPGs).

*image 2*

So far it works great on my PC with Firefox when I open the HTMLs directly, via the file system 

But then I thought it would be great if I could browse my gallery on the sofa with my iPad.
Unfortunately, iOS 14 does not allow to open an HTML directly from the file system 

So I installed a small web server on my NAS.
Fortunately, this was done at the push of a button, because I have just as little knowledge of web servers as I do of HTML.
I can load the gallery now from my iPad 

But there are still two problems:

• the Jump Marks for the events work great when I browse the gallery from my PC (direct access via file system) but on the iPad I land ~1/2 page or more BEFORE the actual jump mark.
• When there are LOTS of images on one page (a whole year can be 8.000 images) then the gallery loads fine and super fast, but it gets unstable after some time, Safari (and every other browser) will hang and freeze and crash. I assume that the web server on the NAS has problems with that number of images. It is much more stable when there are less images.

Questions:

• Do you know what the problem with the jump marks could be?
• How can I segment a year with too many swatches/images, without loosing the advantage of having one large page for the whole year?

[Aubrey]

Hi,
First off, I can't help you with your issue, perhaps one of the forums dealing with these software might deliver more information. It's really a jpg issue rather than IMatch issue.

I'm slowly learning HTML JS and node.JS. It's fun but also a minefield! Eventually I may get to building my own gallery.

However, that having been said, if you really want to view files remotely and also have interactive filters, I suggest that you have a look at IMatch Anywhere (https://www.photools.com/imatch-anywhere/imatch-anywhere-licensing/). The Home edition costs $55 and probably will fulfill your needs.

As always, you can download and play with it for a month without any cost!

I've been using it since inception. There is no way I'll ever be able to have a html/js gallery as efficient as IMA.

BTW IMA and IMatch are set by default pause if you want to load a lot of images .... and 8,000 is a lot!

Aubrey.

[Mario]

8,000 images is ridiculous. It will stress the server and the browser to no end.
Usually you would implement this with a so-called observer pattern to lazy-load the images when they actually come into view. Loading images not visible is a waste of resources.
But this is of course a bit more complex than using plain <img> tags.

If you request the images from IMWS, make sure you request the thumbnail and not the full-sized image. If you request a 4000 pixel cache image just to make the browser scale it down to 160 pixel, you are again wasting a lot of bandwidth and cause stress for the server and browser. And Safaris is not known to to be one of the better browsers - just the only one Apple allows on their systems.

[rreyer]

Hi Aubrey,
I agree with you, 8.000 images is a lot.

While it works fluently on the PC, all browsers on the iPad show issues with that.

It works much better on the iPad after I've scaled the swatches down to 200x200.

I'm not sure but I believe that I am using "lazy loading" like Mario suggested.
Here is one line of code from the HTML:

Code Select Expand

<a class="spotlight" id="pic_2006.01.06-13.58.38.jpg" href="./2006/Images/pic_2006.01.06-13.58.38.jpg"> <img src="./2006/Swatches/pic_2006.01.06-13.58.38.jpg" width="200" height="200" alt="pic_2006.01.06-13.58.38.jpg" loading="lazy"> </a>

What still bothers me is the issue with the jump marks.
It works just fine on the PC with Firefox (via file system or web server).

But on the iPad there is trouble with most browsers:
Safari, Firefox, Edge, Chrome, iCab Mobile

Edge is pretty good and only one row of images off.
Unfortunately, Safari seems to be the only one that can scale not only the fonts but also the image swatches.

[Mario]

Safari has many issues with many of the more modern web technologies.
Check one of the web sites which have stats about whether or not specific Safari versions support specific versions, in which version and on which platform.

I hope one of the other community members can help you. Or you put your question up on StackExchange.
Please understand that I have no time to debug apps or scripts written by users.