wordpress收费下载资源主题
模板兔

Shopify 产品页图片轮播支持视频

Shopify作为一个轻量级的电商托管系统,在外贸、跨境电商等领域里深受用户喜爱,你只需简单的几步设置,就能开通自己的网店。

一般的shopify主题里产品页面都会有图片轮播(类似某宝那样的产品图片介绍),但是不支持视频。那么我们就通过js来实现视频功能:

$(function(){

  $(".product-single__photo").each(function(){

    var alt = $(this).attr("alt");

    var videoContent = '';

    if (alt.indexOf("youtube") >= 0){

      videoContent = '<div class="video-container youtube">' + alt + '</div>';

    } else if (alt.indexOf("vimeo") >= 0) {

      videoContent = '<div class="video-container vimeo">' + alt + '</div>';

    }

    

    if(videoContent != ''){

      $(this).parent().html(videoContent);

      $(".video-container iframe").height($(".video-container").width()*9/16);

      $(".video-container embed").height($(".video-container").width()*9/16);

    }

  });

  

  $(".product-single__photo2").each(function(){

    var alt = $(this).attr("alt");

    var videoContent = '';

    if (alt.indexOf("youtube") >= 0){

      videoContent = '<div class="video-container2 youtube">' + alt + '</div>';

    } else if (alt.indexOf("vimeo") >= 0) {

      videoContent = '<div class="video-container2 vimeo">' + alt + '</div>';

    }

    

    if(videoContent != ''){

      $(this).parent().html(videoContent);

      $(".video-container2 iframe").height("400px");

      $(".video-container2 embed").height("400px");

    }

  });

  

});
以上具体的class以自己的主题为准。

Modia 自媒体 wordpress主题

猜你喜欢

  • 看来没你喜欢的~

0 条评论

定制
本人承接WordPress等系统建站仿站、二次开发、主题插件定制等
在线咨询
  • 请直接说明需求,勿问在否

在线咨询