content/hifi-content/caitlyn/scratch/_destinationGuide2/destGuide2-howto.html
2022-02-13 22:19:19 +01:00

196 lines
No EOL
14 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>WOWSlider</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="WOWSlider" />
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<style>
.instuction {
font-family: sans-serif, Arial;
display: block;
margin: 0 auto;
max-width: 820px;
width: 100%;
padding: 0 70px;
color: #222;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.instuction h1 img {
max-width: 170px;
vertical-align: middle;
margin-bottom: 10px;
}
.instuction h1 {
color: #2F98B3;
text-align: center;
}
.instuction h2 {
position: relative;
font-size: 1.1em;
color: #2F98B3;
margin-bottom: 20px;
margin-top: 40px;
}
.instuction h2 span.num {
position: absolute;
left: -70px;
top: -18px;
display: inline-block;
vertical-align: middle;
font-style: italic;
font-size: 1.1em;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #2F98B3;
color: #fff;
border-radius: 50%;
}
.instuction .mono {
color: #000;
font-family: monospace;
font-size: 1.3em;
font-weight: normal;
}
.instuction li.mono {
font-size: 1.5em;
}
.instuction ul {
font-size: 0.9em;
margin-top: 0;
padding-left: 0;
list-style: none;
}
.instuction .note {
color: #A3A3B2;
font-style: italic;
padding-top: 10px;
}
.instuction p.note {
text-align: center;
padding-top: 0;
margin-top: 4px;
}
.instuction textarea {
font-size: 0.9em;
min-height: 60px;
padding: 10px;
margin: 0;
overflow: auto;
max-width: 100%;
width: 100%;
}
.instuction a,
.instuction a:visited {
color: #2F98B3;
}
</style>
</head>
<body style="margin:auto">
<br>
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/tg_cover.jpg" alt="Swipe pages using your finger or mouse. Click a page to visit the domain." title="Swipe pages using your finger or mouse. Click a page to visit the domain." id="wows1_0"/></li>
<li><a href="hifi://blacklodge"><img src="data1/images/tg_blacklodge.jpg" alt="Small but well made tribute to Twin Peaks." title="Small but well made tribute to Twin Peaks." id="wows1_1"/></a></li>
<li><a href="hifi://codex"><img src="data1/images/tg_codex.jpg" alt="Popular hangout for scripters, artists & makers." title="Popular hangout for scripters, artists & makers." id="wows1_2"/></a></li>
<li><a href="hifi://cromptonmoor"><img src="data1/images/tg_comptonmoor.jpg" alt="Explore Crompton Moor by Judas." title="Explore Crompton Moor by Judas." id="wows1_3"/></a></li>
<li><a href="hifi://flightnight"><img src="data1/images/tg_flightnight.jpg" alt="Flight Night has wide open skies. It's a fun place to don a jetpack or airplane." title="Flight Night has wide open skies. It's a fun place to don a jetpack or airplane." id="wows1_4"/></a></li>
<li><a href="hifi://heavenlybrew"><img src="data1/images/tg_heavenlybrew.jpg" alt="A charming & whimsical build in the sky. By Theanine." title="A charming & whimsical build in the sky. By Theanine." id="wows1_5"/></a></li>
<li><a href="hifi://bankofhighfidelity"><img src="data1/images/tg_bankofhifi.jpg" alt="Bank of High Fidelity is the official financial HQ of High Fidelity. " title="Bank of High Fidelity is the official financial HQ of High Fidelity. " id="wows1_6"/></a></li>
<li><a href="hifi://maker"><img src="data1/images/tg_maker.jpg" alt="Open sandbox & official gathering spot for the Maker community." title="Open sandbox & official gathering spot for the Maker community." id="wows1_7"/></a></li>
<li><a href="hifi://mexico"><img src="data1/images/tg_mexico.jpg" alt="A beautiful, saturated tribute to Mexican culture." title="A beautiful, saturated tribute to Mexican culture." id="wows1_8"/></a></li>
<li><a href="hifi://mochi"><img src="data1/images/tg_mochi.jpg" alt="A boutique of free wearable anime avatars." title="A boutique of free wearable anime avatars." id="wows1_9"/></a></li>
<li><a href="hifi://morty"><img src="data1/images/tg_morty.jpg" alt="Features a live stream of Rick and Morty episodes. By Bijou." title="Features a live stream of Rick and Morty episodes. By Bijou." id="wows1_10"/></a></li>
<li><a href="hifi://playa"><img src="data1/images/tg_playa.jpg" alt="Burning man + Ready Player One + Neon Boneyard. By High Fidelity." title="Burning man + Ready Player One + Neon Boneyard. By High Fidelity." id="wows1_11"/></a></li>
<li><a href="hifi://portalarium"><img src="data1/images/tg_portalarium.jpg" alt="A peaceful camp ground with teleporters. By Bijou." title="A peaceful camp ground with teleporters. By Bijou." id="wows1_12"/></a></li>
<li><a href="hifi://vaporwave"><img src="data1/images/tg_vaporwave.jpg" alt="Vaporwave is the most aesthetic domain in the Metaverse. By Jazmin Cano." title="Vaporwave is the most aesthetic domain in the Metaverse. By Jazmin Cano." id="wows1_13"/></a></li>
<li><a href="hifi://voxeltopia"><img src="data1/images/tg_voxeltopia.jpg" alt="Whimsical, colorful and low poly." title="Whimsical, colorful and low poly." id="wows1_14"/></a></li>
<li><a href="hifi://whitemoth"><img src="data1/images/tg_whitemoth.jpg" alt="A beautifully haunting build by Bryn Oh and Cica Ghost." title="A beautifully haunting build by Bryn Oh and Cica Ghost." id="wows1_15"/></a></li>
<li><a href="hifi://anonymous"><img src="data1/images/tg_anonymous.jpg" alt="A great Minecraft-built domain in High Fidelity. By DarlingNotin." title="A great Minecraft-built domain in High Fidelity. By DarlingNotin." id="wows1_16"/></a></li>
<li><a href="hifi://avatardz"><img src="data1/images/tg_avatardz.jpg" alt="A source for a variety of popular avatars from games." title="A source for a variety of popular avatars from games." id="wows1_17"/></a></li>
</ul></div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
<div class="instuction">
<p class="note">HTML code for the slider <a href="file:///D:/projects/trinket/dev/destinationGuide2/destGuide2.html">D:/projects/trinket/dev/destinationGuide2/destGuide2.html</a></p>
<h1>
How to add this slider to HTML page
</h1>
<h2><span class="num">1</span> Upload these folders to your server</h2>
<ul>
<li class="mono">data1/</li>
<li class="mono">engine1/</li>
<li class="note">Current location: <a href="file:///D:/projects/trinket/dev/destinationGuide2">D:/projects/trinket/dev/destinationGuide2</a>. <br>These folders should be located in the same folder as your html page</li>
</ul>
<h2><span class="num">2</span> Paste this code to your page between the tags <span class="mono">&lt;head&gt;&lt;/head&gt;</span></h2>
<textarea onclick="this.select()">&lt;!-- Start WOWSlider.com HEAD section --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;engine1/style.css&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;engine1/jquery.js&quot;&gt;&lt;/script&gt;
&lt;!-- End WOWSlider.com HEAD section --&gt;</textarea>
<h2><span class="num" style="top: -8px;">3</span> Paste this code to your page between the tags <span class="mono">&lt;body&gt;&lt;/body&gt;</span> in the place that you want the slider to appear</h2>
<textarea onclick="this.select()" rows="15">&lt;!-- Start WOWSlider.com BODY section --&gt;
&lt;div id=&quot;wowslider-container1&quot;&gt;
&lt;div class=&quot;ws_images&quot;&gt;&lt;ul&gt;
&lt;li&gt;&lt;img src=&quot;data1/images/tg_cover.jpg&quot; alt=&quot;Swipe pages using your finger or mouse. Click a page to visit the domain.&quot; title=&quot;Swipe pages using your finger or mouse. Click a page to visit the domain.&quot; id=&quot;wows1_0&quot;/&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://blacklodge&quot;&gt;&lt;img src=&quot;data1/images/tg_blacklodge.jpg&quot; alt=&quot;Small but well made tribute to Twin Peaks.&quot; title=&quot;Small but well made tribute to Twin Peaks.&quot; id=&quot;wows1_1&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://codex&quot;&gt;&lt;img src=&quot;data1/images/tg_codex.jpg&quot; alt=&quot;Popular hangout for scripters, artists & makers.&quot; title=&quot;Popular hangout for scripters, artists & makers.&quot; id=&quot;wows1_2&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://cromptonmoor&quot;&gt;&lt;img src=&quot;data1/images/tg_comptonmoor.jpg&quot; alt=&quot;Explore Crompton Moor by Judas.&quot; title=&quot;Explore Crompton Moor by Judas.&quot; id=&quot;wows1_3&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://flightnight&quot;&gt;&lt;img src=&quot;data1/images/tg_flightnight.jpg&quot; alt=&quot;Flight Night has wide open skies. It's a fun place to don a jetpack or airplane.&quot; title=&quot;Flight Night has wide open skies. It's a fun place to don a jetpack or airplane.&quot; id=&quot;wows1_4&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://heavenlybrew&quot;&gt;&lt;img src=&quot;data1/images/tg_heavenlybrew.jpg&quot; alt=&quot;A charming & whimsical build in the sky. By Theanine.&quot; title=&quot;A charming & whimsical build in the sky. By Theanine.&quot; id=&quot;wows1_5&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://bankofhighfidelity&quot;&gt;&lt;img src=&quot;data1/images/tg_bankofhifi.jpg&quot; alt=&quot;Bank of High Fidelity is the official financial HQ of High Fidelity. &quot; title=&quot;Bank of High Fidelity is the official financial HQ of High Fidelity. &quot; id=&quot;wows1_6&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://maker&quot;&gt;&lt;img src=&quot;data1/images/tg_maker.jpg&quot; alt=&quot;Open sandbox & official gathering spot for the Maker community.&quot; title=&quot;Open sandbox & official gathering spot for the Maker community.&quot; id=&quot;wows1_7&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://mexico&quot;&gt;&lt;img src=&quot;data1/images/tg_mexico.jpg&quot; alt=&quot;A beautiful, saturated tribute to Mexican culture.&quot; title=&quot;A beautiful, saturated tribute to Mexican culture.&quot; id=&quot;wows1_8&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://mochi&quot;&gt;&lt;img src=&quot;data1/images/tg_mochi.jpg&quot; alt=&quot;A boutique of free wearable anime avatars.&quot; title=&quot;A boutique of free wearable anime avatars.&quot; id=&quot;wows1_9&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://morty&quot;&gt;&lt;img src=&quot;data1/images/tg_morty.jpg&quot; alt=&quot;Features a live stream of Rick and Morty episodes. By Bijou.&quot; title=&quot;Features a live stream of Rick and Morty episodes. By Bijou.&quot; id=&quot;wows1_10&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://playa&quot;&gt;&lt;img src=&quot;data1/images/tg_playa.jpg&quot; alt=&quot;Burning man + Ready Player One + Neon Boneyard. By High Fidelity.&quot; title=&quot;Burning man + Ready Player One + Neon Boneyard. By High Fidelity.&quot; id=&quot;wows1_11&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://portalarium&quot;&gt;&lt;img src=&quot;data1/images/tg_portalarium.jpg&quot; alt=&quot;A peaceful camp ground with teleporters. By Bijou.&quot; title=&quot;A peaceful camp ground with teleporters. By Bijou.&quot; id=&quot;wows1_12&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://vaporwave&quot;&gt;&lt;img src=&quot;data1/images/tg_vaporwave.jpg&quot; alt=&quot;Vaporwave is the most aesthetic domain in the Metaverse. By Jazmin Cano.&quot; title=&quot;Vaporwave is the most aesthetic domain in the Metaverse. By Jazmin Cano.&quot; id=&quot;wows1_13&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://voxeltopia&quot;&gt;&lt;img src=&quot;data1/images/tg_voxeltopia.jpg&quot; alt=&quot;Whimsical, colorful and low poly.&quot; title=&quot;Whimsical, colorful and low poly.&quot; id=&quot;wows1_14&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://whitemoth&quot;&gt;&lt;img src=&quot;data1/images/tg_whitemoth.jpg&quot; alt=&quot;A beautifully haunting build by Bryn Oh and Cica Ghost.&quot; title=&quot;A beautifully haunting build by Bryn Oh and Cica Ghost.&quot; id=&quot;wows1_15&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://anonymous&quot;&gt;&lt;img src=&quot;data1/images/tg_anonymous.jpg&quot; alt=&quot;A great Minecraft-built domain in High Fidelity. By DarlingNotin.&quot; title=&quot;A great Minecraft-built domain in High Fidelity. By DarlingNotin.&quot; id=&quot;wows1_16&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;hifi://avatardz&quot;&gt;&lt;img src=&quot;data1/images/tg_avatardz.jpg&quot; alt=&quot;A source for a variety of popular avatars from games.&quot; title=&quot;A source for a variety of popular avatars from games.&quot; id=&quot;wows1_17&quot;/&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;
&lt;div class=&quot;ws_shadow&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;engine1/wowslider.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;engine1/script.js&quot;&gt;&lt;/script&gt;
&lt;!-- End WOWSlider.com BODY section --&gt;</textarea>
<br><br>
<h2>Also you can try the <a href="http://wowslider.com/help/add-wowslider-to-page-2.html" target="_blank">Insert-To-Page wizard</a>, to add the slider visually, without touching the code!</h2>
<p>
<a href="http://wowslider.com/help/add-wowslider-to-page-2.html" target="_blank">Click here</a> for the detailed info.
</p>
</div>
<br><br>
</body>
</html>