Docs

[aaronmarsh]

Hi,

I have a grid layout of images for products (Not an online shop – just images of products). What I’d like to do is when the image is clicked I’d like a box to open on top of the page – like a lightbox does with images, that will display content such as a description and prices etc.

How can I do this please?

I looked at the lightbox plugin but I couldn’t see how I’d do it with that.

Thanks

[Darshana]

Hi there,

Thanks for writing in! You can try a 3rd party cornerstone plugin (http://cornerstonelibrary.com/elements/modal/).

Hope that helps.

[aaronmarsh]

Hi,

Thanks for the reply. I tried the plugin you suggested but I cant seem to find how it works.

I did some searching and I found I could probably do it with ConvertPlug but I’m having an issue with getting it to display.

I have added an image to my page and give it a unique class name, then I created a modal popup and set the ‘Launch with CSS Class’ option to my class name but it still doesn’t open when the image is clicked on. Am I doing something wrong?

Thanks

EDIT: Just found it, I didn’t see the switch from pause to live, 🙂 its now working as expected.

[Darshana]

Glad it works for you 🙂

[aaronmarsh]

Thanks,

I just came across something in the modal popup, everything is working great but Im designing the popup content in a page using cornerstone so I can get it to look right, then im just copying all the code generated by cornerstone from that page into the modal.

This works perfectly however it’s not displaying ‘icons’ in the modal popup it’s just showing like an error symbol, is this something that can be resolved easily? I could swap each icon with an image but this would mess with the design and I dont really want to load an image instead of an icon.

Thanks

[Christopher]

Hi there,

Please provide us with URL of page in question.

Thanks.

[aaronmarsh]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this code in child theme’s style.css file :

li.x-li-icon {
    list-style: none;
}
i.x-icon-chevron-right:before {
    content: "\f054";
    font-family: fontawesome;
    list-style: none;
}

Hope it helps.

[aaronmarsh]

Hi,

That worked perfectly,

Thanks

[Darshana]

Glad we were able to help 🙂

[Author]

Posts