PluginProbe
Image Hotspot – Map Image Annotation / 3.4
Image Hotspot – Map Image Annotation v3.4
3.8 3.7 3.6 trunk 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 3.0 All 30 releases
← All changes | shortcode.php +55 -401 3.8 → 3.4 View file →
@@ -1,22 +1,13 @@
1 1 <?php
2 2 global $wpdb;
3 3 $style_table = $wpdb->prefix . 'imh_6310_style';
4 -$font_awesome = imh_6310_get_option('imh_6310_font_awesome_status');
5 -$closeIcon = imh_6310_get_option('imh_6310_close_icon');
6 -$desktopSize = imh_6310_get_option('imh_6310_desktop_size');
7 -$iPadSize = imh_6310_get_option('imh_6310_ipad_size');
8 -$mobileSize = imh_6310_get_option('imh_6310_mobile_size');
9 4
10 -$closeIcon = $closeIcon ? $closeIcon : imh_6310_plugin_dir_url . 'assets/images/close.png';
11 -$desktopSize = $desktopSize ? $desktopSize : 30;
12 -$mobileSize = $mobileSize ? $mobileSize : 20;
13 -$iPadSize = $iPadSize ? $iPadSize : $mobileSize;
14 5
15 6 $cssData = [];
16 7 if ($ids) {
17 8 $styledata = $wpdb->get_row($wpdb->prepare("SELECT * FROM $style_table WHERE id = %d ", $ids), ARRAY_A);
18 - if (!$styledata) return;
9 + if(!$styledata) return;
19 10 $css = explode("!!##!!", $styledata['css']);
20 11 $key = explode(",", $css[0]);
21 12 $value = explode("||##||", $css[1]);
22 13 $filterKey = [];
@@ -29,421 +20,84 @@
29 20 }
30 21 $cssData = array_combine($filterKey, $filterValue);
31 22 }
32 23 $jsonData = isset($cssData['json_data']) ? json_decode(stripslashes(html_entity_decode($cssData['json_data']))) : [];
33 -$font_awesome = imh_6310_get_option('imh_6310_font_awesome_status');
34 -if ($font_awesome != 1) {
35 - wp_enqueue_style('imh-font-awesome-new', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
36 - wp_enqueue_style('imh-font-awesome-old', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/v4-shims.min.css');
37 -}
38 24
25 +wp_enqueue_style('imh-font-awesome-new', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');
26 +wp_enqueue_style('imh-font-awesome-old', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/v4-shims.min.css');
39 27 wp_enqueue_style('imh-6310-owl-carousel', plugins_url('output-common-css.css', __FILE__));
40 28 include imh_6310_plugin_url . "output-css.php";
41 -
42 -$image_zoom = isset($cssData['zoom_feature']) ? esc_attr($cssData['zoom_feature']) : 0;
43 -$tooltip_position = isset($cssData['tooltip_position']) ? esc_attr($cssData['tooltip_position']) : 0;
44 -$top_bottom = isset($cssData['top_bottom']) ? esc_attr($cssData['top_bottom']) : 0;
45 -$left_right = isset($cssData['left_right']) ? esc_attr($cssData['left_right']) : 0;
46 29 ?>
30 +<style>.imh-6310-point-icons{display: none}</style>
31 +<div class="imh-6310-annotation-box imh-6310-annotation-box-<?php echo $ids; ?>" data-id="<?php echo $ids; ?>">
32 + <img src="<?php echo isset($cssData['main_image']) ? $cssData['main_image'] : '' ?>" class="imh-6310-main-image imh-6310-img" data-imh-cls="imh-6310-main-image imh-6310-img" data-imh-value="<?php echo isset($cssData['main_image']) ? $cssData['main_image'] : '' ?>" alt="<?php echo esc_attr($styledata['name']) ?>" />
33 + <?php
34 + if ($jsonData) {
35 +
36 + $counter = 1;
47 37
48 -
49 -<div class="imh-6310-annotation-box-wrapper imh-6310-annotation-box-wrapper-<?php echo $ids; ?>">
50 - <div class="imh-6310-zoom-buttons" style="display: none;">
51 - <img src="<?php echo isset($cssData['zoom_in_icon']) && $cssData['zoom_in_icon'] ? esc_url($cssData['zoom_in_icon']) : imh_6310_plugin_dir_url . 'assets/images/zoom-in.png' ?>" alt="" class="imh-6310-zoom-in">
52 - <div class="imh-6310-builder-box-divider"></div>
53 - <img src="<?php echo isset($cssData['zoom_out_icon']) && $cssData['zoom_out_icon'] ? esc_url($cssData['zoom_out_icon']) : imh_6310_plugin_dir_url . 'assets/images/zoom-out.png' ?>" alt="" class="imh-6310-zoom-out">
54 - </div>
55 -
56 - <div
57 - class="imh-6310-annotation-box imh-6310-annotation-box-<?php echo $ids; ?>"
58 - data-id="<?php echo $ids; ?>"
59 - data-image-zoom="<?php echo $image_zoom == 2 ? 1 : 0; ?>"
60 - data-display-type="<?php echo isset($cssData['display_type']) ? $cssData['display_type'] : 0; ?>"
61 - data-tooltip-position="<?php echo $tooltip_position; ?>"
62 - data-top-bottom="<?php echo $top_bottom; ?>"
63 - data-left-right="<?php echo $left_right; ?>">
64 - <div class="imh-6310-annotation-box-inner">
65 - <img src="<?php echo isset($cssData['main_image']) ? $cssData['main_image'] : '' ?>" class="imh-6310-main-image imh-6310-img" data-imh-cls="imh-6310-main-image imh-6310-img" data-imh-value="<?php echo isset($cssData['main_image']) ? $cssData['main_image'] : '' ?>" alt="<?php echo esc_attr($styledata['name']) ?>" />
66 - <?php
67 - if ($jsonData) {
68 -
69 - $counter = 1;
70 -
71 - foreach ($jsonData as $js) {
72 - if ($js->iconType == 1) {
73 - if (!$js->fontAwesomeIcon && !$js->fontAwesomeHoverIcon) {
74 - continue;
75 - }
76 - if (!$js->fontAwesomeIcon) {
77 - $fontAwesomeIcon = $js->fontAwesomeHoverIcon;
78 - $fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon;
79 - } else if (!$js->fontAwesomeHoverIcon) {
80 - $fontAwesomeIcon = $js->fontAwesomeIcon;
81 - $fontAwesomeHoverIcon = $js->fontAwesomeIcon;
82 - } else {
83 - $fontAwesomeIcon = $js->fontAwesomeIcon;
84 - $fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon;
85 - }
86 - $points = "
87 - <i class='{$fontAwesomeIcon} imh-6310-pin-main-img imh-6310-blinking-{$ids}-{$counter}'></i>
88 - <i class='{$fontAwesomeHoverIcon} imh-6310-pin-hover-img imh-6310-blinking-hover-{$ids}-{$counter}'></i>
38 + foreach ($jsonData as $js) {
39 + $jsonCode = json_encode($js);
40 +
41 + if (!$js->fontAwesomeIcon && !$js->fontAwesomeHoverIcon) {
42 + continue;
43 + }
44 + if (!$js->fontAwesomeIcon) {
45 + $fontAwesomeIcon = $js->fontAwesomeHoverIcon;
46 + $fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon;
47 + }
48 + else if (!$js->fontAwesomeHoverIcon) {
49 + $fontAwesomeIcon = $js->fontAwesomeIcon;
50 + $fontAwesomeHoverIcon = $js->fontAwesomeIcon;
51 + } else {
52 + $fontAwesomeIcon = $js->fontAwesomeIcon;
53 + $fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon;
54 + }
55 + $points = "
56 + <i class='{$fontAwesomeIcon} imh-6310-pin-main-img'></i>
57 + <i class='{$fontAwesomeHoverIcon} imh-6310-pin-hover-img'></i>
89 58 ";
90 - } else if ($js->iconType == 2) {
91 - if (!$js->customFirstImg && !$js->customSecondImg) {
92 - continue;
93 - } else if (!$js->customFirstImg) {
94 - $customFirstImg = $js->customSecondImg;
95 - $customSecondImg = $js->customSecondImg;
96 - } else if (!$js->customSecondImg) {
97 - $customFirstImg = $js->customFirstImg;
98 - $customSecondImg = $js->customFirstImg;
99 - } else {
100 - $customFirstImg = $js->customFirstImg;
101 - $customSecondImg = $js->customSecondImg;
102 - }
103 - $points = "
104 - <img src='{$customFirstImg}' class='imh-6310-pin-main-img imh-6310-img imh-6310-blinking-{$ids}-{$counter}' data-imh-cls='imh-6310-pin-main-img imh-6310-img imh-6310-blinking-{$ids}-{$counter}' data-imh-value='{$customFirstImg}' />
105 - <img src='{$customSecondImg}' class='imh-6310-pin-hover-img imh-6310-img imh-6310-blinking-hover-{$ids}-{$counter}' data-imh-cls='imh-6310-pin-hover-img imh-6310-img imh-6310-blinking-hover-{$ids}-{$counter}' data-imh-value='{$customSecondImg}' />
106 - ";
107 - } else if ($js->iconType == 3) {
108 - if (!$js->customText && !$js->customText) {
109 - continue;
110 - } else {
111 - $customText = $js->customText;
112 - }
113 - $points = "
114 - <div class='imh-6310-customtext imh-6310-blinking-{$ids}-{$counter}'>" . esc_attr($customText) . "</div>
115 - ";
116 - }
117 -
118 - $newObj = new stdClass();
119 - $newObj->xPos = $js->xPos;
120 - $newObj->yPos = $js->yPos;
121 - $newObj->tWidth = $js->tWidth;
122 - $newObj->tHeight = isset($js->tHeight) ? $js->tHeight : '';
123 - $newObj->selectedTemplate = $js->selectedTemplate;
124 -
125 - $newObj->iconType = $js->iconType;
126 -
127 - $newObj->fontAwesomIconSize = $js->fontAwesomIconSize;
128 - $newObj->fontAwesomIconSizeInIpad = $js->fontAwesomIconSizeInIpad;
129 - $newObj->fontAwesomIconSizeInMobile = $js->fontAwesomIconSizeInMobile;
130 -
131 - $newObj->iconWidth = $js->iconWidth;
132 - $newObj->imgOrIconSizeInIpad = $js->imgOrIconSizeInIpad;
133 - $newObj->imgOrIconSizeInMobile = $js->imgOrIconSizeInMobile;
134 -
135 -
136 -
137 - $jsonCode = json_encode($newObj);
138 - $customCode = htmlentities($jsonCode, ENT_QUOTES, "UTF-8", false);
139 - $directLink = '';
140 - if ($js->elementType == 4) {
141 - $target = $js->openNewTab == '1' ? "target='_blank'" : '';
142 - $directLink = "data-link-url='" . imh_6310_validate_url(esc_attr($js->linkURL)) . "' {$target}";
143 - } else if ($js->customIconLinkType == '1' && isset($js->linkPosition) && $js->linkPosition == '2') {
144 - $target = $js->openNewTab == '1' ? "target='_blank'" : '';
145 - $directLink = "data-link-url='" . imh_6310_validate_url(esc_attr($js->linkURL)) . "' {$target}";
146 - }
147 - $always_show = isset($js->alwaysShow) && $js->alwaysShow == 1 ? 1 : 0;
148 - echo "
149 - <div data-id='{$counter}' data-always-show='{$always_show}' data-json='{$customCode}' class='imh-6310-drag imh-6310-point-{$ids}-{$counter}' style='visibility: hidden' {$directLink}>
150 - <div class='imh-6310-point-icons imh-6310-point-icons-{$ids}-" . esc_attr($counter) . "'>
59 +
60 +
61 + echo "
62 + <div data-id='{$counter}' data-json='{$jsonCode}' class='imh-6310-drag imh-6310-point-{$ids}-{$counter}' style='display: none'>
63 + <div class='imh-6310-point-icons'>
151 64 {$points}
152 65 </div>
153 66 </div>
154 67 ";
155 - imh_6310_load_templates($js, $counter, $ids);
156 - // $popupElement = "<div class='imh-6310-hover-content imh-6310-hover-content-{$counter}'>" . . "</div>";
157 - // $popupElementJS = "jQuery('body').append(\"{$popupElement}\");";
158 -
159 - $pointCssCode = "
160 - .imh-6310-point-{$counter} .imh-6310-tooltip{
68 + imh_6310_load_templates($js, $counter, $ids);
69 + $pointCssCode = "
70 + .imh-6310-point-{$ids}-{$counter} .imh-6310-tooltip{
161 71 background: #FFF;
162 72 color: #000;
163 73 font-size: 16px;
164 74 }
165 75 ";
166 - if ($js->iconType == 1) {
167 - $pointCssCode .= "
76 +
77 + $pointCssCode .= "
168 78 .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img {
169 - color: " . esc_attr($js->fontAwesomeIconColor) . " !important;
170 - font-size:" . esc_attr($js->fontAwesomIconSize) . "px !important;
79 + color: ".esc_attr($js->fontAwesomeIconColor)." !important;
80 + font-size:".esc_attr($js->fontAwesomIconSize)."px !important;
171 81 }
172 82 .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
173 - color: " . esc_attr($js->fontAwesomeIconHoverColor) . " !important;
174 - font-size:" . esc_attr($js->fontAwesomIconSize) . "px !important;
83 + color: ".esc_attr($js->fontAwesomeIconHoverColor)." !important;
84 + font-size:".esc_attr($js->fontAwesomIconSize)."px !important;
175 85 }
176 - @media screen and (min-width: 100px) and (max-width: 767px) {
177 - .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
178 - font-size:" . esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) . "px !important;
179 - }
180 - .imh-6310-point-icons-{$ids}-{$counter}::after{
181 - width: " . (esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) + 10) . "px !important;
182 - height: " . (esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) + 10) . "px !important;
183 - }
184 - }
185 - @media screen and (min-width: 768px) and (max-width: 1366px) {
186 - .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
187 - font-size:" . esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) . "px !important;
188 - }
189 - .imh-6310-point-icons-{$ids}-{$counter}::after{
190 - width: " . (esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) + 10) . "px !important;
191 - height: " . (esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) + 10) . "px !important;
192 - }
193 - }
194 86 ";
195 - if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) {
196 - $pointCssCode .= "
197 - .imh-6310-point-icons-{$ids}-{$counter} {
198 - position: relative;
199 - display: block;
200 - }
201 - .imh-6310-point-icons-{$ids}-{$counter}::after{
202 - content: '';
203 - position: absolute;
204 - width: " . esc_attr($js->fontAwesomIconSize + 10) . "px;
205 - height: " . esc_attr($js->fontAwesomIconSize + 10) . "px;
206 - box-shadow: 0 0 1px 3px white;
207 - animation: pulse-animation-{$ids}-{$counter} 2s infinite;
208 - display: block;
209 - border-radius: 50%;
210 - transform: translate(-50%, -50%);
211 - top: 50%;
212 - left: 50%;
213 - pointer-events: none;
214 - }
215 -
216 - @keyframes pulse-animation-{$ids}-{$counter} {
217 - 0% {
218 - box-shadow: 0 0 0 0px {$js->glowColor};
219 - }
220 - 100% {
221 - box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
222 - }
223 - }
224 - ";
225 - }
226 - } else if ($js->iconType == 2) {
227 - $pointCssCode .= "
228 - .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img {
229 - width:" . esc_attr($js->imgOrIconSize) . "px !important;
230 - height: " . esc_attr($js->imgOrIconSize) . "px !important;
231 - border-radius: 50%;
232 - }
233 - .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
234 - width:" . esc_attr($js->imgOrIconSize) . "px !important;
235 - height: " . esc_attr($js->imgOrIconSize) . "px !important;
236 - border-radius: 50%;
237 - }
238 - @media screen and (min-width: 100px) and (max-width: 767px) {
239 - .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
240 - width:" . esc_attr(isset($js->imgOrIconSizeInMobile) ? $js->imgOrIconSizeInMobile : $js->imgOrIconSize) . "px !important;
241 - height: " . esc_attr(isset($js->imgOrIconSizeInMobile) ? $js->imgOrIconSizeInMobile : $js->imgOrIconSize) . "px !important;
242 - }
243 - }
244 - @media screen and (min-width: 768px) and (max-width: 1366px) {
245 - .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img {
246 - width:" . esc_attr(isset($js->imgOrIconSizeInIpad) ? $js->imgOrIconSizeInIpad : $js->imgOrIconSize) . "px !important;
247 - height: " . esc_attr(isset($js->imgOrIconSizeInIpad) ? $js->imgOrIconSizeInIpad : $js->imgOrIconSize) . "px !important;
248 - }
249 - }
250 - ";
251 - if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) {
252 - $pointCssCode .= "
253 - .imh-6310-point-icons-{$ids}-{$counter} {
254 - position: relative;
255 - display: block;
256 - }
257 - .imh-6310-point-icons-{$ids}-" . esc_attr($counter) . "::after {
258 - content: '';
259 - position: absolute;
260 - width: " . esc_attr($js->imgOrIconSize + 10) . "px;
261 - height: " . esc_attr($js->imgOrIconSize + 10) . "px;
262 - box-shadow: 0 0 1px 3px white;
263 - animation: pulse-animation-{$ids}-{$counter} 2s infinite;
264 - display: block;
265 - border-radius: 50%;
266 - transform: translate(-50%, -50%);
267 - top: 50%;
268 - left: 50%;
269 - pointer-events: none;
270 - }
271 -
272 - @keyframes pulse-animation-{$ids}-{$counter} {
273 - 0% {
274 - box-shadow: 0 0 0 0px {$js->glowColor};
275 - }
276 - 100% {
277 - box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
278 - }
279 - }
280 - ";
281 - }
282 - } else if ($js->iconType == 3) {
283 - $pointCssCode .= "
284 - .imh-6310-point-{$ids}-{$counter} .imh-6310-customtext {
285 - font-size:" . esc_attr($js->customTextSize) . "px !important;
286 - line-height:" . esc_attr($js->customTextSize) . "px;
287 - color: " . esc_attr($js->customTextColor) . " !important;
288 - background-color:" . esc_attr($js->customTextBgColor) . " !important;
289 - padding: 5px 10px;
290 - }
291 - ";
292 - if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) {
293 - $pointCssCode .= ".imh-6310-point-icons-{$ids}-{$counter} {
294 - animation: pulse-animation-{$ids}-{$counter} 2s infinite;
295 - }
296 -
297 - @keyframes pulse-animation-{$ids}-{$counter} {
298 - 0% {
299 - box-shadow: 0 0 0 0px {$js->glowColor};
300 - }
301 - 100% {
302 - box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
303 - }
304 - }";
305 - }
306 - }
307 -
308 - if ($image_zoom == 2) {
309 - if(isset($cssData['display_device'])){
310 - if($cssData['display_device'] == 1){
311 - $pointCssCode .= "@media screen and (max-width: 767px) {.imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: grab;}}";
312 - } else if($cssData['display_device'] == 2){
313 - $pointCssCode .= ".imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: grab;}@media screen and (max-width: 767px) {.imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: default;}}";
314 - } else if($cssData['display_device'] == 3){
315 - $pointCssCode .= ".imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: grab;}";
316 - }
317 - }
318 -
319 - $pointCssCode .= "
320 - .imh-6310-hover-content-{$ids}-{$counter} img{
321 - cursor: pointer;
322 - }
323 - ";
324 - }
325 -
326 -
327 -
328 - wp_register_style("imh-6310-template-" . esc_attr($counter) . "-css", "");
329 - wp_enqueue_style("imh-6310-template-" . esc_attr($counter) . "-css");
330 - wp_add_inline_style("imh-6310-template-" . esc_attr($counter) . "-css", $pointCssCode);
331 - if($counter === 4) break;
332 - $counter++;
333 - }
87 + wp_register_style("imh-6310-template-" . esc_attr($counter) . "-css", "");
88 + wp_enqueue_style("imh-6310-template-" . esc_attr($counter) . "-css");
89 + wp_add_inline_style("imh-6310-template-" . esc_attr($counter) . "-css", $pointCssCode);
90 + $counter++;
91 + if($counter == 7){
92 + break;
334 93 }
335 -
336 - $customCSS = $cssData['custom_css'];
337 -
338 - $selectedKey = isset($cssData['icon_position']) ? $cssData['icon_position'] : 'right-top';
339 - $background = isset($cssData['icon_background']) ? esc_attr($cssData['icon_background']) : 'rgba(0, 0, 0, 0.9)';
340 - $buttonPosition = "display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 1 ? 'flex' : 'none') . " !important;
341 - flex-direction: column;
342 - align-items: center;
343 - gap: 5px;
344 - position: absolute;
345 - z-index: 9999;
346 - background: {$background};
347 - padding: 5px;
348 - border-radius: 6px;";
349 - $buttonPositionMobile = 'top: 10px; right: 10px;';
350 - $buttonImage = "position: relative;
351 - display: block;
352 - opacity: .8;
353 - padding: 3px;
354 - ";
355 - $buttonExtra = "";
356 -
357 - if($selectedKey === 'right-top'){
358 - $buttonPosition .= "top: 15px; right: 15px;";
359 - } else if($selectedKey === 'right-bottom'){
360 - $buttonPosition .= "bottom: 15px; right: 15px;";
361 - } else if($selectedKey === 'left-top'){
362 - $buttonPosition .= "top: 15px; left: 15px;";
363 - } else if($selectedKey === 'left-bottom'){
364 - $buttonPosition .= "bottom: 15px; left: 15px;";
365 - } else{
366 - $buttonPosition = "display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 1 ? 'flex' : 'none') . " !important;
367 - justify-content: " . (isset($cssData['icon_position']) ? $cssData['icon_position'] : 'flex-start') . ";
368 - margin-bottom: 20px;";
369 - $buttonImage = "margin: 0 10px;";
370 - $buttonExtra = ".imh-6310-annotation-box-wrapper-{$ids} .imh-6310-builder-box-divider{display: none !important;}";
371 -
372 - $buttonPositionMobile = '';
373 - }
374 -
375 - $customCSS .= "
376 - .imh-6310-close-button{
377 - width: {$desktopSize}px;
378 - height: {$desktopSize}px;
379 - background-image: url('{$closeIcon}');
380 - right: -" . ($desktopSize / 2) . "px;
381 - top: -" . ($desktopSize / 2) . "px;
382 - background-size: cover;
383 94 }
384 - .imh-6310-close-button-mobile{
385 - display: none;
386 - }
387 - .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons{
388 - {$buttonPosition}
389 - }
390 - .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img{
391 - width: " . (isset($cssData['desktop_icon_size']) ? $cssData['desktop_icon_size'] : '30') . "px;
392 - height: " . (isset($cssData['desktop_icon_size']) ? $cssData['desktop_icon_size'] : '30') . "px;
393 - cursor: pointer;
394 - {$buttonImage}
395 - }
396 - {$buttonExtra}
397 - .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img:hover{
398 - opacity: 1;
399 - }
400 - @media screen and (min-width: 100px) and (max-width: 767px) {
401 - .imh-6310-close-button{
402 - width: {$mobileSize}px;
403 - height: {$mobileSize}px;
404 - right: calc(.5% + ".($mobileSize / 2)."px);
405 - top: -" . ($mobileSize / 2) . "px;
406 - background-size: cover;
407 - }
408 - .imh-6310-close-button-mobile{
409 - display: block;
410 - }
411 - }
412 - @media screen and (min-width: 768px) and (max-width: 1366px) {
413 - .imh-6310-close-button{
414 - width: {$iPadSize}px;
415 - height: {$iPadSize}px;
416 - right: calc(.5% + ".($iPadSize / 2)."px);
417 - top: -" . ($iPadSize / 2) . "px;
418 - background-size: cover;
419 - }
420 - .imh-6310-close-button-mobile{
421 - display: block;
422 - }
423 - }
424 - @media screen and (min-width: 100px) and (max-width: 1366px) {
425 - .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons{
426 - display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 2 ? 'flex' : 'none') . " !important;
427 - {$buttonPositionMobile}
428 - }
429 - .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img{
430 - width: " . (isset($cssData['mobile_icon_size']) ? $cssData['mobile_icon_size'] : '25') . "px;
431 - height: " . (isset($cssData['mobile_icon_size']) ? $cssData['mobile_icon_size'] : '25') . "px;
432 - margin: 0 5px;
433 - }
434 - }
435 - ";
95 + }
96 +
436 97
98 + ?>
99 +</div>
437 100
438 -
439 - wp_register_style("imh-6310-custom-code-" . esc_attr($ids) . "-css", "");
440 - wp_enqueue_style("imh-6310-custom-code-" . esc_attr($ids) . "-css");
441 - wp_add_inline_style("imh-6310-custom-code-" . esc_attr($ids) . "-css", $customCSS);
442 - ?>
443 - </div>
444 - </div>
445 -</div>
446 101 <?php
447 -wp_enqueue_script('imh-6310-output', plugins_url('assets/js/imh-main-output-file-pro.js', __FILE__), array('jquery'), TRUE);
448 -wp_enqueue_script('imh-6310-zoom-in-out-drag', plugins_url('assets/js/zoom-in-out-drag.js', __FILE__), array('jquery'), TRUE);
102 +wp_enqueue_script('imh-6310-output', plugins_url('assets/js/main-output-file.js', __FILE__), array('jquery'), TRUE);
449 103 ?>