0

Woocommerce と Wordpress を使用しています。クリックされたサムネイルに応じて、単一の製品ページのメイン画像を変更するスクリプトを実装しました。また、プレミアム プラグインを購入し、その 1 つの製品ページに動画を表示するように少し調整しました。

現在、ユーザーがサムネイルをクリックすると、クリックされているサムネイルに応じてメイン画像が変化します。サムネイルに動画が添付されている場合、メイン画像の代わりに動画が表示されます。私の問題は、誰かがビデオを見た後に別のサムネイルをクリックすると、そのメイン画像を元に戻すことができないことです.

これまでの私の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

After working with the developer of the original plugin I am using I got it resolved for what I was needing to accomplish -- This is the final piece of code that tied it all together. Thanks for the help guys.

$('.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 に答える