168 lines
No EOL
6.6 KiB
HTML
168 lines
No EOL
6.6 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><a href="hifi://portalarium"><img src="data1/images/arbys_jpg_high.png" alt="Come to Arbys. We have the meats!" title="Come to Arbys. We have the meats!" id="wows1_0"/></a></li>
|
|
<li><a href="hifi://windwaker"><img src="data1/images/bopofinal.png" alt="Clown Nightmare Land. Straing from your nightmares." title="Clown Nightmare Land. Straing from your nightmares." id="wows1_1"/></a></li>
|
|
<li><a href="hifi://morty"><img src="data1/images/boposketch2.png" alt="BOPO THE CLOWN............Straight from your nightmare." title="BOPO THE CLOWN............Straight from your nightmare." id="wows1_2"/></a></li>
|
|
<li><a href="hifi://avatardz"><img src="data1/images/caitlyn_8_x_10.png" alt="Caitlyn 8 x 10" title="Caitlyn 8 x 10" id="wows1_3"/></a></li>
|
|
</ul></div>
|
|
<div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.net">css image slider</a> by WOWSlider.com v8.8</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:/Downloads/wowslider-win-setup/test2/wowslider.html">D:/Downloads/wowslider-win-setup/test2/wowslider.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:/Downloads/wowslider-win-setup/test2">D:/Downloads/wowslider-win-setup/test2</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"><head></head></span></h2>
|
|
<textarea onclick="this.select()"><!-- Start WOWSlider.com HEAD section -->
|
|
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
|
|
<script type="text/javascript" src="engine1/jquery.js"></script>
|
|
<!-- End WOWSlider.com HEAD section --></textarea>
|
|
|
|
|
|
<h2><span class="num" style="top: -8px;">3</span> Paste this code to your page between the tags <span class="mono"><body></body></span> in the place that you want the slider to appear</h2>
|
|
<textarea onclick="this.select()" rows="15"><!-- Start WOWSlider.com BODY section -->
|
|
<div id="wowslider-container1">
|
|
<div class="ws_images"><ul>
|
|
<li><a href="hifi://portalarium"><img src="data1/images/arbys_jpg_high.png" alt="Come to Arbys. We have the meats!" title="Come to Arbys. We have the meats!" id="wows1_0"/></a></li>
|
|
<li><a href="hifi://windwaker"><img src="data1/images/bopofinal.png" alt="Clown Nightmare Land. Straing from your nightmares." title="Clown Nightmare Land. Straing from your nightmares." id="wows1_1"/></a></li>
|
|
<li><a href="hifi://morty"><img src="data1/images/boposketch2.png" alt="BOPO THE CLOWN............Straight from your nightmare." title="BOPO THE CLOWN............Straight from your nightmare." id="wows1_2"/></a></li>
|
|
<li><a href="hifi://avatardz"><img src="data1/images/caitlyn_8_x_10.png" alt="Caitlyn 8 x 10" title="Caitlyn 8 x 10" id="wows1_3"/></a></li>
|
|
</ul></div>
|
|
<div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.net">css image slider</a> by WOWSlider.com v8.8</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 --></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> |