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"]
[block_grid_item]
[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="//www.youtube.com/embed/h2Yfr1lzltk" 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"]
</div>
[/block_grid_item]
[block_grid_item]
[image src="/wpress/wp-content/uploads/2017/12/recliner_front.jpg" link="true"]
[/block_grid_item]
[/block_grid]
[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
http://joebcc.com/wpress/3d-modeling/
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.