Docs

[John]

Hey Gang,

So I got two questions about light box images on the following page:
http://www.purposefulmarketinggroup.com/work/

If you go about 1/2 way down you will see some imgs of my logo work and when you click on them it pulls up some bigger imgs:

http://prntscr.com/cjiufl

Now my two questions are:
1) The light box background seems to be solid white is there a way to turn down the background opacity to like .75 so the webpage is kind of visable in the background. I’ve been trying to drill into the right CSS to do this but so far no luck.

2) I’ve noticed that when I work this on a touch screen there seems to be some kind of visual attracts in the background, most noticeably it seems like the first image in the light-box sequence says visible in the background and then the selected and scrolled image moves over top of it concealing it. It kind of makes the scrolling process a bit visually confusing any idea on whats going on there and how to get rid of it?

Thanks for the help X team!

John

[Rad]

Hi there,

Thanks for writing in.

First, please remove the CSS you added to your cornerstone’s custom javascript. It’s causing javascript error since it’s not meant to be added there.

1# and 2#, There is an opacity, but there are multiple lightboxes layered together. And due to that multiple lightboxes, it causes the issues you have on #2.

The solution is removing their other 3 instances of the lightbox. Please remove all other [lightbox] shortcodes. You’ll only use multiple lightboxes if you’re targeting multiple selectors. Example,

This is not okay

[lightbox]
[lightbox]
[lightbox]
[lightbox]

but this is okay

[lightbox selector=".selector-1"]
[lightbox selector=".selector-2"]
[lightbox selector=".selector-3"]
[lightbox selector=".selector-4"]

Please do not add lightbox on every image you add. One lightbox at the end of the page is enough.

Cheers!

[John]

It worked thanks for the help!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts