{"id":81,"date":"2026-07-29T07:15:02","date_gmt":"2026-07-29T07:15:02","guid":{"rendered":"https:\/\/douple.net\/demo\/?page_id=81"},"modified":"2026-08-14T05:12:51","modified_gmt":"2026-08-14T05:12:51","slug":"simple-image-hotspots","status":"publish","type":"page","link":"https:\/\/douple.net\/demo\/","title":{"rendered":"Single Image Hotspots"},"content":{"rendered":"<div id=\"shopspot-1\" data-limit-top=\"110\" data-limit-left=\"310\" data-top=\"15\" data-bottom=\"5\" data-left=\"-15\" data-right=\"-15\" data-max-width=\"0\" class=\"shopspot lookbook-layout-0 lookbook-anim-pulse lookbook-trigger-click lookbook-mobile-compact\">\n            <div class=\"lookbook-markers dark\" style=\"--lb-bg-opacity:0.9;--lb-marker-size:28px;--lb-marker-color:#ffb818;--lb-radius:0px;\"><div id=\"lookbook-marker0\" class=\"lookbook-marker\" data-product=\"36\" style=\"left: 39.936219400568%; top: 22.105444253924%;\"><i class=\"lookbook-grab material-icons-round\" style=\"color:#ffb818\" role=\"button\" tabindex=\"0\" aria-label=\"View: Solstice Round Sunglasses\" aria-expanded=\"false\">add_circle<\/i><div class=\"lookbook-box is-price\">\n                    <a href=\"https:\/\/douple.net\/demo\/product\/solstice-round-sunglasses\/\" class=\"lookbook-product\">\n                            <div class=\"product-name\">\n                                <div class=\"product-image\"><img decoding=\"async\" src=\"https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model-1-product-1-300x300.jpg\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"Solstice Round Sunglasses\" \/><\/div>\n                                <div class=\"product-info\">\n                                    <h3 class=\"product-name\">Solstice Round Sunglasses<\/h3>\n                                    <div class=\"product-price\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&#036;<\/span>89.00<\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                        \n                        \n                        <i class=\"lookbook-close material-icons\" role=\"button\" tabindex=\"0\" aria-label=\"Close\">clear<\/i>\n                        <\/div>\n                    <\/div><div id=\"lookbook-marker1\" class=\"lookbook-marker\" data-product=\"41\" style=\"left: 54.248320066584%; top: 43.987622467742%;\"><i class=\"lookbook-grab material-icons-round\" style=\"color:#ffb818\" role=\"button\" tabindex=\"0\" aria-label=\"View: Aurora Knit Pullover\" aria-expanded=\"false\">add_circle<\/i><div class=\"lookbook-box is-price\">\n                    <a href=\"https:\/\/douple.net\/demo\/product\/aurora-knit-pullover\/\" class=\"lookbook-product\">\n                            <div class=\"product-name\">\n                                <div class=\"product-image\"><img decoding=\"async\" src=\"https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model-1-product-2-300x300.jpg\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"Aurora Knit Pullover\" \/><\/div>\n                                <div class=\"product-info\">\n                                    <h3 class=\"product-name\">Aurora Knit Pullover<\/h3>\n                                    <div class=\"product-price\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&#036;<\/span>129.00<\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                        \n                        \n                        <i class=\"lookbook-close material-icons\" role=\"button\" tabindex=\"0\" aria-label=\"Close\">clear<\/i>\n                        <\/div>\n                    <\/div><div id=\"lookbook-marker2\" class=\"lookbook-marker\" data-product=\"48\" style=\"left: 34.098258953476%; top: 71.936950007279%;\"><i class=\"lookbook-grab material-icons-round\" style=\"color:#ffb818\" role=\"button\" tabindex=\"0\" aria-label=\"View: Luna Classic Crossbody Bag\" aria-expanded=\"false\">add_circle<\/i><div class=\"lookbook-box is-price\">\n                    <a href=\"https:\/\/douple.net\/demo\/product\/luna-classic-crossbody-bag\/\" class=\"lookbook-product\">\n                            <div class=\"product-name\">\n                                <div class=\"product-image\"><img decoding=\"async\" src=\"https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model-1-product-3-300x300.jpg\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"Luna Classic Crossbody Bag\" \/><\/div>\n                                <div class=\"product-info\">\n                                    <h3 class=\"product-name\">Luna Classic Crossbody Bag<\/h3>\n                                    <div class=\"product-price\"><del aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&#036;<\/span>249.00<\/span><\/del> <span class=\"screen-reader-text\">Original price was: &#036;249.00.<\/span><ins aria-hidden=\"true\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&#036;<\/span>220.00<\/span><\/ins><span class=\"screen-reader-text\">Current price is: &#036;220.00.<\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                        \n                        \n                        <i class=\"lookbook-close material-icons\" role=\"button\" tabindex=\"0\" aria-label=\"Close\">clear<\/i>\n                        <\/div>\n                    <\/div><div id=\"lookbook-marker3\" class=\"lookbook-marker\" data-product=\"49\" style=\"left: 60.86486330343%; top: 90.687084809417%;\"><i class=\"lookbook-grab material-icons-round\" style=\"color:#ffb818\" role=\"button\" tabindex=\"0\" aria-label=\"View: Monroe Tailored Pants\" aria-expanded=\"false\">add_circle<\/i><div class=\"lookbook-box is-price\">\n                    <a href=\"https:\/\/douple.net\/demo\/product\/monroe-tailored-pants\/\" class=\"lookbook-product\">\n                            <div class=\"product-name\">\n                                <div class=\"product-image\"><img decoding=\"async\" src=\"https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model-1-product-4-300x300.jpg\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"Monroe Tailored Pants\" \/><\/div>\n                                <div class=\"product-info\">\n                                    <h3 class=\"product-name\">Monroe Tailored Pants<\/h3>\n                                    <div class=\"product-price\"><span class=\"woocommerce-Price-amount amount\"><span class=\"woocommerce-Price-currencySymbol\">&#036;<\/span>119.00<\/span><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                        \n                        \n                        <i class=\"lookbook-close material-icons\" role=\"button\" tabindex=\"0\" aria-label=\"Close\">clear<\/i>\n                        <\/div>\n                    <\/div>   <\/div>\n                <img class=\"lookbook-photo\" src=\"https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model3x4-1.jpg\" alt=\"Single Image Hotspots\" width=\"896\" height=\"1200\" decoding=\"async\" loading=\"lazy\" srcset=\"https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model3x4-1.jpg 896w, https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model3x4-1-224x300.jpg 224w, https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model3x4-1-765x1024.jpg 765w, https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model3x4-1-768x1029.jpg 768w, https:\/\/douple.net\/demo\/wp-content\/uploads\/2026\/07\/model3x4-1-600x804.jpg 600w\" sizes=\"auto, (max-width: 896px) 100vw, 896px\" \/>\n            <\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/douple.net\/demo\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/douple.net\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/douple.net\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/douple.net\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/douple.net\/demo\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":7,"href":"https:\/\/douple.net\/demo\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/douple.net\/demo\/wp-json\/wp\/v2\/pages\/81\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/douple.net\/demo\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}