Please refer to this thread http://theme.co/x/member/forums/topic/make-portfolio-items-work-like-a-lightbox-gallery/#post-111428

Hope this helps!

Thank you for writing in!

Instead of using above provided code, please add following in your child theme’s functions.php file:

// Featured Image - Open Index Posts Image in a lightbox - RENEW
// =============================================================================

if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack, NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          if ( is_post_type_archive('x-portfolio') ) {
            printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
              esc_url( wp_get_attachment_url( get_post_thumbnail_id($post->ID) ) ),
              esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
              $thumb
            );
          } else {
            printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
              esc_url( get_permalink() ),
              esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
              $thumb
            );
          }
          break;
      }

    }

  }
endif;

// Adding Lightbox jQuery code.

add_action('wp_footer', 'enqueue_lightbox_script');

function enqueue_lightbox_script() {

  echo '

    <script type="text/javascript" src="' . home_url() . '/wp-content/plugins/x-shortcodes/js/dist/site/vendor-ilightbox.min.js"></script>
    <script>
      jQuery(document).ready(function(){jQuery(".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}});});
    </script>

  ';
}

After that, copy the file wp-content/themes/x/framework/views/renew/content-portfolio.php in your child theme’s folder /framework/views/renew/, open the copied file in a text editor and replace entire code with following:

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT-PORTFOLIO.PHP
// -----------------------------------------------------------------------------
// Portfolio post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

  <?php if ( ! x_is_portfolio_item() ) : ?>

    <div class="entry-featured">
      <?php x_portfolio_item_featured_content(); ?>
      <div class="entry-cover">
        <div class="entry-cover-content">
          <span><?php echo get_post_meta( get_the_ID(), '_x_portfolio_media', true ); ?></span>
          <h2 class="entry-title entry-title-portfolio">
            <a href="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ) ?>" class="entry-title-a" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
          </h2>
          <span><?php echo get_the_date( 'm.d.y' ); ?></span>
        </div>
      </div>
    </div>

  <?php endif; ?>

  <div class="entry-wrap cf">

    <?php if ( is_singular() ) : ?>

      <div class="entry-info">
        <div class="entry-featured">
          <?php x_featured_portfolio( 'cropped' ); ?>
        </div>
        <header class="entry-header">
          <h1 class="entry-title entry-title-portfolio"><?php the_title(); ?></h1>
          <?php x_renew_entry_meta(); ?>
        </header>
        <?php x_get_view( 'global', '_content', 'the-content' ); ?>
      </div>
      <div class="entry-extra">
        <?php x_portfolio_item_tags(); ?>
        <?php x_portfolio_item_project_link(); ?>
        <?php x_portfolio_item_social(); ?>
      </div>

    <?php endif; ?>

  </div>
</article>

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer, or look into service like Elto or WerkPress. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

Hope this helps. 🙂

Thank you.

I’ve added the following code under Custom > JavaScript in the Customizer in your website:

jQuery(document).ready(function(){jQuery(".entry-title-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}});});

Hope this helps. 🙂

Thank you.

Upon checking the news page, it seems the jQuery script is causing the images to open in a lighbox, if you disable the JavaScript everything starts working fine. Replace the child’s theme function.php file code with this one:

<?php
// Featured Image - Open Index Posts Image in a lightbox - RENEW
// =============================================================================

if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      if ( $cropped == 'cropped' ) {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack . '-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-' . $stack, NULL );
        }
      }

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          if ( is_post_type_archive('x-portfolio') ) {
            printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
              esc_url( wp_get_attachment_url( get_post_thumbnail_id($post->ID) ) ),
              esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
              $thumb
            );
          } else {
            printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
              esc_url( get_permalink() ),
              esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
              $thumb
            );
          }
          break;
      }

    }

  }
endif;

// Adding Lightbox jQuery code.

add_action('wp_footer', 'enqueue_lightbox_script');

function enqueue_lightbox_script() {

  echo '

    <script type="text/javascript" src="' . home_url() . '/wp-content/plugins/x-shortcodes/js/dist/site/vendor-ilightbox.min.js"></script>
    <script>
      jQuery(document).ready(function(){jQuery(".page-id-1884 .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}});});
    </script>

  ';
}
?>

Let us know how this goes!