Revisting layer-based image gallery slideshows

[siran]

Forgot to change the links at the images. Nothing else changed.

[gcellison]

Thanks for the analysis and comments, siran! I’m already starting to look them over to understand your points.

Your example also has a problem that the container potentially is larger than the image which leads to clicks on some parts of the background don't close the image but advance to the next.

This was something that came about during development (which I mentioned in the instructions), and that I definitely recognized would have to be addressed. At first, I didn’t have the container at all. But when the image dropped below the full size, the shadow would extend to that full size (looking like it was hanging "in the air", rather than clinging to the reduced (max-) size image. The container was a way to force the shadow to stay with the image. The result, as you point out, is that the clickable area takes the shape of the container, rather than the image.

But when that came about, I was using my own images (rather than the Pixabay ones on the forum version), and some were smaller than the full size in the code. I think that it might be addressed simply by resizing them in the “junk” page, and eliminating the width and height properties altogether from the CSS, along with the container. The images would then appear at their full size unless they were bigger than the max- dimensions, in which case they would shrink, as would the clickable area and the shadow.

I do notice that you eliminated the “junk” page altogether. I look forward to seeing how you managed to generate the images.

Thanks again!

[Acorn]

A late contribution.

Both of your solutions are praiseworthy.
I like the concept of CSS-only but I have to yield that to add further capability, JavaScript will have a say.
I also like the way that any other Xara effects can be included.

I decide to trawl around for a Lightbox approach and came across https://nanogallery2.nanostudio.org.
I was attracted to this one for the richness of the thumbnail presentation, particularly the Mosaic construction.

To equate to your solutions, I built a gallery with the same images and used https://nanogallery2.nanostudio.org/builder.html.
How I did this is in:

jQuery - Lightbox Gallery.xar

@Greg, I assume siran used some CSS/JS to hide the images.
I have used a Xara-approach.
A layer with a bang (!) prefix is always published visible or hidden.
A shape with a Trigger object that does not exist is always hidden when published.
hide the !layer and you publish behind the scenes.

Enjoy!

Acorn

[gcellison]

A late contribution.

Thanks, Acorn. Not at all late. I'm really enjoying the follow up. I will check out the nanostudio builder and your file.

@Greg, I assume siran used some CSS/JS to hide the images.

In fact, siran's work isn't too heavy on JS, and (if I understand it), he doesn't have to hide elements. He retains the layers and assigns the images a class to size them. Not as overwhelming as it might have been.

Looking forward to looking at your approach,
Again, thanks!

[gcellison]

Hi again, @siran,

I’ve been looking over your revisions. Very interesting. You managed to streamline some things that make it more efficient. You have more extensive knowledge of CSS than I. You also have the great advantage of having significant skill in JavaScript, which opens up a lot more possibilities. I spent about a month taking some tutorials on-line, but (perhaps due to age), I have trouble thinking in the way that’s needed to write anything sophisticated or elaborate.

A few questions:
1) You set up the images to display at full-screen, extending from top to bottom of the browser window or from arrow edge to arrow edge. It looks fantastic.
If we imagine that the gallery will have perhaps 25 or more images and that some users will have a particularly big monitor, it presents a dilemma. If you display the images at full screen, either they will appear pixelated on those big monitors, or you have to export them at a very high resolution, which will be quite heavy (more so, considering the number of images) for those with more typical monitors or tablets.
You could change the display to 80vw, rather than 100vw, but you still can’t be sure how they’re going to show up. Since you don’t know your audience’s monitors in advance, would it not be better to choose a size to export the images and limit them to displaying at that size?
This has nothing to do with your work, but more to do with how we design a gallery page. I would like to know your opinion.

2) I like that you avoided my “junk” page by assigning the images an html class that takes care of resizing rather than using a placeholder and generating the image on the “junk” page.

3) Pursuant to that, your classes to center the images (fix_center_1500 and fix_center_0667) are interesting. I understand the approach of using viewport dimensions instead of percentages, but I would like to know if there is an advantage to the approach. I’m not sure what the differences in the implementation or result are.

4) I’m confused by the requirement to have a unique class for each image width. If you used the alternate method of calculating the width with CSS (calc(100vw - 112px)) and instead used left:50%, top:50%, and transform: translate (-50%,-50%), could it be avoided, or is that the necessary way? It seems that the latter would work for all widths.

5) Your JavaScript function to “Stop Xara from automatic handling of our manipulated elements” is clever. While I have a vague appreciation for how it works, it would be impossible for me to come up with something similar. Congratulations.

Thanks again for spending your time on my little project, and for your valuable input.

Greg

[gcellison]

A late contribution.

Both of your solutions are praiseworthy.
I like the concept of CSS-only but I have to yield that to add further capability, JavaScript will have a say.
I also like the way that any other Xara effects can be included.

I decide to trawl around for a Lightbox approach and came across https://nanogallery2.nanostudio.org.
I was attracted to this one for the richness of the thumbnail presentation, particularly the Mosaic construction.

To equate to your solutions, I built a gallery with the same images and used https://nanogallery2.nanostudio.org/builder.html.
How I did this is in:

jQuery - Lightbox Gallery.xar

@Greg, I assume siran used some CSS/JS to hide the images.
I have used a Xara-approach.
A layer with a bang (!) prefix is always published visible or hidden.
A shape with a Trigger object that does not exist is always hidden when published.
hide the !layer and you publish behind the scenes.

Enjoy!

Acorn

Thanks again for the insights, @Acorn.

The nanostudio slideshow looks great. I played with it only a little, but it looks to take care of a lot of the details. Since it is open source, the three reference files can be copied, as you indicate. I think perhaps to place them in an external file within a subdirectory of the index_htm_files directory would be great since it may be used on multiple pages.

My understanding of the way this works is that if you make changes to the images within the Xara project, then they will automatically be carried over to the .jpgs that the slideshow references. That is a great advantage over the other slideshow options that require re-uploading the altered images. (The Xara Slideshow Widget is a prime example). It also ensures that the images are optimized.

This may be the option I go with rather than pursuing my own idea.

Thanks as well for the advice on bang and the hidden trigger (sounds like an 80s band). I wasn't familiar with them.

Greg

[Acorn]

Thanks again for the insights, @Acorn.

The nanostudio slideshow looks great. I played with it only a little, but it looks to take care of a lot of the details. Since it is open source, the three reference files can be copied, as you indicate. I think perhaps to place them in an external file within a subdirectory of the index_htm_files directory would be great since it may be used on multiple pages.

My understanding of the way this works is that if you make changes to the images within the Xara project, then they will automatically be carried over to the .jpgs that the slideshow references. That is a great advantage over the other slideshow options that require re-uploading the altered images. (The Xara Slideshow Widget is a prime example). It also ensures that the images are optimized.

This may be the option I go with rather than pursuing my own idea.

Thanks as well for the advice on bang and the hidden trigger (sounds like an 80s band). I wasn't familiar with them.

Greg

Greg, you are right about the changing of the images. All is fine if you keep the same Image Filenames.

One thing I quickly checked is the image must be a pure image (a Xara oversight?). Any tweaks and you have to create Bitmap Copy and use that instead.

Not fully tested it yet.

Acorn

[Acorn]

If anyone is interested, place a shape on a layer "LayerName" and add popup: close "LayerName" and everything on that layer is still published but hidden when the layer is Visible.
!LayerName allows the same but the Layer can be Visible or Hidden [ & use popup: close "!LayerName" ].

Acorn

[Chris M]

I'm following this with great interest and hope to play around when I have more than 2 minutes spare.

[siran]

Acorn, thanks for sharing the new hiding technique!
Greg, I think it would require to use a resize handler to limit the max size to the original dimension and also retain the aspect ratio. Messing the aspect ration would lead to these surrounding area where clicking wouldn't close the image in case of a SPAN with background-image, in case of IMG it would distort the image.
There would be a solution for the latest browsers though (see example) but on older versions (see table) it will fall back to previous behavior. For this I have moved everything to javascript. This also doesn't require different classes for different aspect ratios because the dimensions can be read from the elements.
As mentioned above we could use a resize handler to support older browsers, if you would like to go that way please tell so.
The answer to 3 and 4 from above is that this is only required to retain the aspect ratio. Using % in a width attribute will alway reference the browser width in a fixed positioned element, but with vh we can also reference the height in a width attribute and with vw the width in a height attribute.