Форум

stem · #1 (**permalink**) 05.02.2018, 20:58

Добрый день.

Help Sos Mayday

Есть простой скрипт PinchZoom, но срабатывает только на первый элемент.
Знаю, что id должен быть уникальным, не смотрите на это, я просто оставил, как есть.

А на getElementsByClassNames не реагирует почему то, перестает работать. Я так понимаю, что надо цикл сделать, чтобы работало, но не знаю как это на JS делается.

В коде так и будет несколько одинаковых элементов. Как исправить скрипт, чтобы обрабатывался только тот элемент на котором происходит touch событие, чтобы на всех элементах работало?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Pinch Zoomer - http://anitasv.github.io/zoom/</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body style="min-width:320px;">


<div width=320 height=240 style="overflow:hidden;">
    <!-- this doesn't have to be an image -->
    <img id="torotate" class="torotate" width=320 height=240 src="https://lh3.googleusercontent.com/w33i78Rt0j4GHr7SA1luYtBAtmC1DmRHwobUcK1wCKivA_u4VczsDw0CweLmJpUwFRUs=w1920-h1200-no">
    <img id="torotate" class="torotate" width=320 height=240 src="https://lh3.googleusercontent.com/w33i78Rt0j4GHr7SA1luYtBAtmC1DmRHwobUcK1wCKivA_u4VczsDw0CweLmJpUwFRUs=w1920-h1200-no">
</div>

<script type="text/javascript" src="http://anitasv.github.io/zoom/zoom-1.0.7.min.js"> </script>
<script type="text/javascript">
var elem = document.getElementById('torotate');
var zm = new Zoom(elem, {
    rotate: false
});
</script>
</body>
</html>

рони · #2 (**permalink**) 05.02.2018, 21:14

stem,

[].forEach.call( document.querySelectorAll('.torotate'), function(elem) {
new Zoom(elem, {
    rotate: false
});
});

stem · #3 (**permalink**) 05.02.2018, 21:25

Сообщение от рони

stem,

[].forEach.call( document.querySelectorAll('.torotate'), function(elem) {
new Zoom(elem, {
    rotate: false
});
});

Спасибо, работает на класс, но только передвигаются сразу все изображения, а так каждое по отдельности должно двигаться.

Т.е. там грубо говоря галерея-карусель из неизвестного кол-ва элементов и каждое изображение зумится двумя пальцами.

еще вот так сделал, но тоже все разом двигаются((

var elem = document.getElementsByClassName("torotate");
for(var i = 0; i < elem.length; i++) {
//some code
console.log(elem[i])
var zm = new Zoom(elem[i], {
	rotate: false
});
}

Дополнение: ошибся

с html-кодом, надо было каждое изображение обернуть в свой div. тогда по одному двигаются, работает как надо)

Форум

Справочник

Discord чат

Курсы javascript