Another Image Gallery

[Acorn]

In progressing the concepts of https://www.talkgraphics.com/showthr...-gt-Accordions, I have added some more JavaScript code to ensure no more than one <details> grouping is open at any point. This allows for the creation of a simple image gallery.

In reality it can be used for an accordion of FAQs, reveal answers to puzzles, mega menus, presentation steps, ....

To create similar in pure Xara requires a lot of trickery to force a toggle action and lots of layers.
Here, jQuery Gallery.xar, I have used just the one.

Most Xara features will work, there are bound to be some that don't.
If you find any, do Post back.

Acorn

[gwpriester]

You're a treasure.

[Boy]

Acorn, I tried the file but noticed that only clicking the thumbnails from the top down works. If I click the ones above the one that's open, no response. Also the 'X' doesn't seem to work. Opened it in Chrome.

[Acorn]

Boy, thank you.

Which Xara product version?

Acorn

[Initiostar]

Boy, thank you.

Which Xara product version?

Acorn

Hi Acorn, I noticed the same issues as Boy with Pro v18.5. I would have thought you should be able to randomly click/touch the thumbnails; it works top to bottom but not upwards. Guessing here it is related to the group's order in the Gallery layer?

Gary

[Boy]

Acorn, same version as Initiostar has.

[Acorn]

@Boy & @Initiostar, bummer!

I think it might be Group Images, which has changed to Group web images in Pro+v21.7.

All we can do at the moment is use the Thumbs as a toggle but any group cannot be closed by another.

I am confused by the Close icon not firing though as it works in Dev Tools in Chrome.
It is as if the addition of a click listener is not happening in JS or jQuery.

Acorn

[Boy]

Couldn't quite follow the technicalities of what you mentioned but it's clear there are some difference between Xara's and Magix' latest versions of XDP. So, we'll have to wait for an update to have your approach work. As the last one was in January, that will take a while, I suspect.

[Initiostar]

Not sure what impact any Pro+ 'group' changes will have for Pro users until v19.0 emerges. Looked at the release notes for Pro+ v21.7 and I'm none the wiser.

Meantime, Pro users could continue to use standard popup layers e.g. https://initiostar.co.uk/demo/gallery/

The more adventurous could also take a look at Acorn's inner zoom (in a grid format): https://initiostar.co.uk/demo/inzoom-test/ (mobile & desktop), or have a play with the standard Highslide (with a little twist) (mobile and desktop) https://initiostar.co.uk/demo/simple_grid/

Many more examples that can be started with a single photo template, with a desktop/mobile combo grid created thereafter e.g. https://initiostar.co.uk/demo/hoverZoom/

We have thank Acorn for most of the code-driven examples

Gary

[Egg Bramhill]

Hi folks,

I've been messing with Acorns original idea posted in the first post in this thread. It works exceptionally well.

I'm also using XDpro+. EDIT: Tried it in Xara Designer Pro X 17 and found the same fault as mentioned in Xara Designer Pro X 18

I've attached my xar here, it will be interesting if this xar file creates the same issue for none pro+ users. You can view a demo HERE