297 lines
8.6 KiB
JavaScript
297 lines
8.6 KiB
JavaScript
$(document).ready(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;
|
|
|
|
const newIndex = $(this).hasClass('smallImgUp') ? curIndex - 1 : curIndex + 1;
|
|
switchMedia(newIndex);
|
|
});
|
|
|
|
// 缩略图点击事件
|
|
$imageList.on('click', 'li img', function () {
|
|
const $li = $(this).parent();
|
|
switchMedia($li.index());
|
|
});
|
|
|
|
// 初始化状态
|
|
switchMedia(0);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 判断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 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, 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();
|
|
}
|
|
});
|
|
} |