产品详情切换问题修改
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,184 +1,297 @@
|
||||
$(document).ready(function () {
|
||||
// 图片上下滚动
|
||||
var count = $("#imageMenu li").length; /* 显示 5 个 li标签内容 */
|
||||
var interval = $("#imageMenu li:first").height();
|
||||
var curIndex = 0;
|
||||
if (curIndex > count) curIndex = 0;
|
||||
//左右箭头切换图片
|
||||
$('.scrollbutton').click(function () {
|
||||
// 初始化产品图片切换功能
|
||||
initProductGallery();
|
||||
|
||||
// 初始化SKU属性切换
|
||||
initSkuSwitcher();
|
||||
|
||||
// 初始化放大镜功能（仅对图片有效）
|
||||
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;
|
||||
$('.scrollbutton').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);
|
||||
//获取当前指定的图片属性
|
||||
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");
|
||||
|
||||
const newIndex = $(this).hasClass('smallImgUp') ? curIndex - 1 : curIndex + 1;
|
||||
switchMedia(newIndex);
|
||||
});
|
||||
|
||||
function isIE() {
|
||||
return /MSIE|Trident/.test(navigator.userAgent);
|
||||
}
|
||||
// 解决 ie6 select框 问题
|
||||
$.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"));
|
||||
// 缩略图点击事件
|
||||
$imageList.on('click', 'li img', function () {
|
||||
const $li = $(this).parent();
|
||||
switchMedia($li.index());
|
||||
});
|
||||
|
||||
function midChange(src) {
|
||||
$("#midimg").attr("src", src).load(function () {
|
||||
changeViewImg();
|
||||
// 初始化状态
|
||||
switchMedia(0);
|
||||
});
|
||||
}
|
||||
//大视窗看图
|
||||
function mouseover(e) {
|
||||
if ($("#winSelector").css("display") == "none") {
|
||||
$("#winSelector,#bigView").show();
|
||||
}
|
||||
$("#winSelector").css(fixedPosition(e));
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断URL是否是视频
|
||||
*/
|
||||
function isVideoUrl(url) {
|
||||
if (!url) return false;
|
||||
const videoExtensions = ['.mp4', '.webm', '.ogg'];
|
||||
return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
|
||||
}
|
||||
|
||||
/**
|
||||
* SKU属性切换功能
|
||||
*/
|
||||
function initSkuSwitcher() {
|
||||
$(".dowebok").on('click', 'a', function (e) {
|
||||
e.preventDefault();
|
||||
const skuId = $(this).data('sku_id');
|
||||
|
||||
$(this).addClass('on')
|
||||
.parent().siblings().find('a').removeClass('on');
|
||||
|
||||
$(".preview").hide();
|
||||
$(`#preview${skuId}`).show();
|
||||
|
||||
// 切换SKU后重置图片查看器
|
||||
$(".enlarge-img").hide();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 放大镜功能（仅对图片有效）
|
||||
*/
|
||||
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 mouseOut(e) {
|
||||
if ($("#winSelector").css("display") != "none") {
|
||||
$("#winSelector,#bigView").hide();
|
||||
}
|
||||
e.stopPropagation();
|
||||
}
|
||||
$("#midimg").mouseover(mouseover); //中图事件
|
||||
$("#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 calculatePosition(e) {
|
||||
const imgOffset = $midimg.offset();
|
||||
let X = e.pageX - imgOffset.left - selectorWidth / 2;
|
||||
let Y = e.pageY - imgOffset.top - selectorHeight / 2;
|
||||
|
||||
function fixedPosition(e) {
|
||||
if (e == null) {
|
||||
return;
|
||||
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;
|
||||
}
|
||||
var $imgLeft = $("#midimg").offset().left; //中图左边距
|
||||
var $imgTop = $("#midimg").offset().top; //中图上边距
|
||||
X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
|
||||
Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
|
||||
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;
|
||||
|
||||
viewHeight = selectorHeight * viewImgHeight / imgHeight;
|
||||
$bigView.width(selectorWidth * viewImgWidth / imgWidth);
|
||||
$bigView.height(viewHeight);
|
||||
}
|
||||
$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
|
||||
|
||||
const scrollX = X * viewImgWidth / imgWidth;
|
||||
const scrollY = Y * viewImgHeight / imgHeight;
|
||||
|
||||
$bigViewImg.css({
|
||||
"left": -scrollX,
|
||||
"top": -scrollY
|
||||
});
|
||||
$("#bigView").css({
|
||||
|
||||
$bigView.css({
|
||||
"top": 0,
|
||||
"left": $(".preview").offset().left + $(".preview").width() + 15
|
||||
});
|
||||
return {
|
||||
left: X,
|
||||
top: Y
|
||||
};
|
||||
|
||||
return { left: X, 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();
|
||||
}
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user