Docs

[lmradmin]

I have changed portfolio to lightbox images using the guides on here, the issue is when lightbox opens there are no controls available to move to next picture or exit out, it just displays image with black bg.

[lmradmin]

This reply has been marked as private.

[Rupok]

Hi there,

As you are using for single items it’s not possible to have the gallery like lightbox since those are not connected to each other.

Thanks!

[lmradmin]

Is that a recent change? previously I use to setup portfolio page, then add items one by one to portfolio while selecting the category it belongs to. Is there an easier solution now?

[Joao]

Hi There,

Maybe there is a missunderstanding.

WOuld you mind to explain us how you setup >

I want it to work like this > http://www.uniqline.co.uk/portfolio/

So we can help you on

http://www.uniquepermanentcosmetics.co.uk/portfolio/

At the moment the images are not opening in a lightbox.

Thanks

[lmradmin]

Last time I opened this thread and followed the guidance…https://community.theme.co/forums/topic/portfolio-images-to-open-in-lightbox/

Yes, at the moment images are not opening in lightbox because when I activate the child theme which has the lightbox code in functions.php, the edit with cornerstone option does not load and throws the error “Uh oh…”. So I had to deactivate the child theme…

[Rue Nel]

Hello There,

Thanks for updating in! There is an error on the page. Please use this updated code in your child theme’s functions.php file

function custom_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-cropped-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry-cropped', NULL );
        }
      } else {
        if ( $fullwidth ) {
          $thumb = get_the_post_thumbnail( NULL, 'entry-fullwidth', NULL );
        } else {
          $thumb = get_the_post_thumbnail( NULL, 'entry', NULL );
        }
      }
      
  
        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
          );            
      
      
     
      
      

    }

  }
  
  
  function x_featured_portfolio( $cropped = '' ) {

    $entry_id    = get_the_ID();
    $media       = get_post_meta( $entry_id, '_x_portfolio_media', true );
    $index_media = get_post_meta( $entry_id, '_x_portfolio_index_media', true );

    if ( is_singular() ) {
      switch ( $media ) {
        case 'Image' :
          x_featured_image();
          break;
        case 'Gallery' :
          x_featured_gallery();
          break;
        case 'Video' :
          x_featured_video( 'portfolio' );
          break;
      }
    } else {
      if ( $index_media == 'Media' ) {
        switch ( $media ) {
          case 'Image' :
            ( $cropped == 'cropped' ) ? custom_featured_image( 'cropped' ) : custom_featured_image();
            break;
          case 'Gallery' :
            x_featured_gallery();
            break;
          case 'Video' :
            x_featured_video( 'portfolio' );
            break;
        }
      } else {
        ( $cropped == 'cropped' ) ? custom_featured_image( 'cropped' ) : custom_featured_image();
      }
    }

  }

add_action('wp_footer', 'enqueue_lightbox_script');

function enqueue_lightbox_script() {

  echo '

    <script type="text/javascript" src="' . home_url() . '/wp-content/plugins/cornerstone/assets/dist/js/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>

  ';
}

Please let us know if this works out for you.

[lmradmin]

I added the code, now when I click the portfolio image it opens in lightbox and displays controls but it closes again within 1 second..

[Rad]

Hi there,

Something is retriggering the second click, if I turn off the click, it will also turn off the lightbox. Would you mind backing up your site? I’ll deactivate all other features and plugins while testing, then please provide your FTP login credentials as well.

Thanks!

[lmradmin]

There was some JS code in the customizer which I had added for the portfolio, have now removed that and it works perfectly! Thank you so much. Only issue is, when I activate child theme Cornerstone stops working

[Rad]

Hi there,

Please provide the latest login credentials and I’ll check what causing your cornerstone’s issue.

Thanks!

[lmradmin]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your login credentials.

Upon checking, I can see you have activated your child theme and that cornerstone works.

https://www.screencast.com/t/YmmO3WRhRvU

Can you confirm if you still needs help on this.

Thanks

[Author]

Posts