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

目标修改文件：view_product.htm

找到：

  <div id="ceshi"> <img src="{$field.image_url}" jqimg="{$field.image_url}"/> </div>

        </div>

        {/zan:volist}

        <div id="spec-n5">

          <div id="spec-list">

            <ul class="list-h">

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

              <li>

                <p {zan:eq name='$i' value='1'}style="border: 1px solid rgb(0, 87, 184);"{/zan:eq}><img onclick="jQuery('.videoItem').hide();mybaidu.window.SetPause();" src="{$field.image_url}" alt="{$field.intro}" data-zoom-image="{$field.image_url}"></p>

              </li>

              {/zan:volist}

            </ul>

          </div>

        </div>

      </div>

      <script type=text/javascript>

                $(function(){

                   $("#ceshi").jqueryzoom({

                        xzoom:446,

                        yzoom:446,

                        offset:10,

                        position:"right",

                        preload:1,

                        lens:1

                    });

                    

                    $("#spec-list li").bind("mouSEOver",function(){

                        var src=$(this).children().children('img').attr("src");

                        $("#ceshi").CSS("width", "100%");

                        $("#ceshi").css("height", "100%");

                        $("#ceshi").css("position", "");

                        $("#spec-n1 img").eq(0).attr({

                            src:src.replace("\/n5\/","\/n1\/"),

                            jqimg:src.replace("\/n5\/","\/n0\/")

                        });

                        $("#spec-list li p").each(function(){

                            $(this).css({

                                "border":"1px solid #e5e5e5"

                            });

                            })

                        $(this).children('p').css({

                            "border":"1px solid #009b4c"

                        });

                    });

                })

            </script> 

替换以下代码：

          <div id="ceshi"> 

            <!-- Main content container that will switch between video and image -->

            <div id="mainContent" style="width:100%; height:100%;">

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

              <!-- Video placeholder with play button -->

              <div id="videoPlaceholder" style="width:100%; height:100%; position:relative; cursor:pointer;">

                    {zan:volist name="$zan.field.image_list" loop='1'} <img src="{$field.image_url}" style="width:100%; height:100%; object-fit:contain;"/>{/zan:volist}

                <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:80px; height:80px; background-color:rgba(0,0,0,0.5); 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 white;"></div>

                </div>

              </div>

              

              <!-- Video element - initially hidden -->

              <video id="productVideo" style="display:none; width:100%; height:100%;" controls>

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

                Your browser does not support the video tag.

              </video>

              {/zan:notempty}

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

              <!-- Image element - initially hidden but will be used for other thumbnails -->

              <img id="mainImage" src="{$field.image_url}" style="{zan:notempty name="$eyou.field.video_paths"}display:none;{/zan:notempty} width:100%; height:100%; object-fit:contain;" jqimg="{$field.image_url}"/> {/zan:volist}

            </div>

          </div>

        </div>

                <div id="spec-n5">

          <div id="spec-list">

            <ul class="list-h">

                       

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

        <li>

                <p {zan:eq name='$i' value='1'}{zan:notempty name="$eyou.field.video_paths"} style="border: 1px solid rgb(0, 87, 184);"{/zan:notempty}{/zan:eq} ><img onclick="showImageThumbnail(this);" src="{$field.image_url}" alt="{$field.intro}" data-zoom-image="{$field.image_url}" {zan:if condition='$i == 1 && !empty($eyou.field.video_paths)'}data-type="video"{zan:else /}data-type="image"{/zan:if} ></p>

              </li>

              {/zan:volist}

                          </ul>

          </div>

        </div>

      </div>

      <script type=text/javascript>

                // Initialize the product page

                $(function(){

                    // Check if video exists before binding events

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

                    // Bind click event to video placeholder to start video playback

                    $('#videoPlaceholder').click(function() {

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

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

                        $('#productVideo')[0].play();

                    });

                    

                    // Handle video ended event to show placeholder again

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

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

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

                    });

                    {/zan:notempty}

                    

                    // Initialize zoom for the main image

                    $("#mainImage").jqueryzoom({

                        xzoom: 446,

                        yzoom: 446,

                        offset: 10,

                        position: "right",

                        preload: 1,

                        lens: 1

                    });

                });

                

                // Function to show video thumbnail

                function showVideoThumbnail() {

                    // Hide all other content

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

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

                    

                    // Show video placeholder

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

                    

                    // Update borders

                    $("#spec-list li p").each(function(){

                        $(this).css({"border":"1px solid #e5e5e5"});

                    });

                    $('.video-thumbnail p').css({"border":"1px solid #009b4c"});

                }

                

                // Function to show image or video thumbnail

                function showImageThumbnail(imgElement) {

                    var $img = $(imgElement);

                    var src = $img.attr("src");

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

                    

                    // Hide all content first

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

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

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

                    

                    // Show appropriate content based on data type

                    if (dataType === 'video' && $('#productVideo')[0].canPlayType) {

                        // Show video placeholder, user will click play button to start playback

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

                    } else {

                        // Show image element

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

                        $('#mainImage').attr({

                            src: src.replace("\/n5\/", "\/n1\/"),

                            jqimg: src.replace("\/n5\/", "\/n0\/")

                        });

                    }

                    

                    // Update borders

                    $("#spec-list li p").each(function(){

                        $(this).css({"border":"1px solid #e5e5e5"});

                    });

                    $img.closest('p').css({"border":"1px solid #009b4c"});

                }

            </script> 

 

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