I am trying to create on my WordPress website something similar to this:
Link, where you have an image map on the right and by clicking on a certain section of the image, the gallery on the left will jump to a specific image.
The interactive image map I'm using is called Image map pro and you can play around with it on their website https://imagemappro.com/editor/index.html.
I think the way I can do this is by making a "run script" action happen when a shape within the image is clicked that corresponds to the specific image I want to jump to in the gallery but I don't know what code to enter to get that done.where I need to enter the custom code as of now I didn't decide on a gallery plugin yet so any that you can get to work would be fine (preferably free) Thanks!
Below is code you can import into the image map pro editor to get started
{
"id": 2760,
"editor": {
"tool": "select",
"shapeCounter": {
"rects": 1,
"polys": 6
}
},
"general": {
"name": "test",
"shortcode": "test1",
"height": 628,
"naturalHeight": 628
},
"image": {
"url": "https://user-140471889-work.colibriwp.com/personal-stylist-pro/wp-content/uploads/2023/07/map-floor-plan-img.png"
},
"spots": [
{
"id": "poly-7168",
"title": "Poly 0",
"type": "poly",
"x": 1.252,
"y": 13.297,
"width": 37.375,
"height": 75.478,
"x_image_background": 1.252,
"y_image_background": 13.297,
"width_image_background": 36.875,
"height_image_background": 74.68152866242038,
"actions": {
"click": "run-script"
},
"mouseover_style": {
"background_color": "#fff24d"
},
"tooltip_content": {
"squares_settings": {
"containers": [
{
"id": "sq-container-403761",
"settings": {
"elements": [
{
"settings": {
"name": "Heading",
"iconClass": "fa fa-header"
},
"options": {
"heading": {
"text": "Poly 0"
}
}
}
]
}
}
]
}
},
"points": [
{
"x": 100,
"y": 0.632912887895431
},
{
"x": 98.99665551839465,
"y": 89.03013441719526
},
{
"x": 51.17056856187291,
"y": 89.66273506806598
},
{
"x": 34.448160535117054,
"y": 99.57868254878576
},
{
"x": 14.381270903010032,
"y": 100
},
{
"x": 1.0033444816053512,
"y": 90.50654296904669
},
{
"x": 0,
"y": 76.58292357146497
},
{
"x": 17.391304347826086,
"y": 65.40099841586121
},
{
"x": 16.72240802675585,
"y": 42.4051634889939
},
{
"x": 0.6688963210702341,
"y": 31.434673432139753
},
{
"x": 0.6688963210702341,
"y": 0
}
]
},
{
"id": "poly-6930",
"title": "Poly 1",
"type": "poly",
"x": 72.252,
"y": 24.443,
"width": 26.25,
"height": 53.026,
"x_image_background": 72.2515,
"y_image_background": 24.28407643312102,
"width_image_background": 25.874999999999996,
"height_image_background": 52.547770700636946,
"mouseover_style": {
"background_color": "#fff24d"
},
"tooltip_content": {
"squares_settings": {
"containers": [
{
"id": "sq-container-403761",
"settings": {
"elements": [
{
"settings": {
"name": "Heading",
"iconClass": "fa fa-header"
},
"options": {
"heading": {
"text": "Poly 1"
}
}
}
]
}
}
]
}
},
"points": [
{
"x": 0,
"y": 0
},
{
"x": 100,
"y": 0.6011525032585591
},
{
"x": 100,
"y": 100
},
{
"x": 0.4761904761904762,
"y": 99.70014446831225
}
]
},
{
"id": "poly-3017",
"title": "Poly 2",
"type": "poly",
"x": 39.752,
"y": 13.456,
"width": 31,
"height": 67.198,
"x_image_background": 39.7515,
"y_image_background": 13.456050955414014,
"width_image_background": 30.749999999999993,
"height_image_background": 66.71974522292994,
"mouseover_style": {
"background_color": "#fff24d"
},
"tooltip_content": {
"squares_settings": {
"containers": [
{
"id": "sq-container-403761",
"settings": {
"elements": [
{
"settings": {
"name": "Heading",
"iconClass": "fa fa-header"
},
"options": {
"heading": {
"text": "Poly 2"
}
}
}
]
}
}
]
}
},
"points": [
{
"x": 37.90322580645162,
"y": 100
},
{
"x": 0,
"y": 99.99929858125736
},
{
"x": 0,
"y": 0
},
{
"x": 100,
"y": 0
},
{
"x": 99.59677419354838,
"y": 16.58733999832797
},
{
"x": 38.30645161290324,
"y": 16.823168353957886
},
{
"x": 39.11290322580646,
"y": 43.83910743137993
},
{
"x": 98.38709677419355,
"y": 43.60170562289492
},
{
"x": 98.38709677419355,
"y": 55.68739700281875
},
{
"x": 37.500000000000014,
"y": 55.68739700281875
}
]
},
{
"id": "poly-8378",
"title": "Poly 3",
"type": "poly",
"x": 52.252,
"y": 25.239,
"width": 18.375,
"height": 16.879,
"x_image_background": 52.1265,
"y_image_background": 25.239490445859868,
"width_image_background": 18.249999999999993,
"height_image_background": 16.401273885350324,
"mouseover_style": {
"background_color": "#fff24d"
},
"tooltip_content": {
"squares_settings": {
"containers": [
{
"id": "sq-container-403761",
"settings": {
"elements": [
{
"settings": {
"name": "Heading",
"iconClass": "fa fa-header"
},
"options": {
"heading": {
"text": "Poly 3"
}
}
}
]
}
}
]
}
},
"points": [
{
"x": 99.31972789115646,
"y": 0.9433798507648502
},
{
"x": 0,
"y": 0
},
{
"x": 0,
"y": 99.99720759564174
},
{
"x": 100,
"y": 100
}
]
},
{
"id": "poly-8159",
"title": "Poly 4",
"type": "poly",
"x": 52.002,
"y": 51.673,
"width": 18.75,
"height": 36.942,
"x_image_background": 51.8765,
"y_image_background": 51.672611464968156,
"width_image_background": 18.374999999999993,
"height_image_background": 36.146496815286625,
"mouseover_style": {
"background_color": "#fff24d"
},
"tooltip_content": {
"squares_settings": {
"containers": [
{
"id": "sq-container-403761",
"settings": {
"elements": [
{
"settings": {
"name": "Heading",
"iconClass": "fa fa-header"
},
"options": {
"heading": {
"text": "Poly 4"
}
}
}
]
}
}
]
}
},
"points": [
{
"x": 0.6666666666666669,
"y": 0
},
{
"x": 99.33333333333333,
"y": 1.2924717567601982
},
{
"x": 100,
"y": 100
},
{
"x": 0,
"y": 99.56960137048941
}
]
},
{
"id": "poly-5413",
"title": "Poly 5",
"type": "poly",
"x": 26.627,
"y": 1.036,
"width": 25,
"height": 10.509,
"x_image_background": 26.7515,
"y_image_background": 1.035668789808917,
"width_image_background": 24.5,
"height_image_background": 9.713375796178344,
"mouseover_style": {
"background_color": "#fff24d"
},
"tooltip_content": {
"squares_settings": {
"containers": [
{
"id": "sq-container-403761",
"settings": {
"elements": [
{
"settings": {
"name": "Heading",
"iconClass": "fa fa-header"
},
"options": {
"heading": {
"text": "Poly 5"
}
}
}
]
}
}
]
}
},
"points": [
{
"x": 0,
"y": 0.004485025167656873
},
{
"x": 0.5000000000000002,
"y": 100
},
{
"x": 100,
"y": 98.48927381987775
},
{
"x": 99.5,
"y": 0
}
]
}
]
}