Я пытаюсь изменить отображение элемента «Продукты» из Woocommerce, используя CSS и JavaScript. Карусель для меняющихся фотографий работает нормально. Тем не менее, у меня есть проблема с отображаемой фотографией, я бы хотел, чтобы она отображала всю фотографию в квадратном контейнере справа, независимо от размеров фотографии, она подходит для этого квадрата. Однако, если фотография меньше, она будет сосредоточиться на этом контейнере. Однако, независимо от того, что я делаю, что -то сбоятся или, например, функция Zoom перестает работать.
скриншот о том, как вырезаны фотографии:
И это пользовательский код в Javascript: < /p>
jQuery(document).ready(function($) {
$(window).on('load', function() {
var $gallery = $('.woocommerce-product-gallery');
var $thumbs = $gallery.find('ol.flex-control-nav');
$thumbs.wrap('');
var $thumbsWrapper = $('.flex-control-thumbs-wrapper');
$thumbsWrapper.prepend('▲');
$thumbsWrapper.append('▼');
var $upButton = $('.thumb-nav-up');
var $downButton = $('.thumb-nav-down');
$upButton.on('click', function() {
var scrollAmount = $thumbs.height() * 0.3;
$thumbs.animate({
scrollTop: $thumbs.scrollTop() - scrollAmount
}, 300);
});
$downButton.on('click', function() {
var scrollAmount = $thumbs.height() * 0.3;
$thumbs.animate({
scrollTop: $thumbs.scrollTop() + scrollAmount
}, 300);
});
function checkArrowsVisibility() {
var thumbsHeight = $thumbs[0].scrollHeight;
var visibleHeight = $thumbs.height();
if (thumbsHeight
Подробнее здесь: https://stackoverflow.com/questions/794 ... ct-gallery
