Use Portfolio Plugin with a Lightbox

Hi,

I’ve purchased Sydney Pro and am very happy with it. I could do almost everything I wanted, only by configuration. But I have one little thing I didn’t found a solution yet.

I know that the “Project” type is used to generate the Portfolio on the front page and that it shows the features image of each project. When you click on an image, it opens the detail page of this project. I would like to have it much simpler: In my case, a project only contains a features image (and a title) and when the user clicks on the image on the portfolio, a Lightbox is opened showing the features image in full size. The detail page of a project should never be reached.

Is this somehow possible?

Thanks for the answer and best regards,
Kevin

Hello there,

Thank you for getting in touch.

I’m afraid that project lightbox feature is supported neither by the theme’s nor Sydney Portfolio plugin’s core at the moment.

As it’s considered as an advanced customisation, I’d recommend you to hire a freelancer at Codeable. Or if you have knowledge of jQuery, PHP, and WordPress development you could integrate jQuery lightbox library like Colorbox with Sydney Portfolio plugin.

Warmest regards,
Kharis

Hi Kharis,

thanks for the reply. Ok well, I think the easiest way is to rewrite the link to point to the image and add a plugin to open them in lightbox.

Thanks and regards,
Kevin

Dear Kevin,

You’re welcome.

Thank you for creating with our product.

Warmest regards,
Kharis

Hi Kevin,

I was able to successfully use the plug-in “Lightbox plus Colorbox” along with Sydney Portfolio. My first approach was the same as yours: To rewrite all project links to point to their featured images, and then to enable Auto-Lightbox Text Links in the Lightbox settings.

However, this created a new problem: Each image displayed twice.

I solved this by starting over. I disabled Auto-Lightbox Text Links (back to default), and deleted the custom project links. Then, I edited the Sydney Portfolio Plug-In. (If you’re not familiar with editing plug-ins, go to Plug-Ins -> Editor, and select Sydney Portfolio in the top right.) Here is what I replaced:

Before:

else :
                $output .= '<div class="project-item item isotope-item ' . $termsString . '"><a class="project-pop" href="' . get_the_permalink() . '"><div class="project-pop-inner"></div></a><a href="' . get_the_permalink() . '">' . get_the_post_thumbnail($post->ID,'sydney-mas-thumb') . '</a></div>';
            endif;

After:

else :
                $output .= '<div class="project-item item isotope-item ' . $termsString . '"><a class="project-pop" rel="lightbox[305]" href="' . wp_get_attachment_url( get_post_thumbnail_id($post->ID) ) . '"><div class="project-pop-inner"></div></a><a href="' . get_the_permalink() . '">' . get_the_post_thumbnail($post->ID,'sydney-mas-thumb') . '</a></div>';
            endif;

This will add the Lightbox attribute, and replace the URL with that of the featured image. I hope you find this useful!

Hello @tonytypes,

Thank you for sharing. We really appreciate it.

Regards,
Kharis

Hi Kevin and Karis,

I was wandering if this was still an option considering the latest updates of the theme.
I started working on the theme a bit hastely hoping that I could add a lightbox to the projects instead of this direct link.
I really need a gallery option for this work. Would you guys mind giving a beginner a bit of a hand?
much appreciated,

Pierre