Lightbox

Multipurpose WordPress Theme Forum Support
GK User
Fri Jul 29, 2016 1:38 pm
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.
User avatar
Junior Boarder

Joshua M
Sun Jul 31, 2016 1:18 pm
Hi,

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

GK User
Mon Aug 01, 2016 1:58 pm
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.
User avatar
Junior Boarder

GK User
Mon Aug 01, 2016 3:32 pm
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?
User avatar
Junior Boarder

Joshua M
Tue Aug 02, 2016 8:34 pm
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.
User avatar
Moderator

GK User
Fri Aug 05, 2016 10:24 am
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/
User avatar
Junior Boarder

Joshua M
Mon Aug 08, 2016 8:17 am
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.
User avatar
Moderator

GK User
Mon Aug 08, 2016 5:44 pm
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?
User avatar
Junior Boarder

Joshua M
Tue Aug 09, 2016 9:48 am
Probably you should use some custom css code to hide/show this div - please ask the question on the plugin support forum.
User avatar
Moderator

GK User
Fri Aug 12, 2016 1:10 pm
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:)
User avatar
Junior Boarder

GK User
Mon Aug 15, 2016 8:07 am
I have fixed the lightbox situation :)
User avatar
Junior Boarder


cron