Fullwidth projects open in lightbox

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

I recently posted a tweak on how to make project images unclickable so they can be used like a gallery. But recently someone requested a tweak that would make the images open in a lightbox instead of going to the project post. Seemed like a very useful tweak so here it is (taken from ET’s forum):

This tweak is no longer being maintained in its current form. It is now available as a plugin! Check out the demo:

http://www.diviplugins.com

PHP

The first thing you’ll want to do is create a new file in your child theme folder and name it functions.php

Your new file location should be this /wp-content/themes/Divi-child/functions.php

Now just copy and paste the following code into this new file:

Line 60 is the only change. We’re replacing the permalink of the project post with the src of the image and adding the lightbox class, which makes it open in the lightbox.

This tweak is for the fullwidth portfolio module. If you want to apply the same technique to the grid layouts, just overwrite that function and replace the same lines of code with line 60. For a more detailed tutorial on how to replace any Divi module, check out this post.

    25 Comments

  1. Hi,

    Thanks you so much for this tweak, I needed it !

    Cheers,

    Bastien

    Bastien

    June 6, 2015

  2. Hey, this is great! Thanks a lot for sharing. I am however after a solution to open the project page in lightbox. All of my projects consist of one slideshow of pictures that I want to display in a lightbox when the relevant picture is clicked in the portfolio. I hope this makes sense. Would it be possible in any way?

    Thanks
    Aniko

    Aniko

    June 13, 2015

    • Thanks Aniko. So you basically want to do the same thing as above, except you want to open the entire slideshow for that project. Right?

      Brad (admin)

      June 15, 2015

      • Hi,
        I would like to do exactly the same.
        When someone click on one of the projects it opens in the lightbox and allow the possibility to press a button for the next or previous project photo.
        Thanks!

        Bruno

        July 6, 2015

      • BTW, I don’t would like to create a child theme I prefer to use the original one.
        Thanks

        Bruno

        July 7, 2015

  3. Have tested your code on the latest Divi theme version but it doesn’t seem to work. Am i doing something wrong?

    Links still go to the post page. However, I just need the images.

    Alex

    July 19, 2015

  4. Hello everyone. Yes, the new version of Divi has broken a lot of my tweaks including this one. In the future, I plan to release tweaks as plugins so they are not as vulnerable to breaking on theme updates. Stay tuned!

    Brad (admin)

    July 22, 2015

  5. I put this in my child them functions php and got this error.

    Parse error: syntax error, unexpected ‘<' in /home/bcboxing/public_html/mountainmassageheber.com/wp-content/themes/Divi-child-01/functions.php on line 14

    Any idea? on what I need to do to fix this…I really like the idea of the pictures opening up in a lightbox.

    Thank you – Sheila

    sheila atwood

    July 26, 2015

    • Hi Sheila,

      If I had to guess, maybe you already had something in your child theme’s functions.php file. This file should start with . Copy the code above but leave those tags out. And past it just above the closing ?> tag. If you need help getting back into your site to do this, send me an email and I’ll get it back to a working state for you.

      Brad (admin)

      July 28, 2015

  6. Thanks for this tweak. How would I do it from a regular, non-full-width, project gallery?

    Jonathan Dolan

    July 28, 2015

  7. Also, do you have any leads on being able to create a sortable image gallery? I want it to basically function in the same way as the Project Gallery except just be an Image Gallery that you can sort based on category.

    Jonathan Dolan

    July 28, 2015

  8. Nice one Really need this.
    Does this tweak work with divi 2.5?
    And that plugin tou mention, how is that coming along?

    Rastamus

    September 16, 2015

    • It does not work with 2.4+. I just released the plugin that has this option built-in. The plugins primary function is to allow you to use the Divi portfolio layouts with posts instead of projects. And gives you the option to open the images in a lightbox. It only works with posts right now. Check it out! http://www.diviplugins.com/portfolio-posts-pro-plugin/

      Brad (admin)

      September 29, 2015

  9. Hi,
    Bruno wrote above:
    I would like to do exactly the same.
    When someone click on one of the projects it opens in the lightbox and allow the possibility to press a button for the next or previous project photo.
    Thanks!

    I desperately need this too. click on a project and a light box opens to the first of several images that you can click through in the lightbox and then close that lightbox and click on the next project and see all 20 images from that one etc.

    wendy

    November 13, 2015

  10. Hi there,

    is it possible to remove icons, hover and text on picture but i want to let visible the title of portfolio carusel module?

    Thanks.

    Anton Drozda

    July 20, 2016

  11. Hello,

    How is the function for grid layout called ?

    Thanks

    macbroadcast

    September 14, 2016

  12. Hi
    I do this in DIVI 2.7.9
    Step by step…
    1. Edit file wp-content/themes/Divi/includes/builder/main-modules.php
    2. Comment line 15697 <!– <a href="”> –>
    3. Add this line below: <a href="” rel=”lightbox-pisak”>
    4. Save file and upload to server
    * lightbox-pisak is my name for rel atrib. You can set this in settings os fightbox module
    5. Install lightbox module Responsive Lightbox by dFactory and set Your rel
    6. enjoy Your beautiful full width portfolio grid

    Pisak

    October 25, 2016

    • How can I add code to reply?

      Pisak

      October 25, 2016

  13. Whooop!! Just came across Elegant Tweaks through this post. Definitely bookmarking this site! I’m always looking for ways to modify and tweak my Divi designs! 😀

    Bonita

    November 17, 2016

  14. Hi, I was really looking for something like this…did the tutorial…things didn’t work so I added the class name – I didn’t see that tidbit in the instructions.

    Nevertheless, it’s working, but I get a – Can’t locate image – in lightbox. Is there a path in the code that I need to add localhost to? I’m developing on WAMP.

    Edward L Brown

    June 28, 2017

  15. I think this is not working anymore 🙁

    Fra

    June 29, 2017

  16. I want the grid filterable portfolio to open in lightbox. Am lost and i need specific code…

    David Mensah

    December 3, 2017

  17. Hello! I need to open portfolio grid img in lightbox, not in post page. I read the comments and there is no solution that can solve my problem, please can you help me! I understand that I should make something with this line…

    <a href="post_permalink ); ?>” title=””>

    this solution doesn’t work: <a href="” class=”et_pb_lightbox_image”>

    Alex

    December 13, 2017

Post a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This