Docs

[Adwin L]

Hi there,

I am currently following instructions from post https://community.theme.co/forums/topic/how-to-open-a-portfolio-item-in-a-lightbox/#post-135879 – comments are closed now. I am running into some trouble, im not sure if it is due to the fact that the lightbox code is pulling from X shortcode, and we are now on cornerstone. I tried using the cornerstone version later on in the thread and still nothing.

It is working for me currently by not opening the single portfolio pages, however – it is opening the full image in a new tab and not displaying as lightbox on the main page.

Could you please send me some direction to make this lightbox work on my portfolio pages. *Note – I have many portfolio pages organized by category so any code will need to include them all, not using a page ID :)*

Thank you!!

[Adwin L]

This reply has been marked as private.

[Adwin L]

This reply has been marked as private.

[Paul R]

Hi Adwin,

Your site is currently under construction mode.

Please provide us your wordpress admin login as well.

Don’t forget to set your reply as private.

Thanks

[Adwin L]

This reply has been marked as private.

[Jade]

Hi Adwin,

Please try to backup then remove the code you have added then add this code in the child theme’s functions.php file:

// Liking Portfolio Items to Featured Image URL to Open Them in a Lightbox
// =============================================================================

add_filter( 'post_type_link', 'x_remap_portfolio_to_page', 10, 4);
function x_remap_portfolio_to_page($post_link, $post, $leavename, $sample) {

  if ( 'x-portfolio' == $post->post_type ) {
    return $image_link = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
  }

  return $post_link;
}

add_action('wp_footer', 'enqueue_lightbox_script');
function enqueue_lightbox_script() {
  echo '
    <script type="text/javascript" src="' . home_url() . '/wp-content/plugins/cornerstone/assets/js/dist/site/vendor-ilightbox.min.js"></script>
    <script>jQuery(document).ready(function($) {
       $(\'.page-template-template-layout-portfolio .entry-featured .entry-thumb\').click(function(e) {
          e.preventDefault();
       });
    });
    jQuery(document).ready(function(){jQuery(".x-portfolio .entry-title a, .x-portfolio .entry-featured a").iLightBox({skin: "light",linkId: "gallery-image",overlay: {opacity: 0.875,blur: true},styles: {prevScale: 0.75,prevOpacity: 0.75,nextScale: 0.75,nextOpacity: 0.75},path: "horizontal",controls: {thumbnail: false}});});
  </script>';
}

Hope this helps.

[Author]

Posts