Layerslider vs Essential Grid Compatability issues

Support
#1

Hello,

I hope this is the right place to add my support request.
I’m having a rather annoying situation which I’m sure you’ve heard many times.

It all started with Essential Grid itself.

I have created a LayerSlider slider for my “videographer” page.
Thereby right under, I have added an Essential Grid and both worked perfectly.

I had a custom grid with YouTube videos and a custom skin. This skin suddenly showed an issue. Basically, I had a simple skin with 1 “icon” which had 1 purpose - to play the video. First, it worked but I saw there was no “fullscreen” button and adding the costum code that Essential Grid offers for enabling the button has major bugs.

Thereby I decided to use a Lightbox so the "icon"s sole purpose was now to open the Lightbox, which worked perfectly. Then I wanted to see if I could add the ability that the whole area of a grid item would be “clicka-able” so that the lightbox would open without you necessarily having to press the “icon” exactly. This is where the problem began.

Now, everytime you’d press outside the icon, the grid would play in-grid. If you pressed the “icon”, the lightbox would open and play and so would the in-grid item, simultaneously.

I then found out that this is ridiculous, obviously. I turned it back so that only the “icon” will open the Lightbox. I chose “none” in the “Layout Composition” of the skin creator so that the only possible link would be the “icon” itself. Here is where the problem magically appears. The “icon” is now no longer the only click-able area as it was before. Something has happened. It seems as if the 2 “drop zones” in the edit builder of the skin are click-able without anything in them. The only thing which contains a link to play the video is in the “icon” itself.

I have tried everything I could think of - I have re-created the skin, same problem. I changed several settings in the skin and then I realized that it has nothing to do with the skin all of a sudden because even if I switch to another official skin, the same problem arises. Thereby I tried looking into the “Grid” itself and I have changed and re-done a lot of things but with no success…

So I thought…, I’ll make a brand new grid. I did… Then things became even worse.

Now, when implementing this new grid, several things go wrong:

  1. The grid, when under LayerSlider simply stops LayerSlider from working…
  2. The grid won’t employ any skin attached to it… It is showing a YouTube video and is set to show featured images as a priority which also doesn’t work.
  3. It won’t respond to custom changes. I checked “cache” and that shouldn’t have been the problem.

So…, as you can see with my detailed explanation, I am annoyed. I’d like to think that I am missing 1 thing but it simply doesn’t seem plausible that this is the case.

All I want is a grid whereas I can have a skin with an icon and background that are both click-able and will show ONE INSTANCE of the video in Lightbox. This is the optimal solution.

If not, I want only the “icon” to be click-able, opening ONE INSTANCE of the video in a Lightbox.

Please help me!

Thank you!

  • Nico Collu
#2

Hello Nico,

Thank you for the very detailed post information. Are you using the latest supported versions of Layerslider and Essential Grid? Please check out the compatible versions from this page: https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195

If you already have updated to the latest versions, there must be a JS error on the page or something that is preventing it to work. Would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password (only if necessary)

Thank you.

#3

Hello RueNel,

How do I send you a secure note? :slight_smile:

#4

Hi there,

Please see the screenshot for reference.

Hope this helps.

#5

Thank you!

It’s there now although keep in mind, I suspect another of your staff in there currently with those login credentials under another forum topic issue.

#6

Hello,

I have seen that your thread has many details and I am a little confused about them. Please, could you organize your question separating the Essential grid and the LayerSlider problem? One other thing, I have checked your site and could not find the grid and the slider that you mentioned, please, provide to us the link (in a secure note) that`s occurring it.

#7

Hello John,

You won’t be seeing the problem because I can’t let it stay on the live site.

The main problem at the moment is that I cannot add an icon to the Essential Grid since it will, when clicked on, both open a Lightbox AND the in-grid item.

I’ve tried numerous different options but none resolve it.

Can you help with that? :slight_smile:

#8

Hi there,

We could check as long as the issue is there, would you mind cloning your site into staging? That way, you don’t need to change your live site while we’re investigating.

Thanks!

#9

Hello Rad,

The login credentials are above onto the Staging Site.

So…, currently I have replicated this error:

  • There is a link to the actual media that should refer to Lightbox when clicked. It plays in-grid.
  • There is a play button icon which should refer to Lightbox, which is does! :slight_smile:

In fact, I don’t even want the icon. The only reason I must put it is because then the “hover” overlay appears which is doesn’t without an icon - also a bug?

Thereby, the whole area must be click-able and open in Lightbox, not in in-grid.

#10

Hi there,

You shouldn’t add the grid within the slider. The structure of the grid is complex and can’t be contained by another slider. It’s the same issue when you place the grid within accordion or tab, it will not display or will display but messed up. It can be fixed by triggering the re-render when accordion or tab is clicked. But it’s a different case in the slider, the slider clone the slides to creates continuity, an illusion of infinite items sliding together. Which of course, the grid will be cloned as well and that cause issues because the content is cloned but not the functionalities of original grid instance.

About opening the video in the lightbox instead of playing it within the item. I think it’s made it that way since there are only few options available for the skin. Example, the source media is youtube which means the main cover is a youtube video that will play when clicked. Then you just added a button/icon.

I added an overlay layer to wrap the media cover but no luck, there is no z-index option either. It’s not a conflict, but lack of options which maybe I could forward as a feature request. How about using The Grid instead of Essential Grid?

Thanks!