从产品说明页面隐藏第一个缩略图

时间:2013-07-14 07:34:11

标签: javascript jquery wordpress woocommerce

我正在尝试隐藏产品说明页面中的第一个图片缩略图

页面链接为http://www.elementsmart.com/product/designer-brass-wooden-box-2/

我写的javascript代码是

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.thumbnails a.yith_magnifier_gallery:first').hide();
jQuery('.thumbnails a.yith_magnifier_gallery:eq(1)').trigger('click');
});
</script> 

但它不起作用....有人能指出我正确的方向吗?

放大镜的PHP代码是

<?php

global $post, $product, $woocommerce;     

$columns = apply_filters( 'woocommerce_product_thumbnails_columns', get_option('yith_wcmg_slider_items',floor( yit_shop_single_w() / ( yit_shop_thumbnail_w() + 18 ) )) );  

$attachment_ids = $product->get_gallery_attachment_ids();

// add featured image
/*if ( ! empty( $attachment_ids ) ) array_unshift( $attachment_ids, get_post_thumbnail_id() );

$enable_slider = (bool) ( get_option('yith_wcmg_enableslider') == 'yes' && count(  $attachment_ids ) > $columns );

if ( empty( $attachment_ids ) ) return;*/
?>
<div class="thumbnails<?php echo $enable_slider ? ' slider' : ' noslider' ?>"><?php

echo '<ul class="yith_magnifier_gallery">';


$loop = 0;

foreach ( $attachment_ids as $attachment_id ) {

    $classes = array();

    if ( $loop == 0 || $loop % $columns == 0 )
        $classes[] = 'first';

    if ( ( $loop + 1 ) % $columns == 0 )
        $classes[] = 'last';

    $attachment_url = wp_get_attachment_url( $attachment_id );

    if ( ! $attachment_url )
        continue;

    list( $thumbnail_url, $thumbnail_width, $thumbnail_height ) = yit_image( "id=$attachment_id&size=shop_single&output=array" );
    list( $magnifier_url, $magnifier_width, $magnifier_height ) = yit_image( "id=$attachment_id&size=shop_magnifier&output=array" );

    printf( '<li><a href="%s" title="%s" rel="thumbnails" class="%s" data-small="%s">%s</a></li>', yit_image( 'size=shop_magnifier&output=url&id=' . $attachment_id, false ), esc_attr( '' ), implode(' ', $classes), yit_image( 'size=shop_single&output=url&id=' . $attachment_id, false ), yit_image( 'size=shop_thumbnail&id=' . $attachment_id, false ) );

    $loop++;

}

echo '</ul>';
    ?>

    <?php if ( $enable_slider ) : ?>
    <div id="slider-prev"></div>
    <div id="slider-next"></div>
    <?php endif; ?>
    </div>

产品缩略图的代码是

<?php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $post, $woocommerce, $product;
?>
<div class="thumbnails nomagnifier"><?php
$attachments = $product->get_gallery_attachment_ids();

if ($attachments) {

    $loop = 0;
    $columns = apply_filters( 'woocommerce_product_thumbnails_columns', floor( yit_shop_single_w() / yit_shop_thumbnail_w() ) );

    foreach ( $attachments as $attachment_id ) {
        $attachment = get_post( $attachment_id );

        if ( get_post_meta( $attachment_id, '_woocommerce_exclude_image', true ) == 1 )
            continue;

        $classes = array( 'zoom' );

        if ( $loop == 0 || $loop % $columns == 0 )
            $classes[] = 'first';

        if ( ( $loop + 1 ) % $columns == 0 )
            $classes[] = 'last';

        printf( '<a href="%s" title="%s" rel="prettyPhoto[product-gallery]" class="%s">%s</a>', wp_get_attachment_url( $attachment->ID ), esc_attr( $attachment->post_title ), implode(' ', $classes), yit_image( "id=$attachment->ID&size=" . apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), false ) );

        $loop++;

    }

}
?></div>

2 个答案:

答案 0 :(得分:3)

这可能会成功

$('.yith_magnifier_gallery li:first-child').remove()

$('.yith_magnifier_gallery li:first-child').hide()

答案 1 :(得分:1)

您可以使用.eq()功能。 DEMO http://jsfiddle.net/yeyene/9HWPE/

$(document).ready(function() {
    $('.thumbnails yith_magnifier_gallery li').eq(0).remove();
    //$('.thumbnails a.yith_magnifier_gallery:eq(1)').trigger('click');
});