Question

我正在使用Woocommerce和Wordpress ..我实现了一个脚本，可以根据点击的缩略图更改单个产品页面上的主图像。我还购买了一个高级插件，并在该单个产品页面上显示了一些用于显示视频的内容。

目前，当用户点击缩略图时，主图像将根据被点击的缩略图而改变。如果缩略图附有视频，则视频将显示在主图像的位置。我的问题是，如果有人在观看视频后点击另一个缩略图，我就无法将该主图像带回来。

到目前为止，这是我的JS：

(function( $ ){
 $(document).ready(function(){
   $('*[data-videolink=""]').removeAttr('data-videolink');


   if($('a[data-videolink]').length > 0){
   var video_code = $('.images a[data-videolink]:first').data('videolink');
  //$('.images a.woocommerce-main-image').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');

  $('.thumbnails .zoom').click(function(e){
    e.preventDefault();
    var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
    $('.images img:first').attr('src',photo_fullsize);
  });


  $('a[data-videolink]').click(function(e){
  e.preventDefault();
   video_code = $(this).data('videolink');
  //$('.images a[data-videolink]:first').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');
  $('.images a.woocommerce-main-image').html('<iframe src ="'+ video_code +'" width="500" height="300" frameborder="no"></iframe>');

  $('.thumbnails .thumb-img').click(function(e){
    e.preventDefault();
    var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
    $('.images a.woocommerce-main-image').html('<img width="800" height="600" src="http://my-website.com/wp-content/uploads/2013/09/my-main-image-800x600.jpg" class="main-img wp-post-image">');
  });

  $('.thumbnails .zoom').click(function(e){
    e.preventDefault();
    var photo_fullsize = $(this).find('img').attr('src').replace('-100x75','');
    //$('.images img:first').attr('src',photo_fullsize);
  });
});

 };


 });
})(jQuery);

这就是页面上标记的样子：

<div class="images">

    <a href="http://my-website.com/wp-content/uploads/2013/09/Chinese_6Pak_Gift_Set.jpg" itemprop="image" class="woocommerce-main-image zoom" rel="prettyPhoto[product-gallery]"><img width="800" height="600" src="http://my-website.com/wp-content/uploads/2013/09/Main-Image-1.jpg" class="main-img wp-post-image" ></a>

        <div class="thumbnails">
            <a href="http://my-website.com/wp-content/uploads/2013/09/Thumb-1.jpg" class="zoom thumb-img first"  rel="prettyPhoto[product-gallery]"><img width="100" height="75" src="http://my-website.com/wp-content/uploads/2013/09/Thumb-1.jpg" class="attachment-shop_thumbnail"> </a>
            <a href="http://my-website.com/wp-content/uploads/2013/09/Thumb-2.jpg" class="zoom thumb-img" title="Spanish_6Pak_Gift_Set" rel="prettyPhoto[product-gallery]"><img width="100" height="75" src="Thumb-2.jpg" class="attachment-shop_thumbnail"> </a>

            <a href="http://my-website.com/wp-content/uploads/2013/09/Video-Thumb-3.png" class="zoom video first" data-videolink="//player.vimeo.com/video/74934952?title=0&amp;byline=0&amp;portrait=0" rel="prettyPhoto[product-gallery]"><img width="100" height="75" src="http://my-website.com/wp-content/uploads/2013/09/Video-Thumb-3.png" class="attachment-shop_thumbnail" /></a>
        </div>

</div>

我太近了！你可以看到我已经硬编码了一个主要图像，在观看视频并点击另一个缩略图后被带回来，这显然不会起作用，所以我可以做什么来重新填充主图像的主图像正在点击的缩略图。

Answer 1

在与我使用的原始插件的开发人员合作之后，我已经解决了我需要完成的事情 - 这是将它们捆绑在一起的最后一段代码。谢谢你的帮助。

$('.thumbnails a').click(function(e){
  e.preventDefault();
   video_code = $(this).data('videolink');
   var image_src = $(this).attr('href');
    if(video_code != null){
  $('.images a:first').html('<iframe src ="'+ video_code +'" width="420" height="315" frameborder="no"></iframe>');
  }else{
    $('.images a:first').html('<img width="800" height="600" class="main-img wp-post-image" src="'+ image_src  +'" />');
  }
});

如何为Woocommerce主产品图片加载视频

1 个答案: