How to display portfolio items in modal box

Here’s a solution I was able to use, with a few small compromises …

Making a portfolio page appear in the lightbox but without a footer and header and no navigation arrows:

This only works if you can accept ALL portfolio pages displaying without a header and footer and you generally want to switch off the Lightbox navigation arrows!

1. Add this CSS to the general style options:

.single-portfolio #footer {
display: none;
}

.single-portfolio #header {
display: none;
}

#top .avia-post-nav {
display: none;
}

.mfp-arrow {
display: none !important;
}

2. Then add a masonry gallery to your page. Add the pictures from the media gallery.
You need to configure the Masonry Gallery with specific settings. These are mine that work:

CONTENT TAB:
Select Images: (your pictures, preferably of the portfolio item)

Captions: Display Neither

STYLING TAB:
Masonry Settings:
Styling: Perfect Grid
Orientation: Portrait
Image Size: Gallery (845×684)
Gap between elements: No Gap

Columns:
Columns: 4

Pagination:
Image Number: 24
Pagination: No option to view additional images
Colors: Default

ADVANCED TAB:
Animation: No effect, Animation deactivated
Link Settings:
Image Link: Use custom link (fallback is no link)
Custom Link destination: Open in a new window

3. Within the masonry gallery, open the list of pictures you added and click on one. In the sidebar, add a custom, individual link to the corresponding portfolio page that you want to display in the Lightbox, but in this style: (with an additional /?iframe=true at the end):

https://YOUR-DOMAIN.com/portfolio-item/lammjacke/?iframe=true

4. Order the pictures in the list as required, save everything.

5. Save the page and reload the view of the page.

• This reply was modified 2 years, 8 months ago by coldstreamer. Reason: Added Masonry setup (I discovered this is needed to make it work properly, and I added the Lightbox nav arrow removal possibility)