[ElevateCreativeParticipant]

Hi,
I’m trying to implement a lightbox selector sitewide – so rather then placing the [lightbox selector=”.xxxx”] in each page, I was planning on putting it in the child theme template.

I tried copying the rendered code (below) from an inserted light box tag, but that didn’t seem to work.

<span id="x-lightbox-1" data-x-element="lightbox" data-x-params="{"selector":".book","deeplink":false,"opacity":"0.85","prevScale":"0.85","prevOpacity":"0.65","nextScale":"0.85","nextOpacity":"0.65","orientation":"horizontal","thumbnails":false}"></span>

Also wondering what the best way to re-size the lightbox so it doesn’t appear full page? I assume that is just controlled with css? But the trick is that I only really want to re-size that one lightbox, not others…

I’ve only been testing on a local install so far so can’t really send a link…
Any tips would be greatly appreciated!

Thanks in advance.
Anthony

[Rue NelModerator]

Hello Anthony,

Thanks for writing in! May I ask where or in which file did you add the lightbox code in your child theme. If it’s possible, could you please insert the rest of the code so we could replicate and test it in my local testing server too!

And to make the light not a full page, you can use this following code in the customizer, Appearance > Customize > Custom > CSS

.ilightbox-holder .ilightbox-container img.ilightbox-image {
    max-width: 550px;
    height: auto;
}

Hope this helps. Please let us know how it goes.

[ElevateCreativeParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

I think you should use shortcode, instead of HTML generated code. Shortcode will enqueue the lightbox library that HTML code can’t.

Please replace this code,

<span id="x-lightbox-1" data-x-element="lightbox" data-x-params="{"selector":".book","deeplink":false,"opacity":"0.85","prevScale":"0.85","prevOpacity":"0.65","nextScale":"0.85","nextOpacity":"0.65","orientation":"horizontal","thumbnails":false}"></span>

with this,

<?php echo do_shortcode('[lightbox selector=".book"]'); ?>

Hope this helps.

[ElevateCreativeParticipant]

Great – thanks for that! I’ll try it out for sure. And I assume I could then have another different selector either placed on page with cornerstone or in template…?

On the re-sizing css… that works great, but then how do I get the box to centre on the screen since it has all positioning set as fixed etc…

Thanks!

[ElevateCreativeParticipant]

Sorry one more question… I have 2 buttons on the same page which open up a lightbox to a ‘join’ form, but the lightbox now scrolls between the 2… which is obviously pointless since it is the same content showing twice! So is there anyway of turning off the scroll option so it only shows one?

Thanks

[ChristopherModerator]

Hi there,

Would you please upload your site in a temporary domain so we can see what you’ve already achieved?

Thanks.

[Author]

Posts