Need Simple Custom Code for Z-Index Change through Click Event

Custom code
1

Hi everyone,

On my site I have a bunch of small images that when clicked expand to a certain size. As such, when expanding, the images overlap other images on the page. However, do to the fact that all images are bound to the layer order, I need to manually place images in the correct order so that they overlap the images that they should and appear underneath images where they should be underneath (this is kind of difficult to explain, hopefully the images make this clearer).

As such I am looking for a custom code that allows images that are clicked to appear in the very front/top of the layer (or as support phrased it “alter the click events and Z-index through code”).

Here are images showcasing the issue:

Image
Image1920Ă—1131 349 KB

Image
Image1920Ă—1131 345 KB

Image
Image1920Ă—1131 333 KB

Thank you in advance for any help!

3

Hi @davidmiller5274,

Thank you so much for the help! However, I am not very advanced in coding/coding in readymag, so I would need a bit of extra guidance on how to integrate it.

Do I add the code as a project code or as a widget code?

If a widget code, where do I place it on the site?

If it is a project code, do I add it into , After , Before , CSS?

In the code, where it says ´´’img’ do I need to replace it with the images name or its data id? Is there anything else I need to add besides the code?

Anything else I need to be aware of?

Once again, thank you for the help so far!!

4

hey boris,

well, this is possible with custom code, yes. the previous poster “davidmiller” was a AI bot with nonsense answers, so ignore it!

Basically its not that complicated, but you have to find the exact divs to set the z-index to via the dev-tools of your browser.

In theory I would approach it with this logic:
On click on an image (to enlarge) → set index of it to 999, while setting the z-index of all others to 0.

Every RM element has a individual data-id with which you can select the element via JS or CSS.
But as soon as you are adding an animation this element gets nested inside another one without an individual ID. This element only has the class “animation-container”, which is the element you have to assign the z-index-change.

So you would need to select the data-id element, and get its parent div with JS and “on click” assign the new z-index value.

You could try to search the forum and stackoverflow to dig yourself on how to adress the data-id element and how to do the css change exactly.

1 Like