iconType == 1) { if (!$js->fontAwesomeIcon && !$js->fontAwesomeHoverIcon) { continue; } if (!$js->fontAwesomeIcon) { $fontAwesomeIcon = $js->fontAwesomeHoverIcon; $fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon; } else if (!$js->fontAwesomeHoverIcon) { $fontAwesomeIcon = $js->fontAwesomeIcon; $fontAwesomeHoverIcon = $js->fontAwesomeIcon; } else { $fontAwesomeIcon = $js->fontAwesomeIcon; $fontAwesomeHoverIcon = $js->fontAwesomeHoverIcon; } $points = " "; } else if ($js->iconType == 2) { if (!$js->customFirstImg && !$js->customSecondImg) { continue; } else if (!$js->customFirstImg) { $customFirstImg = $js->customSecondImg; $customSecondImg = $js->customSecondImg; } else if (!$js->customSecondImg) { $customFirstImg = $js->customFirstImg; $customSecondImg = $js->customFirstImg; } else { $customFirstImg = $js->customFirstImg; $customSecondImg = $js->customSecondImg; } $points = " "; } else if ($js->iconType == 3) { if (!$js->customText && !$js->customText) { continue; } else { $customText = $js->customText; } $points = " "; } $newObj = new stdClass(); $newObj->xPos = $js->xPos; $newObj->yPos = $js->yPos; $newObj->tWidth = $js->tWidth; $newObj->tHeight = isset($js->tHeight) ? $js->tHeight : ''; $newObj->selectedTemplate = $js->selectedTemplate; $newObj->iconType = $js->iconType; $newObj->fontAwesomIconSize = $js->fontAwesomIconSize; $newObj->fontAwesomIconSizeInIpad = $js->fontAwesomIconSizeInIpad; $newObj->fontAwesomIconSizeInMobile = $js->fontAwesomIconSizeInMobile; $newObj->iconWidth = $js->iconWidth; $newObj->imgOrIconSizeInIpad = $js->imgOrIconSizeInIpad; $newObj->imgOrIconSizeInMobile = $js->imgOrIconSizeInMobile; $jsonCode = json_encode($newObj); $customCode = htmlentities($jsonCode, ENT_QUOTES, "UTF-8", false); $directLink = ''; if ($js->elementType == 4) { $target = $js->openNewTab == '1' ? "target='_blank'" : ''; $directLink = "data-link-url='" . imh_6310_validate_url(esc_attr($js->linkURL)) . "' {$target}"; } else if ($js->customIconLinkType == '1' && isset($js->linkPosition) && $js->linkPosition == '2') { $target = $js->openNewTab == '1' ? "target='_blank'" : ''; $directLink = "data-link-url='" . imh_6310_validate_url(esc_attr($js->linkURL)) . "' {$target}"; } $always_show = isset($js->alwaysShow) && $js->alwaysShow == 1 ? 1 : 0; echo " "; imh_6310_load_templates($js, $counter, $ids); // $popupElement = ""; // $popupElementJS = "jQuery('body').append(\"{$popupElement}\");"; $pointCssCode = " .imh-6310-point-{$counter} .imh-6310-tooltip{ background: #FFF; color: #000; font-size: 16px; } "; if ($js->iconType == 1) { $pointCssCode .= " .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img { color: " . esc_attr($js->fontAwesomeIconColor) . " !important; font-size:" . esc_attr($js->fontAwesomIconSize) . "px !important; } .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img { color: " . esc_attr($js->fontAwesomeIconHoverColor) . " !important; font-size:" . esc_attr($js->fontAwesomIconSize) . "px !important; } @media screen and (min-width: 100px) and (max-width: 767px) { .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img { font-size:" . esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) . "px !important; } .imh-6310-point-icons-{$ids}-{$counter}::after{ width: " . (esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) + 10) . "px !important; height: " . (esc_attr(isset($js->fontAwesomIconSizeInMobile) ? $js->fontAwesomIconSizeInMobile : $js->fontAwesomIconSize) + 10) . "px !important; } } @media screen and (min-width: 768px) and (max-width: 1366px) { .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img { font-size:" . esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) . "px !important; } .imh-6310-point-icons-{$ids}-{$counter}::after{ width: " . (esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) + 10) . "px !important; height: " . (esc_attr(isset($js->fontAwesomIconSizeInIpad) ? $js->fontAwesomIconSizeInIpad : $js->fontAwesomIconSize) + 10) . "px !important; } } "; if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) { $pointCssCode .= " .imh-6310-point-icons-{$ids}-{$counter} { position: relative; display: block; } .imh-6310-point-icons-{$ids}-{$counter}::after{ content: ''; position: absolute; width: " . esc_attr($js->fontAwesomIconSize + 10) . "px; height: " . esc_attr($js->fontAwesomIconSize + 10) . "px; box-shadow: 0 0 1px 3px white; animation: pulse-animation-{$ids}-{$counter} 2s infinite; display: block; border-radius: 50%; transform: translate(-50%, -50%); top: 50%; left: 50%; pointer-events: none; } @keyframes pulse-animation-{$ids}-{$counter} { 0% { box-shadow: 0 0 0 0px {$js->glowColor}; } 100% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); } } "; } } else if ($js->iconType == 2) { $pointCssCode .= " .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img { width:" . esc_attr($js->imgOrIconSize) . "px !important; height: " . esc_attr($js->imgOrIconSize) . "px !important; border-radius: 50%; } .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img { width:" . esc_attr($js->imgOrIconSize) . "px !important; height: " . esc_attr($js->imgOrIconSize) . "px !important; border-radius: 50%; } @media screen and (min-width: 100px) and (max-width: 767px) { .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img { width:" . esc_attr(isset($js->imgOrIconSizeInMobile) ? $js->imgOrIconSizeInMobile : $js->imgOrIconSize) . "px !important; height: " . esc_attr(isset($js->imgOrIconSizeInMobile) ? $js->imgOrIconSizeInMobile : $js->imgOrIconSize) . "px !important; } } @media screen and (min-width: 768px) and (max-width: 1366px) { .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-main-img, .imh-6310-point-{$ids}-{$counter} .imh-6310-pin-hover-img { width:" . esc_attr(isset($js->imgOrIconSizeInIpad) ? $js->imgOrIconSizeInIpad : $js->imgOrIconSize) . "px !important; height: " . esc_attr(isset($js->imgOrIconSizeInIpad) ? $js->imgOrIconSizeInIpad : $js->imgOrIconSize) . "px !important; } } "; if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) { $pointCssCode .= " .imh-6310-point-icons-{$ids}-{$counter} { position: relative; display: block; } .imh-6310-point-icons-{$ids}-" . esc_attr($counter) . "::after { content: ''; position: absolute; width: " . esc_attr($js->imgOrIconSize + 10) . "px; height: " . esc_attr($js->imgOrIconSize + 10) . "px; box-shadow: 0 0 1px 3px white; animation: pulse-animation-{$ids}-{$counter} 2s infinite; display: block; border-radius: 50%; transform: translate(-50%, -50%); top: 50%; left: 50%; pointer-events: none; } @keyframes pulse-animation-{$ids}-{$counter} { 0% { box-shadow: 0 0 0 0px {$js->glowColor}; } 100% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); } } "; } } else if ($js->iconType == 3) { $pointCssCode .= " .imh-6310-point-{$ids}-{$counter} .imh-6310-customtext { font-size:" . esc_attr($js->customTextSize) . "px !important; line-height:" . esc_attr($js->customTextSize) . "px; color: " . esc_attr($js->customTextColor) . " !important; background-color:" . esc_attr($js->customTextBgColor) . " !important; padding: 5px 10px; } "; if (isset($js->blinkTooltip) && $js->blinkTooltip == 1) { $pointCssCode .= ".imh-6310-point-icons-{$ids}-{$counter} { animation: pulse-animation-{$ids}-{$counter} 2s infinite; } @keyframes pulse-animation-{$ids}-{$counter} { 0% { box-shadow: 0 0 0 0px {$js->glowColor}; } 100% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); } }"; } } if ($image_zoom == 2) { if(isset($cssData['display_device'])){ if($cssData['display_device'] == 1){ $pointCssCode .= "@media screen and (max-width: 767px) {.imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: grab;}}"; } else if($cssData['display_device'] == 2){ $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;}}"; } else if($cssData['display_device'] == 3){ $pointCssCode .= ".imh-6310-annotation-box-{$ids} .imh-6310-annotation-box-inner{ cursor: grab;}"; } } $pointCssCode .= " .imh-6310-hover-content-{$ids}-{$counter} img{ cursor: pointer; } "; } wp_register_style("imh-6310-template-" . esc_attr($counter) . "-css", ""); wp_enqueue_style("imh-6310-template-" . esc_attr($counter) . "-css"); wp_add_inline_style("imh-6310-template-" . esc_attr($counter) . "-css", $pointCssCode); if($counter === 4) break; $counter++; } } $customCSS = $cssData['custom_css']; $selectedKey = isset($cssData['icon_position']) ? $cssData['icon_position'] : 'right-top'; $background = isset($cssData['icon_background']) ? esc_attr($cssData['icon_background']) : 'rgba(0, 0, 0, 0.9)'; $buttonPosition = "display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 1 ? 'flex' : 'none') . " !important; flex-direction: column; align-items: center; gap: 5px; position: absolute; z-index: 9999; background: {$background}; padding: 5px; border-radius: 6px;"; $buttonPositionMobile = 'top: 10px; right: 10px;'; $buttonImage = "position: relative; display: block; opacity: .8; padding: 3px; "; $buttonExtra = ""; if($selectedKey === 'right-top'){ $buttonPosition .= "top: 15px; right: 15px;"; } else if($selectedKey === 'right-bottom'){ $buttonPosition .= "bottom: 15px; right: 15px;"; } else if($selectedKey === 'left-top'){ $buttonPosition .= "top: 15px; left: 15px;"; } else if($selectedKey === 'left-bottom'){ $buttonPosition .= "bottom: 15px; left: 15px;"; } else{ $buttonPosition = "display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 1 ? 'flex' : 'none') . " !important; justify-content: " . (isset($cssData['icon_position']) ? $cssData['icon_position'] : 'flex-start') . "; margin-bottom: 20px;"; $buttonImage = "margin: 0 10px;"; $buttonExtra = ".imh-6310-annotation-box-wrapper-{$ids} .imh-6310-builder-box-divider{display: none !important;}"; $buttonPositionMobile = ''; } $customCSS .= " .imh-6310-close-button{ width: {$desktopSize}px; height: {$desktopSize}px; background-image: url('{$closeIcon}'); right: -" . ($desktopSize / 2) . "px; top: -" . ($desktopSize / 2) . "px; background-size: cover; } .imh-6310-close-button-mobile{ display: none; } .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons{ {$buttonPosition} } .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img{ width: " . (isset($cssData['desktop_icon_size']) ? $cssData['desktop_icon_size'] : '30') . "px; height: " . (isset($cssData['desktop_icon_size']) ? $cssData['desktop_icon_size'] : '30') . "px; cursor: pointer; {$buttonImage} } {$buttonExtra} .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img:hover{ opacity: 1; } @media screen and (min-width: 100px) and (max-width: 767px) { .imh-6310-close-button{ width: {$mobileSize}px; height: {$mobileSize}px; right: calc(.5% + ".($mobileSize / 2)."px); top: -" . ($mobileSize / 2) . "px; background-size: cover; } .imh-6310-close-button-mobile{ display: block; } } @media screen and (min-width: 768px) and (max-width: 1366px) { .imh-6310-close-button{ width: {$iPadSize}px; height: {$iPadSize}px; right: calc(.5% + ".($iPadSize / 2)."px); top: -" . ($iPadSize / 2) . "px; background-size: cover; } .imh-6310-close-button-mobile{ display: block; } } @media screen and (min-width: 100px) and (max-width: 1366px) { .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons{ display: " . (isset($cssData['zoom_feature']) && $cssData['zoom_feature'] == 2 && $cssData['display_device'] != 2 ? 'flex' : 'none') . " !important; {$buttonPositionMobile} } .imh-6310-annotation-box-wrapper-{$ids} .imh-6310-zoom-buttons img{ width: " . (isset($cssData['mobile_icon_size']) ? $cssData['mobile_icon_size'] : '25') . "px; height: " . (isset($cssData['mobile_icon_size']) ? $cssData['mobile_icon_size'] : '25') . "px; margin: 0 5px; } } "; wp_register_style("imh-6310-custom-code-" . esc_attr($ids) . "-css", ""); wp_enqueue_style("imh-6310-custom-code-" . esc_attr($ids) . "-css"); wp_add_inline_style("imh-6310-custom-code-" . esc_attr($ids) . "-css", $customCSS); ?>