Truyền sự kiện click từ Javascript ngoài vào krpano

Đoạn mã ví dụ cách truyền sự kiện click từ Javascript ngoài vào krpano. Yêu cầu đề ra: bạn muốn thực thi một công việc nào đó trong krpano bằng sự kiện click nhấn chuột vào một đối tượng bất kỳ trong mã javascript bên ngoài file XML của krpano.

Truyền sự kiện click từ Javascript ngoài vào krpano

Để có thể nhận sự kiện từ Javascript bên ngoài vào trong file XML của krpano thì khi gọi hàm embedpano bạn cần dùng sự kiện onready.

(function ($) {
    embedpano({
        xml: "tour.xml",
        target: "pano",
        html5: "only",
        mobilescale: 1.0,
        passQueryParameters: true,
        onready: krpanoReady
    });

    function krpanoReady(krpano) {
        $("body").on("click", "img.toggle-hotspots", function (e) {
            e.preventDefault();

            var that = this,
                element = $(that);

            element.toggleClass("active");

            if (element.hasClass("active")) {
                krpano.call("hide_all_hot_spots()");
            } else {
                krpano.call("show_all_hot_spots()");
            }
        });
    }
})(jQuery);

Bằng cách dùng hàm call cho đối tượng krpano bạn có thể gọi bất kỳ hàm nào trong file XML của phần mềm. Ở ví dụ bên trên thì mình dùng hàm krpano.call để ẩn hoặc hiện các hotspots có trong ảnh 360.

Khai báo hàm trong file XML của krpano

Sau khi viết hàm Javascript trong file index.html của index.php của dự án, bây giờ bạn khai báo hàm trong file tour.xml của web.

<action name="hide_all_hot_spots">
  for(set(i,0), i LT hotspot.count, inc(i),if(hotspot[get(i)].name != 'ditpbenluc', if(hotspot[get(i)].name !=
  'ditpduchoa', set(hotspot[get(i)].visible, false)))));
</action>

<action name="show_all_hot_spots">
  for(set(i,0), i LT hotspot.count, inc(i),set(hotspot[get(i)].visible, true));
</action>

Đoạn mã XML bên trên sẽ khai báo 2 hàm ẩn và hiện các hotspot có trong dự án. Khi người dùng click vào một nút hoặc link hoặc hình ảnh bất kỳ trên trang web thì sẽ ẩn hoặc hiện tất cả các hotspot ngoại trừ 2 tên trong hàm so sánh điều kiện.

Nếu bạn có bất kỳ thắc mắc nào cần giải đáp, hãy gửi liên hệ ngay cho HocWP Team để được tư vấn nhé. Bên cạnh đó, bạn cũng có thể đăng ký theo dõi kênh YouTube Học WordPress để cập nhật kiến thức về quản lý và phát triển website nhé.