Styling lightboxes in X Pro?

Hello - I want to create a portfolio page - with blocks of images linking to a lightbox that has further images of each project. However, I am running into issues.

I am trying to set up the page in a way where i have multiple projects, each with multiple images/videos within the lightbox, but with only one “selector” image per project.

I have been mostly successful by using this code in a text element

[block_grid type="two-up"] 

[image src="/wpress/wp-content/uploads/2017/12/phone_02-1.jpg" lightbox_thumb="/wpress/wp-content/uploads/2017/12/phone_02-1.jpg" href="//" link="true"]
<div style="display: none;">
[image src="/wpress/wp-content/uploads/2017/12/phone_01.jpg" link="true"]
[image src="/wpress/wp-content/uploads/2017/12/phone_02.jpg" link="true"]

[image src="/wpress/wp-content/uploads/2017/12/recliner_front.jpg" link="true"]


[lightbox prev_scale="0" opacity="100" prev_opacity="0" next_scale="0" next_opacity="0" orientation="horizontal" thumbnails="true"]

However, as you can see in the page which i linked below, it is leading to some strange issues, where when scrolling to the next image the previous image sticks in the background

I am also curious about the how to edit the styling of the lightbox itself- specifically: the colors of the buttons up top - the border width around the images - how to resize a video embed and maintain it centered - as well as if it is possible to add icons for next/previous image.

Hi there,

The question you are asking has to aspects, one the lightbox functionality and the other one the customization.

That is great what you want to achieve with the lightbox functionality of our theme but I feel like this will make things complicated along the way. The lightbox functionality intends to keep things as simple as possible and you try to make a full gallery out of a function which is not intended to do that.

I suggest that you take a look at the Envira Gallery or Essential Grid. Those are more detailed plugins for that matter and might be a better choice for you.

Now getting back to the questions, I checked the link you have provided and I do not see the problem of staying background. I used the Chrome browser:

The customization of the top left X button and that kind of stuff can be done via CSS. We can show you how to do for few cases and the rest will be on your shoulders.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.