Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #910766

    When i click portfolio image it redirects me to the next page. I want to open a modal box instead.

    #910783

    Hey farahjanjua,
    Please try using the masonry gallery element, and choose lightbox from the Image Link option. The masonry element doesn’t open the images in lightbox.

    Best regards,
    Mike

    #910794

    Thanks Mike !
    This works but using this I can not select from portfolio categories. I want to show categories based images and clicking them should open the light box.

    #910799

    Hi,
    Try using the Portfolio Grid element, it will give your the sorting and open the images in lightbox.

    Best regards,
    Mike

    #910803

    Then I could not have flexible masonry style that I used to have on other pages. Consistency will affect :/ I want portfolio grid along with flexible masonry .

    #911021

    Hi,
    Sorry, The masonry element doesn’t open the images in lightbox.
    But Please feel free to request – or vote if already requested – such feature on Enfold feature request form.

    Best regards,
    Mike

    #1347006

    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, 7 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)
    #1347008

    Hi,
    Thank you for sharing your solution, hopefully this will help other users.
    If you have any further solutions or questions please feel free to create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘How to display portfolio items in modal box’ is closed to new replies.