Вопрос или проблема
Как я могу добавить поддержку мобильных устройств, возможно, с помощью любого jQuery-свайпа или другого способа?
Вот мой fiddle
Поворот миниатюр работает нормально, единственная проблема в мобильных устройствах – мне нужно кликать для поворота, но вместо этого я хочу поворачивать с помощью свайпа.
Есть ли способ исправить мой код как для настольных, так и для мобильных устройств?
Спасибо
Я пробовал с touchstart, но это не сработало.
jQuery(document).ready(function($) {
var t = null,
r = !1;
$("body").on("mouseenter", ".thumbs", function(e) {
var o = jQuery(this);
if (r = !1, void 0 != o.data("thumbs")) {
var u = o.data("thumbs").split(","),
i = u.length,
a = 1;
t = null, clearTimeout(t), (t = function() {
0 == r && (o.find("img").attr("srcset", u[a]), a <= i && (a == i && (a = 0), setTimeout(t, 500), a++))
})()
}
}).on("mouseleave", ".thumbs", function(e) {
r = !0, t = null;
for (var o = setTimeout(";"), u = 0; u < o; u++) clearTimeout(u);
var i = $(this).find("img"),
a = i.attr("src");
i.attr("srcset", a)
}).on('touchstart', ".thumbs", function(e) {
r = !0, t = null;
for (var o = setTimeout(";"), u = 0; u < o; u++) clearTimeout(u);
var i = $(this).find("img"),
a = i.attr("src");
i.attr("srcset", a)
})
});
Вот простая версия на JS с использованием делегирования. Протестировано на iPhone
document.addEventListener("DOMContentLoaded", () => {
let intervalId = null,
longPressTimeout = null;
// Функция для переключения изображений
const switchImage = (img, thumbsArray, thumbCount) => {
let currentIndex = 1; // Начнем со второго изображения (предполагая, что первое уже отображается)
// Запускаем интервал для переключения изображений
intervalId = setInterval(() => {
img.setAttribute("srcset", thumbsArray[currentIndex]);
currentIndex = (currentIndex + 1) % thumbCount; // Циклически переключаем изображения
}, 500); // Обновляем изображение каждые 500 мс
};
// Основная функция для обработки всех взаимодействий
const handleInteraction = (e) => {
const thumb = e.target.closest('.thumbs');
if (!thumb) return; // Если цель события не внутри `.thumbs`, выходим
const img = thumb.querySelector("img");
const type = e.type;
if (e.type === "mouseover" || e.type === "touchstart") {
// Начинаем переключение изображений и добавляем класс hover при наведении мыши или касании
img.classList.add('hover');
let thumbsArray = thumb.dataset.thumbs.split(","),
thumbCount = thumbsArray.length;
clearInterval(intervalId); // Очищаем предыдущий интервал
// Запускаем цикл переключения изображений
switchImage(img, thumbsArray, thumbCount);
if (type === "touchstart") {
e.preventDefault(); // Предотвращаем длительное нажатие и прокрутку при касании
longPressTimeout = setTimeout(() => e.preventDefault(), 500); // Предотвращаем длительное нажатие через 500 мс
}
} else if (type === "mouseout" || type === "touchend" || type === "touchcancel") {
// Останавливаем переключение изображений и удаляем класс hover при выходе мыши или завершении касания
clearInterval(intervalId); // Останавливаем интервал переключения изображений
clearTimeout(longPressTimeout); // Очищаем таймаут длительного нажатия
img.classList.remove('hover'); // Удаляем класс hover
}
};
// Привязываем обработчики событий к контейнеру с использованием делегирования событий
const container = document.getElementById('container');
container.addEventListener("mouseover", handleInteraction, true); // mouseenter/leave не всплывают
container.addEventListener("mouseout", handleInteraction);
container.addEventListener("touchstart", handleInteraction);
container.addEventListener("touchend", handleInteraction);
container.addEventListener("touchcancel", handleInteraction);
});.post img {
max-width: 220px;
aspect-ratio: 3/2;
float: left;
border: 2px solid green;
}
.post img.hover {
border: 2px solid red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="container">
<a href="#" class="post" title="test">
<div class="thumbs" data-thumbs="https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/F76F/production/_101934336_hi001487062.jpg,
https://files.worldwildlife.org/wwfcmsprod/images/Elephant_and_Calf_288447_main/story_full_width/3yl7j5q9n4_WEB_288447.jpg,
https://cdn.aucklandunlimited.com/zoo/assets/media/giraffe-closeup-rectangle.jpg,
https://i.guim.co.uk/img/media/10358b976ad9e38136d261204dceb71a7adbf594/121_0_3598_2160/master/3598.jpg?width=465&dpr=1&s=none
">
<img src="https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/F76F/production/_101934336_hi001487062.jpg" data-original="https://ichef.bbci.co.uk/ace/standard/976/cpsprodpb/F76F/production/_101934336_hi001487062.jpg" alt="test" ></div>
</a>
</div>Ответ или решение
Вопрос, который вы подняли, касается реализации поддержки мобильных устройств в вашем проекте, в частности, обработки свайпов для поворота изображений в элементах «thumbs» (миниатюры). Давайте разберем, как это сделать, используя jQuery и чистый JavaScript, а также обсудим подходы к надежной обработке как настольных, так и мобильных взаимодействий.
Проблема
На мобильных устройствах для поворота изображений в элементе thumbs требуется свайп, вместо того, чтобы кликать на изображение. Вам нужно изменить код таким образом, чтобы он обрабатывал события свайпа, позволяя пользователям легко взаимодействовать с вашим интерфейсом.
Решение
Вот как вы можете адаптировать ваш код, чтобы поддерживать как нажатия мыши на настольных устройствах, так и свайпы на мобильных устройствах.
1. Использование jQuery для обработки событий
Если вы продолжаете использовать jQuery, добавим обработчики событий для мобильных взаимодействий.
jQuery(document).ready(function($) {
var t = null,
currentIndex = 0,
thumbsArray = [];
// Функция для смены изображений
var switchImage = function(thumb) {
const img = thumb.find("img");
currentIndex = (currentIndex + 1) % thumbsArray.length;
img.attr("srcset", thumbsArray[currentIndex]);
};
$(".thumbs").on("mouseenter touchstart", function() {
var o = $(this);
thumbsArray = o.data("thumbs").split(",");
currentIndex = 0;
clearInterval(t);
t = setInterval(function() {
switchImage(o);
}, 500);
// Обрабатываем long press (долгое нажатие) для мобильных
if (event.type === "touchstart") {
event.preventDefault();
}
}).on("mouseleave touchend", function() {
clearInterval(t);
});
// Добавление обработки свайпа
var touchStartX = 0;
var touchEndX = 0;
$(".thumbs").on("touchstart", function(event) {
touchStartX = event.changedTouches[0].screenX;
});
$(".thumbs").on("touchend", function(event) {
touchEndX = event.changedTouches[0].screenX;
handleSwipe();
});
function handleSwipe() {
if (touchEndX < touchStartX) {
// Свайп влево
switchImage($(this));
} else if (touchEndX > touchStartX) {
// Свайп вправо
currentIndex = (currentIndex - 1 + thumbsArray.length) % thumbsArray.length;
$(this).find("img").attr("srcset", thumbsArray[currentIndex]);
}
}
});2. Чистый JavaScript
Для пользователей, которые предпочитают использовать чистый JavaScript, рассмотрим аналогичное решение:
document.addEventListener("DOMContentLoaded", () => {
const thumbs = document.querySelectorAll('.thumbs');
let currentIndex = 0;
let intervalId = null;
thumbs.forEach(thumb => {
const img = thumb.querySelector('img');
const thumbsArray = thumb.dataset.thumbs.split(",");
thumb.addEventListener("mouseover", () => {
currentIndex = 0;
switchImage();
intervalId = setInterval(switchImage, 500);
thumb.addEventListener("touchstart", (event) => {
event.preventDefault();
});
});
thumb.addEventListener("mouseleave", () => {
clearInterval(intervalId);
});
thumb.addEventListener("touchstart", (event) => {
const touchStartX = event.changedTouches[0].screenX;
thumb.addEventListener("touchend", (event) => {
const touchEndX = event.changedTouches[0].screenX;
if (touchEndX < touchStartX) {
// Свайп влево
switchImage(thumb, true);
} else if (touchEndX > touchStartX) {
// Свайп вправо
switchImage(thumb, false);
}
});
});
const switchImage = (thumb, forward = true) => {
img.setAttribute("srcset", thumbsArray[currentIndex]);
currentIndex = forward ? (currentIndex + 1) % thumbsArray.length : (currentIndex - 1 + thumbsArray.length) % thumbsArray.length;
};
});
});Заключение
С приведенным выше кодом, вы сможете поддерживать функционал смены изображений как на настольных, так и на мобильных устройствах. Убедитесь, что обработка событий происходит корректно, включая тайминги и индексы в массиве изображений. Также не забудьте протестировать ваше решение на разных мобильных устройствах, чтобы убедиться в его стабильности.
Этот подход повысит удобство взаимодействия пользователей и обеспечит плавную работу вашего веб-приложения на всех платформах.