<div id="container"></div>
<div id="hotspot-one" class="hotspot">
<div class="hotspot-zone">
<!-- Toggle -->
<input type="checkbox">
<!-- Icon/Text container -->
<p class="media">
<!-- What you see into the hotspot, centered horizontally and vertically -->
<span class="centered">
<span class="content">
<!-- Icon font, image, anything... -->
</span>
</span>
</p>
<!-- Content of the hotspot -->
<div class="content">
<div class="padded">
<h2>Info</h2>
<p>This is the most <u>basic</u> spot with only CSS.</p>
</div>
</div>
</div>
</div>
<div id="hotspot-two" class="hotspot">
<div class="hotspot-zone">
<!-- Toggle -->
<input type="checkbox">
<!-- Icon/Text container -->
<p class="media">
<!-- What you see into the hotspot, centered horizontally and vertically -->
<span class="centered">
<span class="content">
<!-- Icon font, image, anything... -->
</span>
</span>
</p>
<!-- Content of the hotspot -->
<div class="content">
<p><img src="https://cdn.forgejs.org/samples/common/images/wooden-fireball.jpg" alt="Hover me for parallax effect<br/>and Click to close"></p>
<h2>Quiz</h2>
<div class="padded">
<p>
What is wrong with this image?
<ul>
<li>A. It's dangerous</li>
<li>B. It will catch the forest on fire</li>
<li>C. I just don't like it</li>
<li>D. This is the wrong answer</li>
</ul>
</p>
</div>
</div>
</div>
</div>
<div id="hotspot-three" class="hotspot">
<div class="hotspot-zone">
<!-- Toggle -->
<input type="checkbox">
<!-- Icon/Text container -->
<p class="media">
<!-- What you see into the hotspot, centered horizontally and vertically -->
<span class="centered">
<span class="content">
<!-- Icon font, image, anything... -->
<svg class="open-state" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 16"><title>slideshowGlyph</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="slideshowGlyph"><polygon class="cls-1" points="0 14 1.5 14 3 14 3 8 3 2 1.5 2 0 2 0 8 0 14"/><polygon class="cls-1" points="19 2 19 8 19 14 20.5 14 22 14 22 8 22 2 20.5 2 19 2"/><path class="cls-1" d="M4,16H18V0H4V16ZM9,5l2.5,1.5L14,8,11.5,9.5,9,11V5Z"/></g></g></g></svg>
<svg class="close-state" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.12109 18.12109"><title>exitGlyph</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon id="exitGlyph" class="cls-1" points="18.121 2.121 17.061 1.061 16 0 12.53 3.47 9.061 6.939 5.591 3.47 2.121 0 1.061 1.061 0 2.121 3.47 5.591 6.939 9.061 3.47 12.53 0 16 1.061 17.061 2.121 18.121 5.591 14.651 9.061 11.182 12.53 14.651 16 18.121 17.061 17.061 18.121 16 14.651 12.53 11.182 9.061 14.651 5.591 18.121 2.121"/></g></g></svg>
</span>
</span>
</p>
<!-- Content of the hotspot -->
<div class="content" style="width: 560px;">
<p><iframe width="560" height="315" src="https://www.youtube.com/embed/z-o8GokZ-4A?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe></p>
<div class="padded">
<h2>YouTube and SVG icons</h2>
<p>This is a hotspot with both open and close state SVGs which open a YouTube video.</p>
</div>
</div>
</div>
</div>
<div id="hotspot-four" class="hotspot">
<div class="hotspot-zone">
<!-- Toggle -->
<input type="checkbox">
<!-- Icon/Text container -->
<p class="media">
<!-- What you see into the hotspot, centered horizontally and vertically -->
<span class="centered">
<span class="content">
<img src="https://cdn.forgejs.org/samples/common/images/wooden-fireball.jpg" class="" alt="">
</span>
</span>
</p>
<!-- Content of the hotspot -->
<div class="content">
<div class="padded">
<h2>JPG</h2>
<p>Hotspot with a JPG file.</p>
</div>
</div>
</div>
</div>
<div id="hotspot-five" class="hotspot">
<div class="hotspot-zone">
<!-- Toggle -->
<input type="checkbox">
<!-- Icon/Text container -->
<p class="media">
<!-- What you see into the hotspot, centered horizontally and vertically -->
<span class="centered">
<span class="content">
<img src="https://media.giphy.com/media/l0MYRbawhDAnyMG4w/giphy.gif" class="" alt="">
</span>
</span>
</p>
<!-- Content of the hotspot -->
<div class="content">
<h2>GIF</h2>
<p>Hotspot with a GIF file.</p>
<p><img src="https://media.giphy.com/media/l0MYRbawhDAnyMG4w/giphy.gif" class="" alt=""></p>
</div>
</div>
</div>
<div id="hotspot-six" class="hotspot">
<div class="hotspot-zone">
<!-- Toggle -->
<input type="checkbox" title="Click to keep or not the modal opened">
<!-- Icon/Text container -->
<p class="media">
<!-- What you see into the hotspot, centered horizontally and vertically -->
<span class="centered">
<span class="content">
<!-- Icon font, image, anything... -->
</span>
</span>
</p>
<!-- Content of the hotspot -->
<div class="content">
<div class="padded">
<h2>Hover hotspot</h2>
<h3>Hover off to hide me</h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><strong>CSS only</strong></p>
</div>
</div>
</div>
</div>
<div id="hotspot-seven" class="hs-html">
<div class="hs-html-tb">
<p class="hs-html-cell">HTML</p>
</div>
</div>html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
div#container {
height: 100%;
}var config = {
"controllers":
{
"instances":
[
{
"uid": "pointer",
"type": "pointer",
"options":
{
"orientation": { "drag": true }
}
}
]
},
"story":
{
"uid": "hotspots-DOM-story",
"name": "Hotspots DOM Story",
"slug": "hotspots-dom-story",
"description": "This is sample of DOM hotspots",
"default": "scene-0",
"scenes":
[
{
"uid": "scene-0",
"name": "First scene",
"slug": "first-scene",
"description": "This is the first and only scene",
"background": "#222",
"media":
{
"uid": "media-0",
"type": "image",
"source":
{
"format": "equi",
"url": "https://public.boxcloud.com/api/2.0/internal_files/489593704380/versions/518329491180/representations/jpg_paged_2048x2048/content/1.jpg?access_token=1!gqq5vDmTEeSYXa9qKPOTh4n5MvL5J01quSjam1ZoI1DT20U2c0wp-dTHo84u8A6n3WBLb2M2jF1HrZyJUUy7W6_2QJCbHkyLfMY_OC0PBsEgVT1llGSeDoKyu7qzTpj6A9EB8Bscr2W5Bl95jwu_zfBqUbLabh4K9hvXwwj9v5YiJjhBOtNjoECUPHJCuK-2NEz7z5wCchrnLGgyez7YuoWt72yhBxUqAMfKW65poyd6xZnQG78OHSLS58Q5VxEzJZbgsg4Yz5ljjP-imkJ6HaKjCCAXp0SFZDKbA_562A2t6SW-9IofgXksBUo6rOJqd8NGvTYoCQMkRL5llxtxxwAR9WKMzAHa02uiXOwQwePbk5OzK3qKwA8RTJOYM04FLlY8QQPqI4NjUgRgl-UOELgR7nVXR7hTZAYnGP-490fqex-knJu7keSFJsd6p1_9Zn4Ueijurfmp6GWBvAJKU0_Wyuv6jx4Vap0A0rTGrkX3samSQJZv4-bAMslV_QblgJsYi3pZKJ04WM-oei55teK9kEzzCcRuLnbgyalLZ3fw7nOsDJf1IAXddtGaMk2WTQ..&box_client_name=box-content-preview&box_client_version=2.14.1"
}
},
"hotspots":
[
{
"uid": "hotspot-dom-one",
"interactive": true,
"type": "dom",
"dom":
{
"id": "hotspot-one",
"width": "5em",
"height": "5em",
"color": "transparent",
"index": 1,
"class": [ "media-style__primary", "content-style__primary" ]
},
"transform":
{
"position": {
"x": -100,
"y": 100
}
}
},
{
"uid": "hotspot-dom-two",
"interactive": true,
"type": "dom",
"dom":
{
"id": "hotspot-two",
"width": "5em",
"height": "5em",
"color": "transparent",
"index": 2,
"class": [ "media-style__pin", "content-style__above"]
},
"transform":
{
"position": {
"x": 100,
"y": 100
}
}
},
{
"uid": "hotspot-dom-three",
"interactive": true,
"type": "dom",
"dom":
{
"id": "hotspot-three",
"width": "5em",
"height": "5em",
"color": "transparent",
"index": 3,
"class": [ "content-style__primary" ]
},
"transform":
{
"position": {
"x": 0,
"y": -100
}
}
},
{
"uid": "hotspot-dom-four",
"interactive": true,
"type": "dom",
"dom":
{
"id": "hotspot-four",
"width": "5em",
"height": "5em",
"color": "transparent",
"index": 4,
"class": [ "content-style__primary", "media-style__see-through" ]
},
"transform":
{
"position": {
"theta": 90,
"phi": 0
}
}
},
{
"uid": "hotspot-dom-five",
"interactive": true,
"type": "dom",
"dom":
{
"id": "hotspot-five",
"width": "5em",
"height": "5em",
"color": "transparent",
"index": 5,
"class": [ "content-style__above", "media-style__see-through", "hover-trig" ]
},
"transform":
{
"position": {
"theta": -90,
"phi": 0
}
}
},
{
"uid": "hotspot-dom-six",
"interactive": true,
"type": "dom",
"dom":
{
"id": "hotspot-six",
"width": "5em",
"height": "5em",
"color": "transparent",
"index": 6,
"class": [ "media-style__pin", "content-style__above", "hover-trig" ]
},
"transform":
{
"position": {
"theta": 160,
"phi": 5
}
}
},
{
"uid": "hotspot-dom-seven",
"interactive": false,
"cursor": "crosshair",
"type": "dom",
"dom":
{
"id": "hotspot-seven",
"width": "5em",
"height": "5em",
"color": "#f49a1a",
"index": 7
},
"transform":
{
"position": {
"theta": -160,
"phi": -25
}
}
}
]
}
]
},
"plugins":
{
"prefix": "../../plugins/",
"engines":
[
{
"uid": "org.forgejs.editor",
"url": "Editor/"
}
],
"instances":
[
{
"uid": "editor",
"engine": "org.forgejs.editor"
}
]
}
};
// Create a viewer
var viewer = new FORGE.Viewer("container", config);