0

我正在使用 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>

我是如此接近！如您所见，我已经硬编码了一个主图像，以便在查看视频并单击另一个缩略图后将其带回，这显然不起作用，所以我可以做些什么来用主图像重新填充该主图像正在单击的缩略图。

4

1 回答 1

0

在与我正在使用的原始插件的开发人员合作后，我解决了我需要完成的任务——这是将它们联系在一起的最后一段代码。谢谢你们的帮助。

$('.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  +'" />');
  }
});
于 2013-10-04T17:23:44.997 回答