thumbnails as pat of gallery only – no overlay effect

Forums Easy FancyBox Pro thumbnails as pat of gallery only – no overlay effect

Viewing 5 reply threads
  • Author
    Posts
    • #5404
      Brendan Dolan
      Participant

      I’m have a grid of thumbnail images below a large main image, and using jQuery when you click the thumbnail it replaces the current main image.

      Is it possible for the main image and all thumbnails be part of the Fancybox ‘rel’ group so that clicking the main image triggers the overlay effect and you can navigate left and right through the group, but not have the thumbnails trigger the overlay effect, rather use my jQuery image swap?

    • #5405
      Rolf
      Keymaster

      Hi Brendan, it depends on the plugin or theme you are using to create that gallery and what’s available in the source code. And you’d probably have to change the source output to make it work…

      Can you share a link?

    • #5409
      Brendan Dolan
      Participant

      Hi Ravan, I can’t send you a link I’m afraid as I’m developing the site locally.

      I’m creating the theme myself, so I can make any changes necessary – what do I need to do?

    • #5410
      Rolf
      Keymaster

      Hmmm… can you post a sample of the output source code of your thumbnail grid thing? (use the CODE button in the editor)

    • #5411
      Brendan Dolan
      Participant

      Sure, this is the loop for the grid of images:

      echo '<ul class="productthumbs row">';
      
      if ( $attachment_ids ) {
      	$columns 	= apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
      	?>
      	
      			<?php
      		
      				foreach ( $attachment_ids as $attachment_id ) {
      					
      					echo '<li class="col-xs-6 col-md-4">';
      						echo '<div class="holder">';
      	
      							$classes = array( 'swapper','fancybox' );
      				
      							$image_link = wp_get_attachment_url( $attachment_id );
      				
      							if ( ! $image_link )
      								continue;
      				
      							$image       = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ) );
      							$image_class = esc_attr( implode( ' ', $classes ) );
      							$image_title = esc_attr( get_the_title( $attachment_id ) );
      				
      							echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" rel="prodgroup">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
      				
      						echo '</div>';
      					echo '</li>';
      
      				}
      		
      			?>
      	
      	<?php
      } ?>
      </ul>

      This is the code for the main image:

      	<?php
      		if ( has_post_thumbnail() ) {
      
      			$image_title 	= esc_attr( get_the_title( get_post_thumbnail_id() ) );
      			$image_caption 	= get_post( get_post_thumbnail_id() )->post_excerpt;
      			$image_link  	= wp_get_attachment_url( get_post_thumbnail_id() );
      			$image       	= get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
      				'title'	=> $image_title,
      				'alt'	=> $image_title
      				) );
      
      			$attachment_count = count( $product->get_gallery_attachment_ids() );
      
      			if ( $attachment_count > 0 ) {
      				$gallery = '[product-gallery]';
      			} else {
      				$gallery = '';
      			}
      
      			echo '<div class="mainimage">';
      			echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" rel="prodgroup" itemprop="image" class="woocommerce-main-image zoom fancybox" title="%s" >%s</a>', $image_link, $image_caption, $image ), $post->ID );
      
      			echo '</div>';
      			
      		} else {
      
      			echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
      
      		}
      	?>
      
    • #5412
      Rolf
      Keymaster

      OK so it looks like all image links already have a common rel="prodgroup" attributed. They should therefore all belong to one gallery by default.

      Try unsetting the Auto-gallery option on Settings > Media. Then click the main image. It should open in FancyBox and you should be able to browse through to the next images with the gallery arrow icons.

      Is that not the case?

Viewing 5 reply threads
  • You must be logged in to reply to this topic.