Another Image Gallery

[Initiostar]

Egg, works well in the published version, but falls over in v18.5.

Gary

[Egg Bramhill]

Thanks Gary, it's obviously some difference between versions.

[bwood]

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, Attachment 131654, 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

Exceptional Acorn. Thank You. I’m going to try this on one of my museum pages.
-W

[Acorn]

I have tweaked the code but I have only used in XPro+ so no promises for earlier Magix versions - sorry. Down to v17 seems OK.

All the code is in the rainbow oval to make it easier to port.
This must always be front in the MouseOff layer. I cheated here as it is on the !Controls layer instead so will always be last in the DOM (HTML rendering).

For those who don't read back in Threads
In HTML5, if you create a collection of <details>/<summary> tagged information, the summary acts as a toggle to show/hide the details.
By grouping a collection of objects and giving one of them a Name, htmlclass="reveal" then a small jQuery block turns this into a wrapped <summary> inside a wrapped <details> for the remaining objects.
At this point you could stop and have a play.
I added extra CSS to tidy things up and an even smaller code block to ensure only one <details> was ever open at a time, creating an auto-closing accordion.
This accordion can be of any shape and content.

This design file, JQ+CSS - Fancier Simple Slider.xar, has four coloured Thumbnails that can be blobs, text, almost anything.
Clicking any opens up its associated <details>, which can be images, text pop-ups, almost anything Xara can handle.

So, in the end, you could have a FAQs, a mega-menu, a set of presentation slides/steps, an image viewer, ... You control the size and layout of everything.

Ideas & suggestions welcome.

Sliders Unleashed.

Acorn

P.S. @Egg, I remembered about FF this time!

[Boy]

Using XDP 19. This version allows the user to click the thumbnails left to right and v.v. So, it looks like you solved the issue there was for those using a Magix version of XDP.

One quirk though -- perhaps intentionally designed this way? -- is that when clicking either arrow, the thumbnail being selected moves in the opposite direction.

[Acorn]

Using XDP 19. This version allows the user to click the thumbnails left to right and v.v. So, it looks like you solved the issue there was for those using a Magix version of XDP.

One quirk though -- perhaps intentionally designed this way? -- is that when clicking either arrow, the thumbnail being selected moves in the opposite direction.

Thank you Boy and for advising about v19.

If you repeatedly click forward, you can consider the Thumbs to be on a conveyor belt so they are moving in the right direction. If the logic is not right for you, you just flip their positions.
I threw the kitchen sink into it regarding the controls and Thumbs but in your design, you could have as many as you like, even hiding the Thumbs.

Acorn

[Egg Bramhill]

P.S. @Egg, I remembered about FF this time!

Thanks for remembering me Acorn.

It's looking great. I'll need a few days to get on top of it but really sweet!

[Boy]

If you repeatedly click forward, you can consider the Thumbs to be on a conveyor belt so they are moving in the right direction. If the logic is not right for you, you just flip their positions.
I threw the kitchen sink into it regarding the controls and Thumbs but in your design, you could have as many as you like, even hiding the Thumbs.

I just mentioned it in case this might have been an anomaly occurring in the XDP-Magix versions.