我正在使用jquery脚本在主产品图片框中显示产品缩略图。
jQuery(document).on('mousedown','.thumbnails .zoom', function(){
var photo_fullsize = jQuery(this).find('img').attr('src').replace('-100x100','');
jQuery('.woocommerce-main-image img').attr('src', photo_fullsize);
return false;
});
问题在于,如果我点击缩略图图像,它会在主产品图片框中打开,但也会在灯箱中打开。我如何从缩略图链接中删除灯箱?我根本不想要任何链接。我只想在主产品图片框中使用灯箱。
我在product-thumbnails.php中找到了以下代码:
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
但是如何更改它以便它只显示图像而不是链接?
谢谢!
答案 0 :(得分:1)
您可以通过删除除{0}}之外的所有<a href="">
标记并删除%s
来实现此目的。代码行将从:
$image_link, $image_class, $image_title,
到
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
编辑: 要删除灯箱,您可以执行以下操作之一:
更改强>
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image ), $attachment_id, $post->ID, $image_class );
到
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>', $image_link, $image_class, $image_title, $image ), $attachment_id, $post->ID, $image_class );
或强>
转到信息中心 - &gt; Woocommerce - &gt;设置 - &gt;一般 - &gt;脚本(在页面底部)并取消勾选&#34;启用Lightbox&#34;选项,但关闭该选项将关闭woocommerce中所有图像的灯箱。
执行上述任一操作将导致图像在新标签页中打开。
答案 1 :(得分:1)
我有时间找到一个关于如何删除LINKS但没有破坏将图片插入主图像区域的能力的答案,这与woocommerce目前的设置一致。
要删除链接,请首先确保已将product-thumbnails.php复制到您自己的主题,以防止覆盖更新。
其次,在该文件中,在第53行找到了这个
echo apply_filters(
'woocommerce_single_product_image_thumbnail_html',
sprintf(
'<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>',
esc_url( $props['url'] ),
esc_attr( $image_class ),
esc_attr( $props['caption'] ),
wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
),
$attachment_id,
$post->ID,
esc_attr( $image_class )
在该部分代码中,删除href =“%s”,然后删除esc_url($ props ['url']),用于:
echo apply_filters(
'woocommerce_single_product_image_thumbnail_html',
sprintf(
'<a class="%s" title="%s" data-rel="prettyPhoto[product-gallery]">%s</a>',
esc_attr( $image_class ),
esc_attr( $props['caption'] ),
wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
),
$attachment_id,
$post->ID,
esc_attr( $image_class )
完成工作。使用另一部分代码,我能够将鼠标悬停在拇指上,仍然将它们放在主图像区域中,而不会被点击。
答案 2 :(得分:0)
如果您只想删除灯箱,可以删除data-rel
属性,否则如果您不想要缩略图中的任何链接,可以将您的php页面更改为:
echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '%s', $image_title, $image ), $attachment_id, $post->ID, $image_class );
唯一的问题是如果你使用带有CSS代码的类,在这种情况下我认为你应该清空href值。