thumbnails as pat of gallery only – no overlay effect

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

This topic contains 5 replies, has 2 voices, and was last updated by  RavanH 1 year, 9 months ago.

  • 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

    RavanH
    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

    RavanH
    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

    RavanH
    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?

You must be logged in to reply to this topic.