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

【问题标题】：How to load a video in for Woocommerce main product image如何为 Woocommerce 主要产品图片加载视频
【发布时间】：2013-10-05 01:23:44
【问题描述】：

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

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

【问题讨论】：

你需要某种视频播放器来处理视频，类似于漂亮照片所做的。
抱歉，视频播放器是 vimeo -- 该插件在产品库上传中插入了一个自定义字段，用户可以在其中插入视频链接。
插件将其转换为 iframe 或其他播放视频的内容？这是什么插件？
@JacobRaccuia 该插件可在此处找到：codecanyon.net/item/… 是的，据我所知，该插件只是将其转换为灯箱中的 iframe，但我已尝试与作者联系，看看我是如何做到的可以绕过灯箱（可能只是删除插件 main.js 文件）我觉得我很接近，现在我只需要一种方法来让视频嵌入加载到主图像 div 中代替主图形.. 一直一整天都在工作，脑子都在炸
您可以将实际灯箱（ iframe ）的 HTML 与其周围环境粘贴在一起吗？也许我们可以用 jQuery 来定位它，捕获它的 html，然后将它输入回图像中。

标签： javascript wordpress woocommerce

【解决方案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  +'" />');
  }
});

【讨论】：