产品详情切换问题修改

app/index/view/pc/product/detail.html

@@ -35,7 +35,7 @@
                         <!-- 左边切换按钮 -->
                         <div class="scrollbutton smallImgUp disabled"></div>
                         <!-- 小图片预览 -->
-                        <div id="imageMenu">
+                        <div id="imageMenu_{$sku.id}" class="imageMenu">
                             <ul class="image_list">
                                 {volist name="sku.photo_album" id="photo"}
                                 <li id="onlickImg"><img src="{:thumb($photo)}" data-url="{$photo}" /></li>

public/static/index/pc/css/product_detail.css

@@ -112,11 +112,33 @@
   .preview
   .smallImg
   #imageMenu
+  .imageMenu
   li
   img {
   width: 98%;
   cursor: pointer;
 }
+#onlickImg img{
+  width: 100%;
+}
+.bigImg {
+  height: 100%;
+  overflow: hidden;
+}
+
+.bigImg video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; 
+  background: #fff; 
+}
+
+@media (max-width: 768px) {
+  .bigImg video {
+    height: auto;
+    max-height: 100%;
+  }
+}
 .orico_Page_prdetail .oriprdetail .cp .cpfl .preview .bigImg {
   position: relative;
   margin: 0 auto;

public/static/index/pc/js/large.js

@@ -1,184 +1,297 @@
 $(document).ready(function () {
-  // 图片上下滚动
+  // 初始化产品图片切换功能
-  var count = $("#imageMenu li").length; /* 显示 5 个 li标签内容 */
+  initProductGallery();
-  var interval = $("#imageMenu li:first").height();
+
-  var curIndex = 0;
+  // 初始化SKU属性切换
-  if (curIndex > count) curIndex = 0;
+  initSkuSwitcher();
-  //左右箭头切换图片
+
-  $('.scrollbutton').click(function () {
+  // 初始化放大镜功能（仅对图片有效）
+  initMagnifier();
+
+  // 初始化图片放大功能
+  initImageEnlarger();
+});
+
+/**
+ * 产品图片切换功能（支持视频）
+ */
+function initProductGallery() {
+  $('.preview').each(function () {
+    const $preview = $(this);
+    const $imageMenu = $preview.find(".imageMenu");
+    const $imageList = $imageMenu.find(".image_list");
+    const $mediaContainer = $preview.find(".bigImg"); // 改为通用的媒体容器
+    const $enlargeImg = $(".enlarge-img img");
+    const $scrollButtons = $preview.find('.scrollbutton');
+
+    const mediaItems = $imageList.find("li");
+    const count = mediaItems.length;
+    const interval = mediaItems.first().height();
+    let curIndex = 0;
+
+    // 更新按钮状态
+    function updateButtonState() {
+      $scrollButtons.removeClass('disabled');
+      if (curIndex === 0) $preview.find('.smallImgUp').addClass('disabled');
+      if (curIndex === count - 1) $preview.find('.smallImgDown').addClass('disabled');
+    }
+
+
+    // 切换媒体内容（图片或视频）
+    function switchMedia(index) {
+      curIndex = index;
+      const $item = mediaItems.eq(index);
+      const mediaUrl = $item.find('img').data('url');
+      const isVideo = isVideoUrl(mediaUrl);
+
+      // 更新缩略图状态
+      mediaItems.eq(index).addClass('on').siblings().removeClass("on");
+
+      // 清空媒体容器
+      $mediaContainer.empty();
+
+      if (isVideo) {
+        // 创建视频元素（优化后的版本）
+        const videoHtml = `
+      <video class="product-video" controls autoplay muted playsinline 
+             style="width:100%; max-height:100%; object-fit:contain;">
+        <source src="${mediaUrl}" type="video/mp4">
+        您的浏览器不支持视频播放
+      </video>
+    `;
+        $mediaContainer.html(videoHtml);
+
+        // 添加视频加载后的处理
+        const $video = $mediaContainer.find('video');
+        $video.on('loadedmetadata', function () {
+          // 确保视频在容器中正确显示
+          $(this).css({
+            'width': '100%',
+            'height': 'auto',
+            'max-height': '100%',
+            'object-fit': 'contain'
+          });
+
+          // 居中显示
+          $(this).parent().css({
+            'display': 'flex',
+            'align-items': 'center',
+            'justify-content': 'center'
+          });
+        });
+
+        // 大图查看器不显示视频
+      } else {
+        // 显示图片
+        $mediaContainer.html(`<img id="midimg" src="${mediaUrl}" style="max-width:100%; max-height:100%;" />`);
+
+        // 更新大图查看器的图片
+        $enlargeImg.attr('src', mediaUrl);
+      }
+
+      $imageList.stop().animate({ "marginTop": -index * interval + "px" }, 600);
+      updateButtonState();
+    }
+
+    // 滚动按钮事件
+    $scrollButtons.on('click', function () {
       if ($(this).hasClass('disabled')) return false;
-    if ($(this).hasClass('smallImgUp')) --curIndex;
+
-    else ++curIndex;
+      const newIndex = $(this).hasClass('smallImgUp') ? curIndex - 1 : curIndex + 1;
-    $('.scrollbutton').removeClass('disabled');
+      switchMedia(newIndex);
-    if (curIndex == 0) $('.smallImgUp').addClass('disabled');
-    if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
-    $("#imageMenu ul").stop(false, true).animate({
-      "marginTop": -curIndex * interval + "px"
-    }, 600);
-    //获取当前指定的图片属性
-    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('data-url');
-    //切换图片
-    $("#midimg").attr('src', midImg);
-    $(".enlarge-img").find("img").attr('src', midImg);
-    //小图添加属性
-    $("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
-  });
-  //大图左右箭头切换图片
-  $('.scrollbutton_01').click(function () {
-    if ($(this).hasClass('disabled')) return false;
-    if ($(this).hasClass('smallImgUp')) --curIndex;
-    else ++curIndex;
-    $('.scrollbutton_01').removeClass('disabled');
-    if (curIndex == 0) $('.smallImgUp').addClass('disabled');
-    if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');
-    //$("#imageMenu ul").stop(false, true).animate({"marginTop" : -curIndex*interval + "px"}, 600);
-    $("#imageMenu ul").stop(false, true).animate({
-      "marginTop": -curIndex * interval + "px"
-    }, 600);
-    //获取当前指定的图片属性
-    var midImg = $("#imageMenu li").eq(curIndex).find('img').attr('data-url');
-    //切换图片
-    $("#midimg").attr('src', midImg);
-    $(".enlarge-img").find("img").attr('src', midImg);
-    //小图添加属性
-    $("#imageMenu li").eq(curIndex).addClass('on').siblings().removeClass("on");
     });
 
-  function isIE() {
+    // 缩略图点击事件
-    return /MSIE|Trident/.test(navigator.userAgent);
+    $imageList.on('click', 'li img', function () {
-  }
+      const $li = $(this).parent();
-  // 解决 ie6 select框 问题
+      switchMedia($li.index());
-  $.fn.decorateIframe = function (options) {
-    if (isIE()) {
-      var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
-      $(this).each(function () {
-        var $myThis = $(this);
-        //创建一个IFRAME
-        var divIframe = $("<iframe />");
-        divIframe.attr("id", opts.iframeId);
-        divIframe.css("position", "absolute");
-        divIframe.css("display", "none");
-        divIframe.css("display", "block");
-        divIframe.css("z-index", opts.iframeZIndex);
-        divIframe.css("border");
-        divIframe.css("top", "0");
-        divIframe.css("left", "0");
-        if (opts.width == 0) {
-          divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 +
-            "px");
-        }
-        if (opts.height == 0) {
-          divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) *
-            2 + "px");
-        }
-        divIframe.css("filter", "mask(color=#fff)");
-        $myThis.append(divIframe);
-      });
-    }
-  }
-  $.fn.decorateIframe.defaults = {
-    iframeId: "decorateIframe1",
-    iframeZIndex: -1,
-    width: 0,
-    height: 0
-  }
-  //放大镜视窗
-  $("#bigView").decorateIframe();
-  //点击到中图
-  var midChangeHandler = null;
-  $("#imageMenu li img").bind("click", function () {
-    if ($(this).attr("id") != "onlickImg") {
-      midChange($(this).attr("data-url"));
-      $("#imageMenu li").removeAttr("id");
-      //$(this).parent().attr("id", "onlickImg");
-    }
-  }).bind("mouseover", function () {
-    if ($(this).attr("id") != "onlickImg") {
-      window.clearTimeout(midChangeHandler);
-      midChange($(this).attr("data-url"));
-      // $(this).css({ "border": "1px solid #990000" });
-    }
-  }).bind("mouseout", function () {
-    if ($(this).attr("id") != "onlickImg") {
-      $(this).removeAttr("style");
-      midChangeHandler = window.setTimeout(function () {
-        midChange($("#onlickImg img").attr("data-url"));
-      }, 1000);
-    }
-  });
-  //点击中图，切换大图
-  $("#midimg").bind("click", function () {
-    $(".enlarge-img").find("img").attr("src", $(this).attr("src"));
     });
 
-  function midChange(src) {
+    // 初始化状态
-    $("#midimg").attr("src", src).load(function () {
+    switchMedia(0);
-      changeViewImg();
   });
 }
-  //大视窗看图
+
-  function mouseover(e) {
+/**
-    if ($("#winSelector").css("display") == "none") {
+ * 判断URL是否是视频
-      $("#winSelector,#bigView").show();
+ */
-    }
+function isVideoUrl(url) {
-    $("#winSelector").css(fixedPosition(e));
+  if (!url) return false;
-    e.stopPropagation();
+  const videoExtensions = ['.mp4', '.webm', '.ogg'];
+  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
 }
 
-  function mouseOut(e) {
+/**
-    if ($("#winSelector").css("display") != "none") {
+ * SKU属性切换功能
-      $("#winSelector,#bigView").hide();
+ */
-    }
+function initSkuSwitcher() {
-    e.stopPropagation();
+  $(".dowebok").on('click', 'a', function (e) {
-  }
+    e.preventDefault();
-  $("#midimg").mouseover(mouseover); //中图事件
+    const skuId = $(this).data('sku_id');
-  $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件
-  var $divWidth = $("#winSelector").width(); //选择器宽度
-  var $divHeight = $("#winSelector").height(); //选择器高度
-  var $imgWidth = $("#midimg").width(); //中图宽度
-  var $imgHeight = $("#midimg").height(); //中图高度
-  var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度
-  function changeViewImg() {
-    $("#bigView img").attr("src", $("#midimg").attr("src"));
-  }
-  changeViewImg();
-  $("#bigView").scrollLeft(0).scrollTop(0);
 
-  function fixedPosition(e) {
+    $(this).addClass('on')
-    if (e == null) {
+      .parent().siblings().find('a').removeClass('on');
-      return;
+
-    }
+    $(".preview").hide();
-    var $imgLeft = $("#midimg").offset().left; //中图左边距
+    $(`#preview${skuId}`).show();
-    var $imgTop = $("#midimg").offset().top; //中图上边距
+
-    X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
+    // 切换SKU后重置图片查看器
-    Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
+    $(".enlarge-img").hide();
-    X = X < 0 ? 0 : X;
-    Y = Y < 0 ? 0 : Y;
-    X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
-    Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;
-    if ($viewImgWidth == null) {
-      $viewImgWidth = $("#bigView img").outerWidth();
-      $viewImgHeight = $("#bigView img").height();
-      if ($viewImgWidth < 200 || $viewImgHeight < 200) {
-        $viewImgWidth = $viewImgHeight = 800;
-      }
-      $height = $divHeight * $viewImgHeight / $imgHeight;
-      $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
-      $("#bigView").height($height);
-    }
-    var scrollX = X * $viewImgWidth / $imgWidth;
-    var scrollY = Y * $viewImgHeight / $imgHeight;
-    $("#bigView img").css({
-      "left": scrollX * -1,
-      "top": scrollY * -1
   });
-    $("#bigView").css({
+}
+
+/**
+ * 放大镜功能（仅对图片有效）
+ */
+function initMagnifier() {
+  // 仅当主图是图片时初始化放大镜
+  $(document).on('mouseenter', '#midimg', function () {
+    const $midimg = $(this);
+    const $winSelector = $("#winSelector");
+    const $bigView = $("#bigView");
+    const $bigViewImg = $bigView.find("img");
+
+    let selectorWidth = $winSelector.width();
+    let selectorHeight = $winSelector.height();
+    let imgWidth = $midimg.width();
+    let imgHeight = $midimg.height();
+    let viewImgWidth, viewImgHeight, viewHeight;
+
+    // 更新大图
+    function updateViewImg() {
+      $bigViewImg.attr('src', $midimg.attr('src'));
+    }
+
+    // 计算选择器位置
+    function calculatePosition(e) {
+      const imgOffset = $midimg.offset();
+      let X = e.pageX - imgOffset.left - selectorWidth / 2;
+      let Y = e.pageY - imgOffset.top - selectorHeight / 2;
+
+      X = Math.max(0, Math.min(X, imgWidth - selectorWidth));
+      Y = Math.max(0, Math.min(Y, imgHeight - selectorHeight));
+
+      if (!viewImgWidth) {
+        viewImgWidth = $bigViewImg.outerWidth();
+        viewImgHeight = $bigViewImg.height();
+
+        if (viewImgWidth < 200 || viewImgHeight < 200) {
+          viewImgWidth = viewImgHeight = 800;
+        }
+
+        viewHeight = selectorHeight * viewImgHeight / imgHeight;
+        $bigView.width(selectorWidth * viewImgWidth / imgWidth);
+        $bigView.height(viewHeight);
+      }
+
+      const scrollX = X * viewImgWidth / imgWidth;
+      const scrollY = Y * viewImgHeight / imgHeight;
+
+      $bigViewImg.css({
+        "left": -scrollX,
+        "top": -scrollY
+      });
+
+      $bigView.css({
         "top": 0,
         "left": $(".preview").offset().left + $(".preview").width() + 15
       });
-    return {
+
-      left: X,
+      return { left: X, top: Y };
-      top: Y
+    }
-    };
+
+    // 鼠标事件处理
+    function handleMouseOver(e) {
+      if ($winSelector.is(":hidden")) {
+        $winSelector.add($bigView).show();
+      }
+      $winSelector.css(calculatePosition(e));
+      e.stopPropagation();
+    }
+
+    function handleMouseOut() {
+      $winSelector.add($bigView).hide();
+    }
+
+    // 绑定事件
+    $midimg.on({
+      mousemove: handleMouseOver,
+      mouseout: handleMouseOut
+    });
+
+    // 初始化
+    updateViewImg();
+    $bigView.scrollLeft(0).scrollTop(0);
+  });
+}
+
+/**
+ * 图片放大功能（仅显示图片）
+ */
+function initImageEnlarger() {
+  const $enlargeImg = $(".enlarge-img");
+  const $enlargeImgContent = $enlargeImg.find("img");
+  const $closeBtn = $enlargeImg.find(".close");
+
+  // 主图点击放大（仅对图片有效）
+  $(document).on('click', '.bigImg img', function () {
+    const currentImgSrc = $(this).attr('src');
+    $enlargeImgContent.attr('src', currentImgSrc);
+    $enlargeImg.show();
+  });
+
+  // 关闭放大图
+  $closeBtn.on('click', function () {
+    $enlargeImg.hide();
+  });
+
+  // 放大图中的左右切换按钮（仅切换图片）
+  $enlargeImg.find('.scrollbutton_01').on('click', function () {
+    const $currentPreview = $('.preview:visible');
+    const $imageMenu = $currentPreview.find('.imageMenu');
+    const $allItems = $imageMenu.find('li');
+    const $currentItem = $imageMenu.find('li.on');
+    let currentIndex = $allItems.index($currentItem);
+
+    // 只查找图片项（跳过视频）
+    let $imageItems = $allItems.filter(function () {
+      return !isVideoUrl($(this).find('img').data('url'));
+    });
+
+    // 如果没有图片项，直接返回
+    if ($imageItems.length === 0) {
+      $enlargeImg.hide();
+      return;
+    }
+
+    // 找到当前图片在纯图片列表中的位置
+    let imageIndex = $imageItems.index($currentItem);
+    if (imageIndex === -1) imageIndex = 0;
+
+    let newIndex;
+    if ($(this).hasClass('smallImgUp')) {
+      newIndex = (imageIndex - 1 + $imageItems.length) % $imageItems.length;
+    } else {
+      newIndex = (imageIndex + 1) % $imageItems.length;
+    }
+
+    const newImgSrc = $imageItems.eq(newIndex).find('img').data('url');
+    $enlargeImgContent.attr('src', newImgSrc);
+
+    // 同步更新主图显示（如果当前显示的是图片）
+    if ($currentPreview.find('video').length === 0) {
+      $currentPreview.find('#midimg').attr('src', newImgSrc);
+    }
+
+    // 更新激活状态
+    $allItems.removeClass('on');
+    $imageItems.eq(newIndex).addClass('on');
+  });
+
+  // ESC键关闭
+  $(document).on('keyup', function (e) {
+    if (e.key === "Escape") {
+      $enlargeImg.hide();
     }
   });
+}