Docs

[Rad]

Hi Jasmin,

Remove this from the given code,

<script type="text/javascript" src="' . home_url() . '/wp-content/plugins/x-shortcodes/js/dist/site/vendor-ilightbox.min.js"></script>

Then follow this http://theme.co/x/member/forums/topic/portfolio-and-blog-help/page/2/#post-37503 on #2 Answer

Add this code at your child theme’s functions.php

function add_lightbox_script() {
      wp_enqueue_script( 'vendor-ilightbox' );
}
add_action( 'wp_enqueue_scripts', 'add_lightbox_script', 9999 );

Cheers!

[jasmin4u]

Thank you 🙂 Now it works on both pages…
I just have this code snippet showing up at the bottom of my page now in the background:

jQuery(document).ready(function(){jQuery(“.page-template-template-layout-portfolio-php .entry-featured .entry-thumb”).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}});});

[jasmin4u]

Wihooo…I went through all steps again. I deleted one “<script>” too much…
now it works :))
super! Merci!!

[Christopher]

You’re welcome Jasmin.

[kellystudio]

Will this work in other stacks? e.g. Integrity? If not do you have the code for this please??

[Zeshan]

Hi there,

In that case, review this thread instead: https://theme.co/x/member/forums/topic/portfolio-lightbox-2/page/2/#post-200414

Cheers!

[rkistner]

Is there a way to have this just show the lightbox for a single image (i.e.: the one clicked) instead of the whole gallery? This works great for my site, except it always pulls all the links images on the portfolio page even when the categories are filtered.

[Rad]

Hi there,

That’s the limitation of that customization. Because lightbox will group images with same selectors, and portfolio items all have the same selector.

The solution could be adding unique selector for each of your portfolio item, but that will slow your site that much.

Thanks!

[kelleynunn]

This reply has been marked as private.

[Lely]

Hello Kelley,

Thanks for posting in and giving us your admin credentials. Please try the following code instead:

// 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-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.

[kelleynunn]

Hey, ThemeCo!

I just tried that bit of code at the base of my child theme’s functions.php file, and had some success in that the image opened outside of the classic portfolio view, but the image opened into a full screen image that I couldn’t navigate out of. Is there a way to get the image to open into a lightbox rather than this full screen mode?

Thank you!!

[Zeshan]

Hi there,

I’ve checked your site but I’m not seeing the provided code added in your child theme’s functions.php file. Would you mind confirming again? If you have removed the code, please add it back so we could take a closer look to the issue.

Thank you!

[kelleynunn]

ThemeCo,

Sorry! I did remove the code. I just put it back at the base of my child theme’s functions.php file so you can take a look.

Thank you so much for your help!

-Kelley

[Zeshan]

Hi Kelly,

Thanks for writing back!

It looks like only the selector used in the lightbox shortocde is incorrect. To fix this, please replace the last provided code with following:

// 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 .x-portfolio .entry-cover\').click(function(e) {
          e.preventDefault();
       });
    });
    jQuery(document).ready(function(){jQuery(".x-portfolio .entry-cover").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. 🙂

Thank you!

[kelleynunn]

Wow! You guys are absolutely fantastic! I can’t thank you enough for getting back to me so quickly about this issue, and providing such a great fix. I have to ask– is there any way to get the photo captions to show up in the lightbox mode?

Thank you!!

[Author]

Posts