Avada Forums Community Forum Portfolio image — how to make click bring up lightbox instead of following link

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • eleanorharbison
    Participant
    Post count: 1

    Hi there,
    I have portfolio images posted on my site, https://www.eleanorharbison.com. I would like to turn off the rollover (which I know I can do in Avada > Theme Options > Extra > Featured Image Rollover), and then when the image is clicked have it bring up the lightbox and the larger version of the image, instead of following the link to the portfolio image page. I’ve looked through the Theme Options and the element options on the portfolio image page but can’t seem to find this option. Please help! Thanks!

    marklchaves
    Participant
    Post count: 873

    Hi Eleanor,

    Thanks for posting and supplying your link. Beautiful work by the way.

    On your site, if I click the magnifying glass icon that appears on hover, I’ll get the image in a lightbox. Just so I’m not confused, you don’t want this current state? Instead, you want the following.

    1. Remove the on over animation completely. You said you know how.
    2. After the on hover animation overlay is gone, you want a full size version of the teaser image to popup in a lightbox when the teaser image is clicked.

    Did I get this right? If so, I don’t know if this is possible through standard Avada settings. You might even need some custom PHP code to extend Avada/WordPress portfolio functionality to do this.

    Maybe some other kind soul in this forum can chime in if I’m wrong?

    The reason I don’t this is doable out of-the-box (if I understand it correctly) , is because portfolio archive (collection) pages weren’t designed this way. To my knowledge anyway.

    Ok, so here’s an example what I’ve designed in the past using out-of-the-box Avada. I have a photography portfolio page (archive or parent page). It will show teaser images (feature images for each individual/child portfolio page). When I click on the teaser for my Bali photography, the dedicated portfolio/project page for Bali comes up. In that page, I have a bunch of images. When one of those images are clicked, the full version will popup in a gallery lightbox (lightbox behaviour specified from my image settings).

    Here are two real-life implementations.

    #1
    Parent (portfolio archive page with teaser images of each project)
    https://marklchaves.com/photography/

    Child (individual portfolio page with lightbox gallery)
    https://marklchaves.com/portfolio-items/bali/

    #2 Note: sorry this site doesn’t have SSL. The site owner hasn’t got back to me yet.
    Parent (portfolio archive page with teaser images of each project)
    http://www.natocho.com/

    Child (individual portfolio page with lightbox gallery)
    http://www.natocho.com/portfolio-items/paintings/

    I hope that helps. Apologies in advance if I messed up along the way.

    shockmartin
    Participant
    Post count: 3

    Old topic, but I had the same problem. Here’s how to do it.

    Step 1: Go to Theme options -> Extra -> Featured Image Rollover -> settings as follows:

    • Image Rollover: On
    • Image Rollover Link Icon: Off
    • Image Rollover Zoom Icon: On
    • Image Rollover Title: Off
    • Image Rollover Categories: Off
    • Image Rollover Icon Circle: On

    I guess some of these can be “On” if you like. Test to see what suits you.

    Step 2: Go to Theme options -> Custom CSS -> Add .fusion-link-wrapper {display:none;}

    That’s it.
    Good luck,
    Martin

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.