Revisting layer-based image gallery slideshows

Hello all and happy Friday

I’m working on a layer-based image gallery slideshow. It is almost completely stolen from ideas here on talkgraphics, particularly from Acorn, one which he named lucky-theee-dragon (based on a highslide idea from another poster… sorry not to have the name). Unfortunately, I have not been able to locate the thread.

The concept is not complex, but ingenious in developing your own image gallery with a slideshow, using page layers accessed via popups.

I have added a little to the mix, as you can see in the attachment if you’re interested. (If either of these has previously been done here, my apologies.)

:pointAttachment 127110

1) I wanted a full-page transparency under the lightbox image when it opens. To accomplish this, on each layer I added a placeholder with a simple div:

Code:

---

<div class="modal-scrim"></div>

---

You can see the CSS is in the website head html.

2) I wanted to make the lightbox images clickable to advance to the next image, so I copied the link code from the Next arrow:

Code:

---

popup: open "Image2" close "Image1"

---

And I wanted to make the transparency clickable to close the lightbox and return to the image gallery. So, I added the link code:

Code:

---

popup: close

---

It seems to work well, and it accomplishes what I set out to do.

* I would like to ask if anyone might share their ingenuity to accomplish the last thing I would like:

Ideally, when the lightbox image opens, it should be in the center of the browser window. Scrolling can occur behind, but the image itself should remain fixed.

Unfortunately, Xara attaches a coordinate location to the image which I have not found a way to override. I attempted to use CSS to center it (position: fixed; left: 50%; top: 50%; transform: translate (-50%, -50%)) but the code calculates the position based on the coordinates already assigned to the image, i.e., where it is physically inserted on the page, rather than relative to the window. (In fact, it is sent to the corner.) (I tried other position attributes as well, but all give screwy results.) The location that Xara automatically generates seems impervious.

Would anyone have ideas on how to overcome this?

Many thanks in advance.

Hi Greg,

Take a look at https://barnesbowling.org.

Scroll down a bit past the booking system and there is an example on the left of the page where each thumbnail brings up an enlarged image in the same position each time.

You can apply any effects you want to both the thumbnail and its enlargement. Each thumbnail is soft-grouped with its corresponding enlargement; each enlargement is on its own layer.

You can create any number of different and reusable configurations and layouts.

Gary

Thanks for the insight, Gary!

Your gallery works well. What I'd like is to have it open up more full-screen, as in a lightbox slideshow. The problem is being able to center it and make it fixed when the user scrolls. Actually, the latter is needed more for when the user clicks a thumbnail further down the page, so the full image doesn't show up too high up.

Greg

I think I’ve arrived at a solution… perhaps not the most elegant or easiest, but it seems to work.

The trick seems to be to convert the lightbox images (on the individual layers) into placeholders that reference the actual image files.

The code I placed in the placeholder body html is:
<img src="index_htm_files/***.jpg"
style="position:fixed;
object-fit: contain;
left:50%; top:50%;
transform:translate(-50%,-50%);
width:1500px;
max-width: 80%;
max-height: 80%;">

You have to make sure the image files are in the index_htm_files directory. This can be accomplished by putting them in a “junk” page and giving them the appropriate names. I noticed that drag / dropping the image onto a rectangle doesn’t work… apparently Xara has a bug of not allowing naming (via Name > filename="***" or the new Web Properties > Image Filename feature). The export assigns a numerical filename that overrides what you put in. BUG REPORT!!! But if you drag and drop the image directly onto the page board, naming it is possible.

An extra benefit to this method is that you can also make the image responsive to the size of the user’s browser (the code with the max-width and max-height).

As it is late, I am stopping my experimenting. Tomorrow I will see how well Xara responds if I assign the placeholder a class and move the style coding into the website head html. Fingers crossed.

Quote:

---

Originally Posted by gcellison

Thanks for the insight, Gary!

Your gallery works well. What I'd like is to have it open up more full-screen, as in a lightbox slideshow. The problem is being able to center it and make it fixed when the user scrolls. Actually, the latter is needed more for when the user clicks a thumbnail further down the page, so the full image doesn't show up too high up.

Greg

---

Greg, not a solution to fix the image in place but to ensure the full image is presented from a low down linker: https://www.talkgraphics.com/showthr...714#post553714.

I assume you are after something like http://walter-pall.de?
It was referred to by HiSlide as a showcase site and is very clever; I don't know how it all fits together but I am citing it as an example of what you are after.
It might be flexbox.

Acorn

Quote:

---

Originally Posted by Acorn

Greg, not a solution to fix the image in place but to ensure the full image is presented from a low down linker: https://www.talkgraphics.com/showthr...714#post553714.

I assume you are after something like http://walter-pall.de?
It was referred to by HiSlide as a showcase site and is very clever; I don't know how it all fits together but I am citing it as an example of what you are after.
It might be flexbox.

Acorn

---

Thank for the link, Acorn. It looks very interesting. I will check it out.

The type of image gallery lightbox slideshow I'm trying to make is in fact very standard. And example would be something like THIS. In fact, it's somewhat similar to the ones you've designed in the past, except that I want to add and change a couple of details as mentioned above.

I did use HighSlide in the past (as it is built in to Xara's slideshow option), and even customized it as much as it would allow. But my goal is to get the slideshow website-internal and once I have it functioning using page layers, to be able to customize it further.

Thanks again.

Quote:

---

Originally Posted by Acorn

Greg, not a solution to fix the image in place but to ensure the full image is presented from a low down linker: https://www.talkgraphics.com/showthr...714#post553714.

---

Acorn, I checked out the thread you suggested. A very interesting development of the idea between you and siran. It may help in my objective. Thanks.

Hi again. For anyone interested, I’ve finished my project. The result is attached.

:point Attachment 127122

I’m not a web designer, and my knowledge and experience remain limited. Nevertheless, as others on the forum are extremely generous in sharing their work, I thought I’d do the same. If it turns out to be banal, my apologies.

Much credit to Acorn and others who have developed the idea of image galleries using layers in the past.

Objective:

- A thumbnail image gallery that opens up a larger image whenever a thumbnail is clicked.
- The full image has a transparency behind it covering the entire browser window.
- The full image always stays in the center of the browser window. It is at the full size designated provided that it fits within 80% of the width and height of that window. Otherwise, it shrinks to 80% of the smaller dimension. The size change is responsive if the window is resized vertically or horizontally.
- Though the page (still visible behind the transparency) will scroll up and down, the full image does not scroll, but remains centered. The arrows to the previous / next image also remain stationary.
- Clicking on the full image advances to the next image (like the next arrow). Clicking on the transparency closes the lightbox and returns to the image thumbnail gallery. (Note, clicking on the transparency close to the image can trigger the “next” function.)

A (hopefully sufficient) explanation of the methodology is shown in the project file (page: information).

Is there a benefit of this method over using HighSlide (the built-in photo popup image slideshow used by Xara)?
It depends on your perspective and your objective.
- HighSlide is great to generate an image gallery slideshow (more or less) automatically just by clicking it in the web image properties. The options are very limited, so there's little to consider.
- By default, HighSlide allows displaying the image title and / or a caption, dimming the background, showing controls, and making the slides advance automatically. The text has a fixed format and location which cannot be altered, nor can the background dimming.
- HighSlide opens the full image over the thumbnail clicked and the following images remain in that position until something provokes a movement (e.g., if a subsequent image is bigger than the browser window). The images open at the full size designated unless the browser window is too small. Adjusting the window does not affect the current image but advancing to another image will resize the modal. (I.e., it is not truly responsive.)
- When a full image opens in HighSlide, its position is not fixed. It will scroll up or down, which is generally not desired for image galleries.
- The default HighSlide browser controls are small and awkward, and frankly look very early-2000s.
- There are a few modifications that can be made to the appearance, but they require additional work that is not native to Xara.

- The current method requires much more work, but it allows greater flexibility in design. It is appropriate for someone with the time and inclination to put in the extra effort. Text, graphics, etc., can be added directly to the image layer. The text can be formatted and placed however the designer likes… not limited to defaults. Enhancements to the image (e.g., borders) can be added on the “junk” page, etc. Acorn shares some of these possibilities in The Ultimate Xara Slideshow.

- The full images are completely responsive. If the browser window is resized, the image will shrink or grow as determined by the parameters that the designer defines.
- The full images always stay centered. They do not scroll, though the page beneath does.
- Like HighSlide, the current method is highly compatible with variants.
- Though not developed here, automatic advancement through the slides is possible. In fact, I believe it was developed in the thread referenced above.

Finally. Yes, I am aware that there are numerous JavaScript slideshows available on the internet. I found drawbacks to them.
- First, the images have to be uploaded to the slideshow and are not part of the Xara project. If your make changes to the images (reclip, change enhancements, etc.), the altered images would have to be re-exported and then re-uploaded into the slideshow. With the current method, the changes are made in the project and pass to the image gallery automatically. As they are part of the Xara project, the images here are also automatically optimized on export, etc.
- Secondly, the JavaScript slideshows found on the internet generally require an external reference (e.g., the JQuery file that makes them work.) The current method is entirely internal to the web domain.
- Thirdly, the JavaScript slideshows are problematic with variants. Using them requires a fairly good knowledge of JavaScript.
- Which is also the fourth reason: my JavaScript knowledge is NOT fairly good.

My great appreciation to anyone who takes the time to look the work over. Any comments on problems, oversights, or things that could be done more easily, will be most welcome. :)

Just finished a similar example based on your first one. It uses the "htmlclass=..." name, but it requires some code. On the positive side is that it also scales up.
Have a look if you are interested and don't hesitate to ask for details.
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. Try it by adding a border-style: solid; to the container style.
Another disadvantage of my example is that you would have to add a new class name for every aspect ratio you use for the images.

Here is an example with two aspect ratios.
Changed the CSS a bit which also required to adapt the code.

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

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

Quote:

---

Originally Posted by siran

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!

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:

:pointAttachment 127129

@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

Quote:

---

Originally Posted by Acorn

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.

Quote:

---

@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!

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

Quote:

---

Originally Posted by 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:

:pointAttachment 127129

@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

Quote:

---

Originally Posted by gcellison

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

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

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

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.

Made a quick test. Here is an example with javascript resizing limiting to original dimensions. This also works with older browsers.

Thanks, @siran.

It functions incredibly.

When I look at your JS, I come to only a vague understanding of what is happening. As a result, being able to tweak it would be impossible.

These are exactly the kinds of things that Xara should be automating to allow us not-so-proficient designers to make awesome websites.

Once again, and as always, your contribution is greatly appreciated.

Greg

If you need some explanation don't hesitate to ask.
By the way, I noticed clicking in IE and Edge often only works after moving the mouse a bit. I created an improved version, but the code is even more "demanding" and I changed the "link type" of the buttons and images to "open pop-up layer".
I don't want to scare you off, so if you would like to have a look at it please drop a note.

Quote:

---

Originally Posted by siran

If you need some explanation don't hesitate to ask.
By the way, I noticed clicking in IE and Edge often only works after moving the mouse a bit. I created an improved version, but the code is even more "demanding" and I changed the "link type" of the buttons and images to "open pop-up layer".
I don't want to scare you off, so if you would like to have a look at it please drop a note.

---

@siran

Many thanks. At the risk of being daunted, I would eagerly look at your new version. I'm always willing to try to understand and happy to see what someone comes up with. Besides, even if I can't benefit from it, some other forum member certainly will.

Greg

First a short description of what it does.

Once the document is loaded the program searches for all elements that hav a HTML class startig with fix_ and manipulates those elements in the following way:
It is assumed the element is wrapped in an <A> tag that holds the link address, in our case it should always be what Xara creates from the "open pop-up layer" and hence starting with "javascript:".
The element (that inside of the A) is moved one level up (just before the A) and the previously surrounding A is removed, effectively "unwrapping" the element. In fact the A still exists in memory at that time but not at the document.
Now we stop Xara fdrom handling the element (by adding xr_noreset to the class names and by removing Xaras mouse move handler.
We add our own click handler and set a data attribute to remember to original link address.
Then we change the style of the element to fixed positioning and to center it, set cursor to pointer and such.
In case of prev/next button the positioning is changed a bit then. You will find a value of "10px" there, this is the distance from the window edges of the buttons. Change it if you like, but remember to also adapt the width calculation we will discuss later.
In case of the images (class is fix_center) the element (togehter with the original width and height) is added to the list of elements requiering to be resized at browser window resizing.

The click handler (function h(e){...}):
When one of our elements is clicked the handler is executed.
First it checks if the remembered link address really starts with "javascript:", if not it will just do nothing.
Then it locates the base element of the pop-up layer the element is part of and tells Xara it was the last opened one. (This is only required because Xara gets confused about that somtimes). (It is done by pointing Xaras variable xr_pul to the layer.)
Then it executes the part of the link after the "javascript:" which should always be something like "xr_cpu(4)" which is what Xara made from the open pop-up layer link. The 4 is the internal layer number, which by the way is the same number that is located at the end of the ID the pop-up layers have (id="xr_xp4").
The code is executed slightly delayed (setTimeout(...,1)). This is done because somehow the process becomes instable if executed inline or with delay 0. (I don't have invesitgated why that happens, having a fix was sufficent for now I think.)

The resize handler:
This goes through all the remembered elements and resizes them according to current windows size. The relevant part is the calculation of the resize factor:

Code:

---

f=Math.min((xr_wx-112)/w,(xr_wy-0)/h,1)

---

The 112 is the number of pixels to be reduced from the window width. In this case the buttons are 36 pixels wide and I wanted to have 10 pixels margin around them (remember the "10px" from above?). Having buttons to the left and right this results in (10+36+10)*2=112.
The 0 is the sum of the top and bottom margin (as the image is centered the are always identical), so if you want 10 pixels marging from top and bottom enter 20 there.
The 1 is the maximum factor of the scaling. If you (as I would do) scale the images to have 96 dpi (which avoids a separate retina image to be exported) and still want at least retina resolution you can change it to 0.5 for example.

Many thanks, @siran.
A quick look confirms 1) that it still appears to function well and 2) the code will take a bit of effort to understand. I look forward to trying. And I appreciate you additional explanation to help.
Greg