分享外贸站z158产品详情页增加视频效果

修改文件为：view_product.htm

修改如下：

找到代码：

       <div class="product-view"> {zan:volist name="$zan.field.image_list" limit='0,1'}

            <div class="product-image"> <a class="cloud-zoom" id="zoom1" data-zoom="adjustX:0, adjustY:0" href="{$field.image_url}" title="{$field.intro}"> <img src="{$field.image_url}" itemprop="image" title="{$field.intro}" alt="{$field.intro}" style="width:100%"/></a> </div>

            {/zan:volist}

            <div  style="position:relative; width:100%;">

              <div class="image-additional">

                <ul class="swiper-wrapper">

                  {zan:volist name="$zan.field.image_list"}

                  <li class="swiper-slide image-item {zan:eq name='$i' value='1'}current{/zan:eq}"> <a class="cloud-zoom-gallery item"  href="{$field.image_url}" data-zoom="useZoom:zoom1, smallImage:{$field.image_url}" title="{$field.intro}"><img src="{$field.image_url}" title="{$field.intro}" alt="{$field.intro}"/></a> </li>

                  {/zan:volist}

                </ul>

                <div class="swiper-pagination swiper-pagination-white"></div>

              </div>

              <div class="swiper-button-next swiper-button-white"></div>

              <div class="swiper-button-prev swiper-button-white"></div>

            </div>

          </div>

替换成以下代码：

<div class="product-view"> 

    <div class="product-image"> 

        <div id="mainContent" style="width:100%; height:100%; position:relative; min-height:300px; overflow:hidden;">

            <div id="videoCoverWrap" style="width:100%; height:100%; position:relative; cursor:pointer; z-index:1; display:block;">

                {zan:volist name="$zan.field.image_list" loop='1' id="field"} 

                    <img src="{$field.image_url}" style="width:100%; height:100%; object-fit:contain;" alt="视频封面">

                {/zan:volist}

                <div id="playBtn" style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:80px; height:80px; background:rgba(0,0,0,0.6); border-radius:50%; display:flex; align-items:center; justify-content:center;">

                    <div style="width:0; height:0; border-top:15px solid transparent; border-bottom:15px solid transparent; border-left:25px solid #fff; margin-left:5px;"></div>

                </div>

            </div>

            {zan:notempty name="$eyou.field.video_paths"}

            <video id="productVideo" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; background:#fff; object-fit:contain;" controls>

                <source src="{$eyou.field.video_paths}" type="video/mp4">

                您的浏览器不支持视频播放，请更新浏览器。

            </video>

            {/zan:notempty}

            <div id="imageZoomWrap" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;"></div>

        </div>

    </div>

    <div style="position:relative; width:100%; margin-top:10px;">

        <div class="image-additional">

            <ul class="swiper-wrapper">

                {zan:volist name="$zan.field.image_list" id="field"}

                <li class="swiper-slide image-item {zan:eq name='$i' value='1'}current{/zan:eq}"> 

                    <a class="cloud-zoom-gallery item thumbnail-link" 

                       href="{$field.image_url}" 

                       data-zoom="useZoom:zoom1, smallImage:{$field.image_url}" 

                       title="{$field.intro}">

                        <img onclick="switchContent(this, '{$field.image_url}')" 

                             src="{$field.image_url}" 

                             alt="{$field.intro}"

                             {zan:if condition='$i == 1 && !empty($eyou.field.video_paths)'}data-type="video"{zan:else /}data-type="image"{/zan:if} />

                    </a>

                </li>

                {/zan:volist}

            </ul>

            <div class="swiper-pagination swiper-pagination-white"></div>

        </div>

        <div class="swiper-button-next swiper-button-white"></div>

        <div class="swiper-button-prev swiper-button-white"></div>

    </div>

</div>

<script type="text/javascript">

$(function(){

    $('#videoCoverWrap, #playBtn').click(function() {

        var $video = $('#productVideo');

        if ($video.length) { 

            $('#videoCoverWrap').hide();

            $('#imageZoomWrap').hide();

            $video.show();

            $video[0].play().catch(function(error) {

                alert('视频加载失败，请检查网络后重试');

                $('#videoCoverWrap').show();

                $video.hide();

            });

        }

    });

    $('#productVideo').on('ended', function() {

        $(this).hide();

        $('#videoCoverWrap').show();

    });

    $('.thumbnail-link').click(function(e) {

        e.preventDefault();

        e.stopPropagation();

    });

    {zan:volist name="$zan.field.image_list" loop='1' id="field"}

    if($('.image-item:first-child img').attr('data-type') !== 'video'){

        initCloudZoom("{$field.image_url}");

        $('#videoCoverWrap').hide();

    }

    {/zan:volist}

});

function initCloudZoom(imgSrc) {

    var $zoomWrap = $('#imageZoomWrap');

    $zoomWrap.empty().show();

    var zoomHtml = `

        <a id="zoom1" class="cloud-zoom" 

           href="${imgSrc}" 

           data-zoom="adjustX:0, adjustY:0, tint:false, softFocus:false">

            <img src="${imgSrc}" style="width:100%; height:100%; object-fit:contain;" alt="产品图">

        </a>

    `;

    $zoomWrap.html(zoomHtml);

    if (typeof $.fn.CloudZoom !== 'undefined') {

        $("#zoom1").CloudZoom();

    } else {

        console.warn('CloudZoom插件未加载，请检查插件路径');

        $zoomWrap.html(`<img src="${imgSrc}" style="width:100%; height:100%; object-fit:contain;" alt="产品图">`);

    }

}

function switchContent(imgElement, imgSrc) {

    var $img = $(imgElement);

    var dataType = $img.attr('data-type');

    var $video = $('#productVideo');

    $video.hide();

    $('#videoCoverWrap').hide();

    $('.image-item').removeClass('current');

    $img.closest('.image-item').addClass('current');

    if (dataType === 'video') {

        $('#videoCoverWrap').show();

        $('#imageZoomWrap').hide();

        $('#videoCoverWrap img').attr('src', imgSrc);

    } else {

        initCloudZoom(imgSrc);

        $img.closest('.thumbnail-link').trigger('click');

    }

}

</script>

模板地址：https://www.zancms.com/moban/158.html