Woocommerce产品图像翻转悬停

时间:2016-02-04 20:29:48

标签: javascript php jquery wordpress woocommerce

我正在使用一个名为X theme的wordpress主题。我的领导开发人员保释,此功能无效。它的目的是当发生mousein / out事件时翻转到该产品库中的第一个图像。查询正在查找不存在或不符合查询条件的正在进行的帖子ID。所以相反,我希望它只是让图像更好的方式,因为这不能一致地工作。

function x_woocommerce_shop_thumbnail() {
              GLOBAL $product;

              $stack            = x_get_stack();
              $stack_thumb      = 'entry-full-' . $stack;
              $stack_shop_thumb = $stack_thumb;
              $id               = get_the_ID();
              $rating           = $product->get_rating_html();
              woocommerce_show_product_sale_flash();
              echo '<div class="entry-featured">';
                echo '<a id="id'.$id.'" value="'.$id.'" href="'.get_the_permalink().'">';
                  echo get_the_post_thumbnail( $id , $stack_shop_thumb ); 
                  global $wpdb;
                  foreach($wpdb->get_results('SELECT ID FROM wp_posts WHERE post_parent = "'.$id.'" AND post_type = "attachment" ORDER BY ID DESC LIMIT 1') as $key => $row){
                    $file = '_wp_attached_file';
                    $childId = $row->ID;
                    global $wpdb;
                    $query = 'SELECT meta_value FROM wp_postmeta WHERE meta_key = "'.$file.'" AND post_id = "'.$childId.'"';
                    $otherImage = $wpdb->get_var($query);
                    if($otherImage != ''){
                        echo '<img id="otherImage" src="/wp-content/uploads/'.$otherImage.'"/>';
                    }
                  }
                  if ( ! empty( $rating ) ) {
                    echo '<div class="star-rating-container aggregate">' . $rating . '</div>';
                  }
                echo '</a>';
              echo "</div>";
             }

java&amp;用于翻转的jQuery(在主题的页脚中运行)

    //Product Hover Image Switch

    jQuery(document).ready(function() {

        jQuery('[id^=id]').mouseover(function(){

            if(jQuery(this).children('#otherImage').attr('src') != ''){

                jQuery(this).fadeTo(200, 0, function(){

                    var source = jQuery(this).children('#otherImage').attr('src'),

                        original = jQuery(this).children('.wp-post-image').attr('srcset');

                    jQuery(this).children('.wp-post-image').attr('srcset', source);

                    jQuery(this).children('#otherImage').attr('src', original);

                }).fadeTo(200, 1);

            }

        });

        jQuery('[id^=id]').mouseout(function(){

            if(jQuery(this).children('#otherImage').attr('src') != ''){

                jQuery(this).fadeTo(200, 0, function(){

                    var source = jQuery(this).children('#otherImage').attr('src'),

                        original = jQuery(this).children('.wp-post-image').attr('srcset');

                    jQuery(this).children('.wp-post-image').attr('srcset', source);

                    jQuery(this).children('#otherImage').attr('src', original);

                }).fadeTo(200, 1);
            }
        });
    });

0 个答案:

没有答案