Одинаковые элементы
Добрый день.
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>
|
stem,
[].forEach.call( document.querySelectorAll('.torotate'), function(elem) {
new Zoom(elem, {
rotate: false
});
});
|
Цитата:
Т.е. там грубо говоря галерея-карусель из неизвестного кол-ва элементов и каждое изображение зумится двумя пальцами.:help: :help: :help: еще вот так сделал, но тоже все разом двигаются((
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. тогда по одному двигаются, работает как надо) :dance: :dance: :dance: |
| Часовой пояс GMT +3, время: 01:13. |