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
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.