{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "bpivb/image-viewer-directory",
  "title": "Image Viewer",
  "description": "A powerful Gutenberg block plugin that lets you display images with advanced interactive features like zoom, magnify, map view, hotspots, and Comparison Slider.",
  "category": "widgets",
  "keywords": [
    "image",
    "viewer",
    "block",
    "hotspot",
    "magnify",
    "map"
  ],
  "textdomain": "image-viewer",
  "attributes": {
    "align": {
      "type": "string",
      "default": ""
    },
    "cId": {
      "type": "string",
      "default": ""
    },
    "img": {
      "type": "object",
      "default": {
        "id": null,
        "url": "https://templates.bplugins.com/wp-content/uploads/2025/02/n-39.jpg",
        "alt": "",
        "title": ""
      }
    },
    "viewerType": {
      "type": "string",
      "default": "map"
    },
    "maps": {
      "type": "array",
      "default": [
        {
          "mapColor": "#ddd6",
          "mapBorder": {
            "color": "#080714e0",
            "width": "0px",
            "style": "solid"
          },
          "mapShow": false,
          "top": 100,
          "left": 100,
          "width": 100,
          "height": 100,
          "shape": "rect",
          "link": "https://bplugins.com/",
          "title": "bPlugins",
          "target": "_blank"
        }
      ]
    },
    "zoom": {
      "type": "object",
      "default": {
        "disablePan": false,
        "disableZoom": false,
        "disableXAxis": false,
        "disableYAxis": false,
        "duration": 200,
        "panOnlyWhenZoomed": false,
        "startScale": 1,
        "step": 0.3,
        "contain": "null",
        "border": {
          "color": "#11d67400",
          "width": "2px",
          "style": "solid"
        }
      }
    },
    "magnify": {
      "type": "object",
      "default": {
        "shadow": [
          {
            "hOffset": "0px",
            "vOffset": "0px",
            "blur": "0px",
            "spreed": "7px",
            "color": "rgba(255, 255, 255, 0.85)",
            "isInset": true
          }
        ],
        "speed": 200,
        "timeOut": -1,
        "finalWidth": 500,
        "finalHeight": 500,
        "magnifieWidth": 500,
        "magnifieHeight": 500,
        "limitBounds": true,
        "height": 200
      }
    },
    "width": {
      "type": "string",
      "default": "100%"
    },
    "height": {
      "type": "string",
      "default": "320px"
    },
    "autoRotate": {
      "type": "boolean",
      "default": true
    },
    "rotateSpeed": {
      "type": "number",
      "default": 2
    },
    "hideControl": {
      "type": "boolean",
      "default": true
    },
    "autoPlay": {
      "type": "boolean",
      "default": true
    },
    "imgRotation": {
      "type": "object",
      "default": {
        "rotation": 0,
        "flipType": "",
        "brightness": 100,
        "contrast": 100,
        "imgRotationWidth": "100%",
        "imgRotationHeight": {
          "desktop": "400px",
          "tablet": "300px",
          "mobile": "200px"
        }
      }
    },
    "masking": {
      "type": "object",
      "default": {
        "maskingType": "circle",
        "maskHeight": "400px",
        "maskwidth": "100%",
        "mask": {
          "shape": {
            "type": "circle",
            "url": ""
          },
          "size": {
            "type": "contain",
            "scale": "50%"
          },
          "position": {
            "type": "center center",
            "x": "50px",
            "y": "50px"
          },
          "repeat": "no-repeat"
        }
      }
    },
    "viewport": {
      "type": "object",
      "default": {
        "viewportType": "desktop",
        "desktop": {
          "width": "100%",
          "height": "468px"
        },
        "tablet": {
          "width": "480px",
          "height": "640px"
        },
        "mobile": {
          "width": "360px",
          "height": "568px"
        }
      }
    },
    "multiImages": {
      "type": "array",
      "default": [
        {
          "id": "1",
          "name": "Base Layer",
          "url": "https://templates.bplugins.com/wp-content/uploads/2025/02/n-39.jpg",
          "opacity": 100,
          "visible": true
        },
        {
          "id": "2",
          "name": "Overlay 1",
          "url": " https://templates.bplugins.com/wp-content/uploads/2025/11/imagemapBplugins-scaled.jpg",
          "opacity": 50,
          "visible": true
        }
      ]
    },
    "muitImagesStyle": {
      "type": "object",
      "default": {
        "muitImageHeight": {
          "desktop": "480px",
          "tablet": "360px",
          "mobile": "208px"
        },
        "width": "100%"
      }
    },
    "aspectRatio": {
      "type": "object",
      "default": {
        "selectedRatio": {
          "ratio": "1:1",
          "class": "aspect-ratio-1-1"
        },
        "objectFitData": "Cover",
        "aspectBg": "#1f2937"
      }
    },
    "hotspots": {
      "type": "array",
      "default": [
        {
          "id": 1,
          "x": "25%",
          "y": "35%",
          "title": "Workspace Setup",
          "description": "Modern ergonomic desk with dual monitors for enhanced productivity",
          "linkLabel": "Buy Now",
          "link": "https://bplugins.com/",
          "isLinkNewTab": false,
          "icon": "<svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 17.55-1.77 1.72a2.47 2.47 0 0 1-3.5-3.5l4.54-4.55a2.46 2.46 0 0 1 3.39-.09l.12.1a1 1 0 0 0 1.4-1.43 3 3 0 0 0-.18-.21 4.46 4.46 0 0 0-6.09.22l-4.6 4.55a4.48 4.48 0 0 0 6.33 6.33L11.37 19A1 1 0 0 0 10 17.55M20.69 3.31a4.49 4.49 0 0 0-6.33 0L12.63 5A1 1 0 0 0 14 6.45l1.73-1.72a2.47 2.47 0 0 1 3.5 3.5l-4.54 4.55a2.46 2.46 0 0 1-3.39.09l-.12-.1a1 1 0 0 0-1.4 1.43 3 3 0 0 0 .23.21 4.47 4.47 0 0 0 6.09-.22l4.55-4.55a4.49 4.49 0 0 0 .04-6.33'/></svg>"
        },
        {
          "id": 2,
          "x": "65%",
          "y": "28%",
          "title": "Natural Lighting",
          "description": "Large windows provide excellent natural light, reducing eye strain",
          "linkLabel": "Buy Now",
          "link": "https://bplugins.com/",
          "isLinkNewTab": false,
          "icon": "<svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 17.55-1.77 1.72a2.47 2.47 0 0 1-3.5-3.5l4.54-4.55a2.46 2.46 0 0 1 3.39-.09l.12.1a1 1 0 0 0 1.4-1.43 3 3 0 0 0-.18-.21 4.46 4.46 0 0 0-6.09.22l-4.6 4.55a4.48 4.48 0 0 0 6.33 6.33L11.37 19A1 1 0 0 0 10 17.55M20.69 3.31a4.49 4.49 0 0 0-6.33 0L12.63 5A1 1 0 0 0 14 6.45l1.73-1.72a2.47 2.47 0 0 1 3.5 3.5l-4.54 4.55a2.46 2.46 0 0 1-3.39.09l-.12-.1a1 1 0 0 0-1.4 1.43 3 3 0 0 0 .23.21 4.47 4.47 0 0 0 6.09-.22l4.55-4.55a4.49 4.49 0 0 0 .04-6.33'/></svg>"
        },
        {
          "id": 3,
          "x": "45%",
          "y": "65%",
          "title": "Collaboration Zone",
          "description": "Open seating area designed for team meetings and creative sessions",
          "linkLabel": "Buy Now",
          "link": "https://bplugins.com/",
          "isLinkNewTab": false,
          "icon": "<svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 17.55-1.77 1.72a2.47 2.47 0 0 1-3.5-3.5l4.54-4.55a2.46 2.46 0 0 1 3.39-.09l.12.1a1 1 0 0 0 1.4-1.43 3 3 0 0 0-.18-.21 4.46 4.46 0 0 0-6.09.22l-4.6 4.55a4.48 4.48 0 0 0 6.33 6.33L11.37 19A1 1 0 0 0 10 17.55M20.69 3.31a4.49 4.49 0 0 0-6.33 0L12.63 5A1 1 0 0 0 14 6.45l1.73-1.72a2.47 2.47 0 0 1 3.5 3.5l-4.54 4.55a2.46 2.46 0 0 1-3.39.09l-.12-.1a1 1 0 0 0-1.4 1.43 3 3 0 0 0 .23.21 4.47 4.47 0 0 0 6.09-.22l4.55-4.55a4.49 4.49 0 0 0 .04-6.33'/></svg>"
        },
        {
          "id": 4,
          "x": "80%",
          "y": "55%",
          "title": "Tech Equipment",
          "description": "Latest design tools and high-performance computers",
          "linkLabel": "Buy Now",
          "link": "https://bplugins.com/",
          "isLinkNewTab": false,
          "icon": "<svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 17.55-1.77 1.72a2.47 2.47 0 0 1-3.5-3.5l4.54-4.55a2.46 2.46 0 0 1 3.39-.09l.12.1a1 1 0 0 0 1.4-1.43 3 3 0 0 0-.18-.21 4.46 4.46 0 0 0-6.09.22l-4.6 4.55a4.48 4.48 0 0 0 6.33 6.33L11.37 19A1 1 0 0 0 10 17.55M20.69 3.31a4.49 4.49 0 0 0-6.33 0L12.63 5A1 1 0 0 0 14 6.45l1.73-1.72a2.47 2.47 0 0 1 3.5 3.5l-4.54 4.55a2.46 2.46 0 0 1-3.39.09l-.12-.1a1 1 0 0 0-1.4 1.43 3 3 0 0 0 .23.21 4.47 4.47 0 0 0 6.09-.22l4.55-4.55a4.49 4.49 0 0 0 .04-6.33'/></svg>"
        }
      ]
    },
    "hotspotAnnotations": {
      "type": "object",
      "default": {
        "showTooltips": true,
        "ping": true,
        "footerText": true,
        "hostsImageWidth": "100%",
        "hostsImageHeight": {
          "desktop": "",
          "tablet": "",
          "mobile": ""
        },
        "textColor": "#111827",
        "hotspotTextTypo": {
          "fontFamily": "Manrope",
          "fontCategory": "sans-serif",
          "fontWeight": 600,
          "fontSize": {
            "desktop": 12,
            "tablet": 12,
            "mobile": 12
          },
          "fontStyle": "",
          "textTransform": "",
          "textDecoration": "",
          "lineHeight": "",
          "letterSpace": ""
        },
        "activeBgColor": "#ecfdf5",
        "activeColor": "#10b981",
        "markerCircleColor": "#10b981",
        "markerCircleBgColor": "white",
        "pingActiveColor": "#10b981",
        "markerCircleBorder": {
          "color": "#10b981",
          "width": "4px",
          "style": "solid"
        },
        "bgColor": "#FDFDFD",
        "hotspotBorder": {
          "color": "rgb(247, 242, 240)",
          "width": "2px",
          "style": "solid"
        },
        "desColor": "#6b7280",
        "hotspotDesTypo": {
          "fontFamily": "Manrope",
          "fontCategory": "sans-serif",
          "fontWeight": 400,
          "fontSize": {
            "desktop": 10,
            "tablet": 10,
            "mobile": 10
          },
          "fontStyle": "",
          "textTransform": "",
          "textDecoration": "",
          "lineHeight": "",
          "letterSpace": ""
        },
        "iconBgolor": "#E4E6EA",
        "iconColor": "#4b5563",
        "iconMargin": {
          "desktop": {
            "top": "11px",
            "right": "0px",
            "bottom": "0px",
            "left": "0px"
          },
          "tablet": {
            "top": "11px",
            "right": "0px",
            "bottom": "0px",
            "left": "0px"
          },
          "mobile": {
            "top": "11px",
            "right": "0px",
            "bottom": "0px",
            "left": "0px"
          }
        },
        "hotspotAnnotationsSize": "40px",
        "hotspotAnnotationsTextSize": "18px",
        "hotspotTooltip": {
          "bgolor": "white",
          "arrowColor": "white",
          "radius": {
            "top": "8px",
            "right": "8px",
            "bottom": "8px",
            "left": "8px"
          },
          "border": {
            "color": "#e5e7eb",
            "width": "1px",
            "style": "solid"
          },
          "padding": {
            "desktop": {
              "top": "4px",
              "right": "16px",
              "bottom": "4px",
              "left": "16px"
            },
            "tablet": {
              "top": "4px",
              "right": "16px",
              "bottom": "4px",
              "left": "16px"
            },
            "mobile": {
              "top": "4px",
              "right": "16px",
              "bottom": "4px",
              "left": "16px"
            }
          },
          "tooltipTitleColor": "#111827",
          "tooltipTitleTypo": {
            "fontFamily": "Manrope",
            "fontCategory": "sans-serif",
            "fontWeight": 700,
            "fontSize": {
              "desktop": 22,
              "tablet": 21,
              "mobile": 20
            },
            "fontStyle": "",
            "textTransform": "",
            "textDecoration": "",
            "lineHeight": "",
            "letterSpace": ""
          },
          "tooltipDesColor": "#4b5563",
          "tooltipDesTypo": {
            "fontFamily": "Manrope",
            "fontCategory": "sans-serif",
            "fontWeight": 300,
            "fontSize": {
              "desktop": 14,
              "tablet": 13,
              "mobile": 12
            },
            "fontStyle": "",
            "textTransform": "",
            "textDecoration": "",
            "lineHeight": "",
            "letterSpace": ""
          },
          "tooltipLink": {
            "hoverColor": "#03fc30",
            "tooltipTitleColor": "#10b981",
            "tooltipTitleTypo": {
              "fontFamily": "Manrope",
              "fontCategory": "sans-serif",
              "fontWeight": 500,
              "fontSize": {
                "desktop": 14,
                "tablet": 13,
                "mobile": 13
              },
              "fontStyle": "",
              "textTransform": "",
              "textDecoration": "",
              "lineHeight": "",
              "letterSpace": ""
            },
            "toolsIconSize": "20px",
            "toolsCloseIconSize": "20px",
            "toolsCloseColor": "#000306ff",
            "toolsCloseHoverColor": "#03fc30"
          }
        }
      }
    },
    "zoompanviewer": {
      "type": "object",
      "default": {
        "zoompanWidth": "100%",
        "zoompanHeight": {
          "desktop": "400px",
          "tablet": "300px",
          "mobile": "200px"
        },
        "text": "Scroll to zoom, drag to pan",
        "dragText": "Drag to pan the image",
        "drag": true,
        "dragDirectionX": true,
        "dragDirectionY": true,
        "zoomIn": true,
        "showHeaderButton": true,
        "zoomHeight": "690px",
        "zoomWidth": "100%",
        "zoomRadius": {
          "top": "5px",
          "right": "5px",
          "bottom": "5px",
          "left": "5px"
        },
        "zoomContentBg": "#0BAB77",
        "zoomTextColor": "#ffffff",
        "zoomTextTypo": {
          "fontFamily": "Manrope",
          "fontCategory": "sans-serif",
          "fontWeight": 600,
          "fontSize": {
            "desktop": 18,
            "tablet": 18,
            "mobile": 18
          },
          "fontStyle": "",
          "textTransform": "",
          "textDecoration": "",
          "lineHeight": "",
          "letterSpace": ""
        },
        "zoomButtonBorder": {
          "color": "#0b0a0a",
          "width": "2px",
          "style": "solid"
        },
        "buttonRadius": {
          "top": "5px",
          "right": "5px",
          "bottom": "5px",
          "left": "5px"
        },
        "dragTextColor": "white",
        "dragBgColor": "rgba(0, 0, 0, 0.6)",
        "dragTextTypo": {
          "fontFamily": "Manrope",
          "fontCategory": "sans-serif",
          "fontWeight": 500,
          "fontSize": {
            "desktop": 14,
            "tablet": 14,
            "mobile": 14
          },
          "fontStyle": "",
          "textTransform": "",
          "textDecoration": "",
          "lineHeight": "",
          "letterSpace": ""
        },
        "dragPadding": {
          "desktop": {
            "top": "8px",
            "right": "16px",
            "bottom": "8px",
            "left": "16px"
          },
          "tablet": {
            "top": "8px",
            "right": "16px",
            "bottom": "8px",
            "left": "16px"
          },
          "mobile": {
            "top": "8px",
            "right": "16px",
            "bottom": "8px",
            "left": "16px"
          }
        },
        "dragRadius": {
          "top": "8px",
          "right": "8px",
          "bottom": "8px",
          "left": "8px"
        }
      }
    },
    "comparisonSlider": {
      "type": "object",
      "default": {
        "beforeImg": {
          "id": null,
          "url": "https://templates.bplugins.com/wp-content/uploads/2025/11/charlie-green-3JmfENcL24M-unsplash-scaled-1.jpg",
          "alt": "",
          "title": ""
        },
        "afterImg": {
          "id": null,
          "url": "https://templates.bplugins.com/wp-content/uploads/2025/11/charlie-green-3JmfENcL24M-unsplash-scaled-modified.jpg",
          "alt": "",
          "title": ""
        },
        "sliderWidth": "100%",
        "sliderHeight": {
          "desktop": "420px",
          "tablet": "420px",
          "mobile": "250px"
        },
        "sliderRadius": {
          "top": "5px",
          "right": "5px",
          "bottom": "5px",
          "left": "5px"
        },
        "sliderBgColor": "#00000066",
        "sliderTextColor": "white",
        "sliderTextTypo": {
          "fontFamily": "Manrope",
          "fontCategory": "sans-serif",
          "fontWeight": 700,
          "fontSize": {
            "desktop": 14,
            "tablet": 14,
            "mobile": 14
          },
          "fontStyle": "",
          "textTransform": "",
          "textDecoration": "",
          "lineHeight": "",
          "letterSpace": ""
        },
        "buttontext": {
          "labelBefore": "Before",
          "labelAfter": "After",
          "before": "Show Before",
          "center": "Center View",
          "after": "Show After",
          "radius": {
            "top": "5px",
            "right": "5px",
            "bottom": "5px",
            "left": "5px"
          },
          "textColor": "white",
          "textTypo": {
            "fontFamily": "Manrope",
            "fontCategory": "sans-serif",
            "fontWeight": 600,
            "fontSize": {
              "desktop": 18,
              "tablet": 18,
              "mobile": 18
            },
            "fontStyle": "",
            "textTransform": "",
            "textDecoration": "",
            "lineHeight": "",
            "letterSpace": ""
          },
          "bgColor": {
            "before": "linear-gradient(to right, #4b5563, #374151)",
            "center": "linear-gradient(to right, #16a34a, #84cc16)",
            "after": "linear-gradient(to right, #2563eb, #06b6d4)"
          }
        },
        "beforeRadius": {
          "top": "8px",
          "right": "8px",
          "bottom": "8px",
          "left": "8px"
        },
        "icon": "<svg className=\"ics-handle-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" ><path d=\"M8 3 4 7l4 4\"></path><path d=\"M4 7h16\"></path><path d=\"m16 21 4-4-4-4\"></path><path d=\"M20 17H4\"></path></svg>",
        "comparisonButton": true,
        "swapButton": false,
        "labelPosition": "top",
        "showLabel": true,
        "sliderDirection": "horizontal"
      }
    }
  },
  "supports": {
    "align": [
      "wide",
      "full"
    ],
    "html": false
  },
  "example": {
    "attributes": {
      "preview": true,
      "columns": {
        "desktop": 1,
        "tablet": 1,
        "mobile": 1
      }
    }
  },
  "editorScript": [
    "file:./index.js",
    "jquery",
    "panzoom",
    "magnify",
    "three",
    "panoramajs",
    "wp-api",
    "wp-util"
  ],
  "editorStyle": [
    "file:./index.css",
    "magnify"
  ],
  "style": [
    "file:./view.css",
    "magnify"
  ],
  "render": "file:./render.php",
  "viewScript": [
    "file:./view.js",
    "jquery",
    "panzoom",
    "magnify",
    "three",
    "panoramajs"
  ]
}