Что требуется от Uranium.io для увеличения, чтобы кнопки увеличения / уменьшения масштаба находили изображение для увеличения или уменьшения масштаба?

Question

У меня есть элементы DOM в следующей структуре:

<div class="flexslider" data-ur-set="zoom">
    <div data-ur-zoom-component="loading" data-ur-state="disabled">Loading…</div>
    <div data-ur-zoom-component="button" data-ur-state="disabled">
        <span>+</span><span>−</span>
    </div>
    <ul class="slides" data-ur-zoom-component="view_container">
        <li><img src="//mydomain.com/path/to/small/image" onerror="this.src=altView.src" class="thumbnail selected-thumbnail" data-ur-src="//mydomain.com/path/to/large/image" data-ur-zoom-component="img"></li>
        <li><img src="//mydomain.com/path/to/small/image" onerror="this.src=altView.src" class="thumbnail" data-ur-src="//mydomain.com/path/to/large/image" data-ur-zoom-component="img"></li>
        <li><img src="//mydomain.com/path/to/small/image" onerror="this.src=altView.src" class="thumbnail" data-ur-src="//mydomain.com/path/to/large/image" data-ur-zoom-component="img"></li>
    </ul>
</div>

Когда я нажимаю на само изображение (то, которое отображается на текущем слайде), увеличение / уменьшение масштаба работает. Однако, когда я нажимаю + Размах кнопки на изображении Я вижу ошибку в консоли Javascript, которая говорит TypeError: $img.data(...) is null

function setActive(img) {
    if ($img && img != $img[0]) {
        self.state = "enabled-out";
        var zoomImg = $img.data("urZoomImg");
        zoomImg.transform(0, 0, 1);
        zoomImg.transitionEnd();
    }
    $img = $(img);
}

// zoom in/out button, zooms in to the center of the image
$(self.button).on(touchscreen ? "touchstart.ur.zoom" : "click.ur.zoom", function() {
    if (self.img.length > 1)
        setActive($(self.img).filter($container.find("[data-ur-state='active'] *"))[0]);
    else
        setActive(self.img[0]);
    $img.data("urZoomImg").zoom(); // <---- This is the line throwing the error
});

Я указал, где это null Ошибка типа брошена в коде выше. Я проследил это и обнаружил, что setActive отправляется undefined параметр img.

Я подозреваю, что не получил правильные атрибуты данных взаимодействия Uranium Zoom, но почему + кнопка выкидывает эту ошибку?

Правильное поведение как в примерах здесь: http://uranium.io/interactions/zoom.html

Answer 1

Для тех, кто оказался в моем положении, я узнал, что происходит, и это подсказало мне, как это исправить для себя.

Если несколько изображений находятся в слайдере, урановый зум ожидает, что они будут расположены в урановой карусели. Структура DOM карусели подразумевает, что элемент, содержащий каждое изображение, будет иметь data-ur-state='active' и так селектор $container.find("[data-ur-state='active'] *") найдет изображение в текущем отображаемом элементе слайда.

Однако, если вы не используете карусель, вы можете увидеть null TypeError я видел. Чтобы исправить это в ситуациях, когда вы не используете Uranium carousel, есть способ изменить ваши основные файлы Uranium, чтобы поймать селектор, подходящий для вашего проекта. Однако вы меняете основные файлы, поэтому обращайтесь с ними осторожно!

Файл для изменения называется assets/javascript/.remote/http__colon____slash____slash__downloads.moovweb.com__slash__uranium__slash__1.0.167__slash__uranium-pretty.js

Измените селектор в строке 608 (блок кода выглядит, как показано ниже, если у вас есть аналогичная версия Uranium).

605     // zoom in/out button, zooms in to the center of the image
606     $(self.button).on(touchscreen ? "touchstart.ur.zoom" : "click.ur.zoom", function() {
607       if (self.img.length > 1)
608         setActive($(self.img).filter($container.find("[data-ur-state='active'] *"))[0]);
609       else
610         setActive(self.img[0]);
611       $img.data("urZoomImg").zoom();
612     });

Перезапустите сервер Moov, чтобы он генерировал новый assets/javascript/main.js и ваши кнопки зума будут использовать новый код и работать!