Lightbox

Hi,

Does Quark has a built in lightbox or do I need to build it myself?

I have several "Buy Now" buttons on for each buy button I want a small lightbox to open to show a few shops where the product can be bought.

Bit like this:
http://www.philips.nl/c-p/S7710_26/shav ... an-systeem

Click on " bekijk alle retailers of vind een winkel in de buurt" to see what I mean.

Thanks in advance.

Hi,

You have to use 3rd party plugin if you want to use this kind of feature.

Quark has no lightbox option build in? I thought you guys had build in a lightbox option for the gallery? So there should be some script available right?

I just need a blank lightbox. The buy now buttons etcetera I can build in myself with css.

I have tried using WP featherlight plugin but I can't seem to make that work at the Quark template. Does work on a local test site with a other theme.

I deinstalled it at this moment. Any clue why it does not work within the Gavick Quark theme?

There's photoswipe script used for the gallery, it's not a simple lightbox, you can check the documentation:
http://photoswipe.com/documentation/get ... arted.html

Regarding the plugin, could you activate the plugin and provide an URL to your page with this lighbox? Then I'll be able to check the issue.

Hi Joshua,
Thanks for getting back to me. I will check out the photoswipe if I can put normal text content in there...

Regarding the plugin, activated it again:
http://bit.ly/2b06D1e

The orange buy buttons should open a lightbox. But as you can see, the div that should be hidden until click on the button is already visible. I've also tested this on subpages without a button but it does not seem to work.
I used the code provided by the plugins documentation

Code: Select all

By default, featherlight acts on all elements using the 'data-featherlight' attribute. An element with this attribute triggers the lightbox. The value of the attribute acts as selector for an element that's opened as lightbox.

<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox">This div will be opened in a lightbox</div>

https://nl.wordpress.org/plugins/wp-featherlight/

Hi,

Please try to use the following code instead:

Code: Select all

<a href="test" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox">This div will be opened in a lightbox</div>


because each link which starts with "#.." is executed by theme script and smooth scrolling feature.

Hi Joshua,

We´re getting closer, thanks. The lightbox opens now, however the div is still visible before opening the lightbox. If I read the documention correctly this div should be invisible until opened in a lightbox, any idea if there is a quick fix for this?

Probably you should use some custom css code to hide/show this div - please ask the question on the plugin support forum.

Does Quark do have built in modals?
That's why I like the bootstrap framework (saddly Gavick doesn't use), a lot of built in features:)

I have fixed the lightbox situation