› Forums › Easy FancyBox Pro › thumbnails as pat of gallery only – no overlay effect
- This topic has 5 replies, 2 voices, and was last updated 7 years, 10 months ago by
Rolf.
-
AuthorPosts
-
-
29 July 2015 at 17:57 #5404
Brendan Dolan
ParticipantI’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?
-
29 July 2015 at 19:17 #5405
Rolf
KeymasterHi 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?
-
30 July 2015 at 11:50 #5409
Brendan Dolan
ParticipantHi 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?
-
30 July 2015 at 18:27 #5410
Rolf
KeymasterHmmm… can you post a sample of the output source code of your thumbnail grid thing? (use the CODE button in the editor)
-
31 July 2015 at 13:58 #5411
Brendan Dolan
ParticipantSure, 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 ); } ?>
-
1 August 2015 at 15:12 #5412
Rolf
KeymasterOK 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?
-
-
AuthorPosts
- You must be logged in to reply to this topic.