{"id":3945,"date":"2020-04-11T19:04:54","date_gmt":"2020-04-11T19:04:54","guid":{"rendered":"http:\/\/wordpress.creativegigs.net\/docly\/docs\/rogan-wordpress-theme-documentation\/elements\/image-lightbox\/"},"modified":"2024-02-12T09:38:50","modified_gmt":"2024-02-12T09:38:50","slug":"image-hotspots","status":"publish","type":"docs","link":"https:\/\/help.alltec.be\/?docs=docly-documentation\/elements\/image-hotspots","title":{"rendered":"Image Hotspots Widget"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3945\" class=\"elementor elementor-3945\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1a2b075a elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1a2b075a\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6424d601\" data-id=\"6424d601\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-21381e7f elementor-widget elementor-widget-text-editor\" data-id=\"21381e7f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 07-02-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<!-- wp:paragraph -->\n<p>A Dashboard is a convenient way to get an overview of the the current status of your tasks and monitorthe progress of your team.<\/p>\n<!-- \/wp:paragraph -->\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3caaa20 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3caaa20\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f555eb1\" data-id=\"f555eb1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-49cc1a9 elementor-widget elementor-widget-docy-image-hotspots\" data-id=\"49cc1a9\" data-element_type=\"widget\" data-widget_type=\"docy-image-hotspots.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t            <div class=\"pointing_img_container pointing_img_two\">\r\n                <img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/help.alltec.be\/wp-content\/uploads\/2021\/10\/wallpaperflare.com_wallpaper-1.jpg\" class=\"attachment-full size-full\" alt=\"\" \/>                                    <div class=\"img_pointing  elementor-repeater-item-6385bfc tooltips\" data-tooltip-content=\"#tooltip-6385bfc\">\r\n                        <div class=\"dot\"><\/div>\r\n                    <\/div>\r\n                                        <div class=\"img_pointing one elementor-repeater-item-d99f50f tooltips\" data-tooltip-content=\"#tooltip-d99f50f\">\r\n                        <div class=\"dot\"><\/div>\r\n                    <\/div>\r\n                                <\/div>\r\n                            <div class=\"tooltip_templates d-none\">\r\n                    <div id=\"tooltip-6385bfc\">\r\n                        <div class=\"img_pointing_content\">\r\n                            <p>Lorem ipsum some dummy text is here.<\/p>\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                                <div class=\"tooltip_templates d-none\">\r\n                    <div id=\"tooltip-d99f50f\">\r\n                        <div class=\"img_pointing_content\">\r\n                            <p>Lorem ipsum some dummy text is here.<\/p>\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                        <script>\r\n            (function($){\r\n                $(document).ready(function(){\r\n                    \/*--------------- tooltip js--------*\/\r\n                    function tooltip() {\r\n                        if ($('.tooltips').length) {\r\n                            $('.tooltips').tooltipster({\r\n                            interactive: true,\r\n                            arrow: true,\r\n                            animation: 'grow',\r\n                            delay: 200,\r\n                            });\r\n                        }\r\n                    }\r\n                    tooltip();\r\n                    $('.tooltips_one').data('tooltip-custom-class', 'tooltip_blue').tooltip();\r\n                    $('.tooltips_two').data('tooltip-custom-class', 'tooltip_danger').tooltip();\r\n                });\r\n            })(jQuery);\r\n        <\/script>\r\n        \t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8c0d9ec elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8c0d9ec\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bde1b36\" data-id=\"bde1b36\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-714baa8 elementor-widget elementor-widget-heading\" data-id=\"714baa8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.19.0 - 07-02-2024 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Hotspots in lightbox modal<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8324e6a elementor-widget elementor-widget-docy-image-hotspots\" data-id=\"8324e6a\" data-element_type=\"widget\" data-widget_type=\"docy-image-hotspots.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t                <div class=\"pointing_img\">\r\n                    <a href=\"#\" data-bs-toggle=\"modal\" data-bs-target=\"#exampleModal-8324e6a\">\r\n                        <img decoding=\"async\" width=\"1920\" height=\"1280\" src=\"https:\/\/help.alltec.be\/wp-content\/uploads\/2021\/12\/luca-bravo-XJXWbfSo2f0-unsplash-1-1.jpg\" class=\"attachment-full size-full\" alt=\"\" \/>                    <\/a>\r\n                <\/div>\r\n                            <div class=\"modal fade img_modal\" id=\"exampleModal-8324e6a\" tabindex=\"-2\" role=\"dialog\" aria-hidden=\"false\">\r\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n                    <i class=\" icon_close\"><\/i>\r\n                <\/button>\r\n                <div class=\"modal-dialog pointing_img_container\" role=\"document\">\r\n                    <div class=\"modal-content\">\r\n                        <img decoding=\"async\" width=\"1920\" height=\"1280\" src=\"https:\/\/help.alltec.be\/wp-content\/uploads\/2021\/12\/luca-bravo-XJXWbfSo2f0-unsplash-1-1.jpg\" class=\"attachment-full size-full\" alt=\"\" \/>                            <div class=\"img_pointing tooltips  elementor-repeater-item-6385bfc\" data-tooltip-content=\"#tooltip-6385bfc\">\r\n                                <div class=\"dot\"><\/div>\r\n                            <\/div>\r\n                                                        <div class=\"img_pointing tooltips one elementor-repeater-item-d99f50f\" data-tooltip-content=\"#tooltip-d99f50f\">\r\n                                <div class=\"dot\"><\/div>\r\n                            <\/div>\r\n                                                <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                            <div class=\"tooltip_templates d-none\">\r\n                    <div id=\"tooltip-6385bfc\">\r\n                        <div class=\"img_pointing_content\">\r\n                            <p>Lorem ipsum some dummy text is here.<\/p>\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                                <div class=\"tooltip_templates d-none\">\r\n                    <div id=\"tooltip-d99f50f\">\r\n                        <div class=\"img_pointing_content\">\r\n                            <p>Lorem ipsum some dummy text is here.<\/p>\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                        <script>\r\n            (function($){\r\n                $(document).ready(function(){\r\n                    \/*--------------- tooltip js--------*\/\r\n                    function tooltip() {\r\n                        if ($('.tooltips').length) {\r\n                            $('.tooltips').tooltipster({\r\n                            interactive: true,\r\n                            arrow: true,\r\n                            animation: 'grow',\r\n                            delay: 200,\r\n                            });\r\n                        }\r\n                    }\r\n                    tooltip();\r\n                    $('.tooltips_one').data('tooltip-custom-class', 'tooltip_blue').tooltip();\r\n                    $('.tooltips_two').data('tooltip-custom-class', 'tooltip_danger').tooltip();\r\n                });\r\n            })(jQuery);\r\n        <\/script>\r\n        \t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>A Dashboard is a convenient way to get an overview of the the current status of your tasks and monitorthe progress of your team. Lorem ipsum some dummy text is here. Lorem ipsum some dummy text is here. Hotspots in lightbox modal Lorem ipsum some dummy text is here. Lorem ipsum some dummy text is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2744,"menu_order":4,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[45,59,68,85],"class_list":["post-3945","docs","type-docs","status-publish","hentry","doc_tag-doc","doc_tag-image","doc_tag-new","doc_tag-tag","no-post-thumbnail"],"acf":[],"_links":{"self":[{"href":"https:\/\/help.alltec.be\/index.php?rest_route=\/wp\/v2\/docs\/3945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.alltec.be\/index.php?rest_route=\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/help.alltec.be\/index.php?rest_route=\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/help.alltec.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.alltec.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3945"}],"version-history":[{"count":1,"href":"https:\/\/help.alltec.be\/index.php?rest_route=\/wp\/v2\/docs\/3945\/revisions"}],"predecessor-version":[{"id":9283,"href":"https:\/\/help.alltec.be\/index.php?rest_route=\/wp\/v2\/docs\/3945\/revisions\/9283"}],"up":[{"embeddable":true,"href":"https:\/\/help.alltec.be\/index.php?rest_route=\/wp\/v2\/docs\/2744"}],"wp:attachment":[{"href":"https:\/\/help.alltec.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3945"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/help.alltec.be\/index.php?rest_route=%2Fwp%2Fv2%2Fdoc_tag&post=3945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}