WOW Slider #2 - Page 2

User 2147626 Photo


Ambassador
2,958 posts

Is this what you are looking for?? http://gunsmoke.me/h/coffee/exslider2.html

If so, let me know and I'll run you through it. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
Hi Dave
thanks mate for the awesome help... now I having trouble with VSD crashing when trying to upload the HTML files for the slider. I have compatibility etc running and as administrator but still crashes.

Gunsmoke run me through it...

If you both look at the home page now http://www.kowrestlinggear.com/ you will see my lack of knowledge...
Cheers
User 187934 Photo


Senior Advisor
20,181 posts

You need to change the script link from engine3 to engine1.
This
<link rel="stylesheet" type="text/css" href="engine3/style.css" />
<script type="text/javascript" src="engine3/jquery.js"></script>

To this.
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>

You also need to remove the duplicate script. You may have placed them in the head of the page and in the header HTML of the html box. Just need to remove one.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2147626 Photo


Ambassador
2,958 posts

Hey Knockout,

Using the WOW slider if you want more than 1 slider on a page, they each need to be ID'd differently. You do this in WOW slider. After you create the slider you want and you hit publish, at the bottom is an option that says 'Slider ID' with a box. Choose a different number for each slider and save each slider to it's own location.

Then in VSD, insert the HTML code in the 'header' and 'body' of and HTML box and position it where you want it on the page.

Then you can do 1 of 2 things. You can add all the files to VSD and let it upload with your site, or you can manually upload the files using an FTP program.

If you add them to VSD. You will have to use the Edit/Add Files option to create each directory, and subdirectory for each slider. They will be labeled data1 data2 data3, etc. and engine1 engine2, etc.

There will also be subdirectories you will need to create. Then add all files in the correct directory. At that point you should be able to 'preview' your site in VSD and see that everything is working. Then publish your site and all files will be uploaded.

If you choose to upload via FTP, you will not be able to preview your sliders. You won't see them till you view your site live.

Start with what Eric said. You want to make sure you don't have duplicate code in there, and that the slider, if you only have 1, is named correctly. Let me know if you are still having problems or need more help. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
ok so its previewing correct now and the html code is as follows...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta name="generator" content="CoffeeCup Visual Site Designer, Version 7.0 Build 26 for Windows">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="generator" content="CoffeeCup Visual Site Designer (www.coffeecup.com)">
<meta name="created" content="Thu, 04 Apr 2013 13:08:45 GMT">


<title> KO Wrestling </title>

<style type="text/css">

/* TEXT STYLES */

.textstyle0 {font-family:HandelGothic BT;font-weight:normal;font-style:normal;font-size:31px;text-decoration:none;color:#ffffff;}
.textstyle1 {font-family:HandelGothic BT;font-weight:normal;font-style:normal;font-size:13px;text-decoration:none;color:#ffffff;}
.textstyle2 {font-family:Trebuchet MS;font-weight:normal;font-style:normal;font-size:10px;text-decoration:none;color:#ffffff;}


/* OBJECT STYLES */

div.Object101 { position:absolute; top:722px; left:0px; z-index:0; }
div.Object102 { position:absolute; top:0px; left:0px; z-index:1; }
div.Object103 { position:absolute; top:281px; left:241px; width:490px; z-index:2; }
div.Object104 { position:absolute; padding-right:5px; top:51px; left:151px; z-index:3; text-align:left; width:578px; }
div.Object105 { position:absolute; padding-right:5px; top:737px; left:14px; z-index:4; text-align:left; width:184px; }
div.Object106 { position:absolute; padding-right:5px; top:723px; left:322px; z-index:5; text-align:left; width:66px; }
div.Object107 { position:absolute; padding-right:5px; top:737px; left:322px; z-index:6; text-align:left; width:49px; }
div.Object108 { position:absolute; padding-right:5px; top:751px; left:322px; z-index:7; text-align:left; width:110px; }
div.Object109 { position:absolute; padding-right:5px; top:723px; left:542px; z-index:8; text-align:left; width:31px; }
div.Object110 { position:absolute; padding-right:5px; top:737px; left:542px; z-index:9; text-align:left; width:111px; }
div.Object111 { position:absolute; padding-right:5px; top:751px; left:542px; z-index:10; text-align:left; width:129px; }
div.Object112 { position:absolute; padding-right:5px; top:723px; left:771px; z-index:11; text-align:left; width:57px; }
div.Object113 { position:absolute; padding-right:5px; top:737px; left:771px; z-index:12; text-align:left; width:48px; }
div.Object114 { position:absolute; padding-right:5px; top:751px; left:771px; z-index:13; text-align:left; width:47px; }
div.Object115 { position:absolute; padding-right:5px; top:120px; left:368px; z-index:14; text-align:left; width:50px; }
div.Object116 { position:absolute; padding-right:5px; top:120px; left:435px; z-index:15; text-align:left; width:74px; }



/* BODY STYLES */

body {
margin:0px;
padding :0px;
text-align:center;
height:100%;
width:100%;
background-color: #ffffff;
}


/* LINK STYLES */

A:link { color:#ffffff; text-decoration:none; }

A:visited { color:#c0c0c0; text-decoration:none; }

A:active { color:#c0c0c0; text-decoration:none; }

A:hover { color:#0000a0; text-decoration:none; }




/* IMAGE STYLES */

img { border:0 none}



/* CONTAINER RULES */

#container { position:relative; margin:0px auto 0 auto; height:768px; width:960px; text-align:left; padding-left:0px;}

</style>


<!--html inserted by user -->
<title>homepageslider</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="keywords" content="homepageslider" />

<meta name="description" content="homepageslider" />

<!-- 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 of html inserted by user -->
</head>

<body>
<div id="container">

<div class="Object101"><img src="files/IMG_0.jpg" alt="" width="960px" height="46px"></div>

<div class="Object102"><img src="files/ko wrestling page header.jpg" alt="" width="960px" height="138px"></div>

<div class="Object103"> <div id="wowslider-container1">

<div class="ws_images"><ul>
<li><img src="data1/images/aieahighschoolwrestling.jpg" alt="aiea-high-school-wrestling" title="aiea-high-school-wrestling" id="wows1_0"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="data1/images/aieahighschoolwrestling.jpg" title="aiea-high-school-wrestling"><img src="data1/tooltips/aieahighschoolwrestling.jpg" alt="aiea-high-school-wrestling"/>1</a>
<a href="data1/images/senecacomb.jpg" title="senecacomb">2</a>
<a href="data1/images/2008flwrestlingbluesing.jpg" title="2008-FL-Wrestling-Blue-Sing">3</a>
<a href="data1/images/tennesseeperformancetee.jpg" title="Tennessee-Performance-Tee">4</a>
<a href="data1/images/arizonauniversitywildcats.jpg" title="arizona-university-wildcats">5</a>
<a href="data1/images/drifitsublimatedshort.jpg" title="dri-fit-sublimated-short">6</a>
<a href="data1/images/valdezhswrestlingsinglet.jpg" title="Valdez-HS-Wrestling-Singlet">7</a>
<a href="data1/images/osceolacompressiontop.jpg" title="osceola-compression-top">8</a>
<a href="data1/images/blissfieldhighschoolroya.jpg" title="blissfield-high-school-roya">9</a>
<a href="data1/images/warriorsfightshortsf.jpg" title="warriorsfightshortsF">10</a>
<a href="data1/images/arrupejesuitfinalswrestl.jpg" title="arrupe-jesuit-finals-wrestl">11</a>
<a href="data1/images/celebrationperformancetee.jpg" title="Celebration-Performance-Tee">12</a>
<a href="data1/images/coppellwrestlingsinglet.jpg" title="coppell-wrestling-singlet">13</a>
<a href="data1/images/dragonsfightshortsf.jpg" title="dragonsfightshortsF">14</a>
<a href="data1/images/kellerwrestlingacademysi.jpg" title="keller-wrestling-academy-si">15</a>
<a href="data1/images/rousehsraiders.jpg" title="Rouse-HS-Raiders">16</a>
<a href="data1/images/texastribewrestling.jpg" title="texas-tribe-wrestling">17</a>
<a href="data1/images/valdezwrestlingcompressiongear.jpg" title="Valdez-Wrestling-Compression-Gear">18</a>
<a href="data1/images/vikingswrestlingsinglet.jpg" title="Vikings-Wrestling-Singlet">19</a>
</div></div>
<!-- Generated by WOWSlider.com v3.3 -->

<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>

<div class="Object104"><span class="textstyle0">CUSTOM WRESTLING UNIFORMS<br>
</span></div>

<div class="Object105"><span class="textstyle1">KNOCKOUT SPORTSWEAR<br>
</span></div>

<div class="Object106"><span class="textstyle2">CONTACT US<br>
</span></div>

<div class="Object107"><span class="textstyle2">SPECIALS<br>
</span></div>

<div class="Object108"><span class="textstyle2">SIZING INFORMATION<br>
</span></div>

<div class="Object109"><span class="textstyle2">FAQ'S<br>
</span></div>

<div class="Object110"><span class="textstyle2">LOGO REQUIREMENTS<br>
</span></div>

<div class="Object111"><span class="textstyle2">SEMI CUSTOM TEMPLATES<br>
</span></div>

<div class="Object112"><span class="textstyle2"><a target="_blank" href="http://www.facebook.com/knockoutsportswear">FACEBOOK<br>
</a></span></div>

<div class="Object113"><span class="textstyle2">TWITTER<br>
</span></div>

<div class="Object114"><span class="textstyle2">KO CLUB<br>
</span></div>

<div class="Object115"><span class="textstyle2"><a href="Singlets.html">SINGLETS<br>
</a></span></div>

<div class="Object116"><span class="textstyle2"><a href="FightShorts.html">FIGHT SHORTS<br>
</a></span></div>
</div>

</body>
</html>
BUT the uploaded website page is not displaying correctly and the HTML code is

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta name="generator" content="CoffeeCup Visual Site Designer, Version 7.0 Build 26 for Windows">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="generator" content="CoffeeCup Visual Site Designer (www.coffeecup.com)">
<meta name="created" content="Thu, 04 Apr 2013 11:20:34 GMT">


<title> KO Wrestling </title>

<style type="text/css">

/* TEXT STYLES */

.textstyle0 {font-family:HandelGothic BT;font-weight:normal;font-style:normal;font-size:31px;text-decoration:none;color:#ffffff;}
.textstyle1 {font-family:HandelGothic BT;font-weight:normal;font-style:normal;font-size:13px;text-decoration:none;color:#ffffff;}
.textstyle2 {font-family:Trebuchet MS;font-weight:normal;font-style:normal;font-size:10px;text-decoration:none;color:#ffffff;}


/* OBJECT STYLES */

div.Object46 { position:absolute; top:722px; left:0px; z-index:0; }
div.Object47 { position:absolute; top:0px; left:0px; z-index:1; }
div.Object48 { position:absolute; top:281px; left:241px; width:490px; z-index:2; }
div.Object49 { position:absolute; padding-right:5px; top:51px; left:151px; z-index:3; text-align:left; width:578px; }
div.Object50 { position:absolute; padding-right:5px; top:737px; left:14px; z-index:4; text-align:left; width:184px; }
div.Object51 { position:absolute; padding-right:5px; top:723px; left:322px; z-index:5; text-align:left; width:66px; }
div.Object52 { position:absolute; padding-right:5px; top:737px; left:322px; z-index:6; text-align:left; width:49px; }
div.Object53 { position:absolute; padding-right:5px; top:751px; left:322px; z-index:7; text-align:left; width:110px; }
div.Object54 { position:absolute; padding-right:5px; top:723px; left:542px; z-index:8; text-align:left; width:31px; }
div.Object55 { position:absolute; padding-right:5px; top:737px; left:542px; z-index:9; text-align:left; width:111px; }
div.Object56 { position:absolute; padding-right:5px; top:751px; left:542px; z-index:10; text-align:left; width:129px; }
div.Object57 { position:absolute; padding-right:5px; top:723px; left:771px; z-index:11; text-align:left; width:57px; }
div.Object58 { position:absolute; padding-right:5px; top:737px; left:771px; z-index:12; text-align:left; width:48px; }
div.Object59 { position:absolute; padding-right:5px; top:751px; left:771px; z-index:13; text-align:left; width:47px; }
div.Object60 { position:absolute; padding-right:5px; top:120px; left:368px; z-index:14; text-align:left; width:50px; }
div.Object61 { position:absolute; padding-right:5px; top:120px; left:435px; z-index:15; text-align:left; width:74px; }



/* BODY STYLES */

body {
margin:0px;
padding :0px;
text-align:center;
height:100%;
width:100%;
background-color: #ffffff;
}


/* LINK STYLES */

A:link { color:#ffffff; text-decoration:none; }

A:visited { color:#c0c0c0; text-decoration:none; }

A:active { color:#c0c0c0; text-decoration:none; }

A:hover { color:#0000a0; text-decoration:none; }




/* IMAGE STYLES */

img { border:0 none}



/* CONTAINER RULES */

#container { position:relative; margin:0px auto 0 auto; height:768px; width:960px; text-align:left; padding-left:0px;}

</style>


<!--html inserted by user -->
<title>homepageslider</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="keywords" content="homepageslider" />

<meta name="description" content="homepageslider" />

<!-- 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 of html inserted by user -->
</head>

<body>
<div id="container">

<div class="Object46"><img src="files/IMG_0.jpg" alt="" width="960px" height="46px"></div>

<div class="Object47"><img src="files/ko wrestling page header.jpg" alt="" width="960px" height="138px"></div>

<div class="Object48"><body style="background-color:transparent">

<!-- Start WOWSlider.com BODY section -->

<div id="wowslider-container1">

<div class="ws_images"><ul>
<li><img src="data1/images/aieahighschoolwrestling.jpg" alt="aiea-high-school-wrestling" title="aiea-high-school-wrestling" id="wows1_0"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="data1/images/aieahighschoolwrestling.jpg" title="Aiea High School"><img src="data1/tooltips/aieahighschoolwrestling.jpg" alt="aiea-high-school-wrestling"/>1</a>
<a href="data1/images/senecacomb.jpg" title="Seneca Fight Short">2</a>
<a href="data1/images/2008flwrestlingbluesing.jpg" title="FL National Team">3</a>
<a href="data1/images/tennesseeperformancetee.jpg" title="TN-Performance-Top">4</a>
<a href="data1/images/arizonauniversitywildcats.jpg" title="Arizona-University">5</a>
<a href="data1/images/drifitsublimatedshort.jpg" title="Performance Short">6</a>
<a href="data1/images/valdezhswrestlingsinglet.jpg" title="Valdez-HS">7</a>
<a href="data1/images/osceolacompressiontop.jpg" title="Compression-Top">8</a>
<a href="data1/images/blissfieldhighschoolroya.jpg" title="Blissfield-High-School">9</a>
<a href="data1/images/warriorsfightshortsf.jpg" title="Fight Short">10</a>
<a href="data1/images/arrupejesuitfinalswrestl.jpg" title="Arrupe-Jesuit">11</a>
<a href="data1/images/celebrationperformancetee.jpg" title="Performance-Top">12</a>
<a href="data1/images/coppellwrestlingsinglet.jpg" title="Coppell High School">13</a>
<a href="data1/images/dragonsfightshortsf.jpg" title="Fight Short">14</a>
<a href="data1/images/kellerwrestlingacademysi.jpg" title="Keller-WA">15</a>
<a href="data1/images/rousehsraiders.jpg" title="Rouse-High-School">16</a>
<a href="data1/images/texastribewrestling.jpg" title="Texas-Tribe">17</a>
<a href="data1/images/valdezwrestlingcompressiongear.jpg" title="Compression-Gear">18</a>
<a href="data1/images/vikingswrestlingsinglet.jpg" title="Center-Vikings">19</a>
</div></div>
<!-- Generated by WOWSlider.com v3.3 -->

<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>

<div class="Object49"><span class="textstyle0">CUSTOM WRESTLING UNIFORMS<br>
</span></div>

<div class="Object50"><span class="textstyle1">KNOCKOUT SPORTSWEAR<br>
</span></div>

<div class="Object51"><span class="textstyle2">CONTACT US<br>
</span></div>

<div class="Object52"><span class="textstyle2">SPECIALS<br>
</span></div>

<div class="Object53"><span class="textstyle2">SIZING INFORMATION<br>
</span></div>

<div class="Object54"><span class="textstyle2">FAQ'S<br>
</span></div>

<div class="Object55"><span class="textstyle2">LOGO REQUIREMENTS<br>
</span></div>

<div class="Object56"><span class="textstyle2">SEMI CUSTOM TEMPLATES<br>
</span></div>

<div class="Object57"><span class="textstyle2"><a target="_blank" href="http://www.facebook.com/knockoutsportswear">FACEBOOK<br>
</a></span></div>

<div class="Object58"><span class="textstyle2">TWITTER<br>
</span></div>

<div class="Object59"><span class="textstyle2">KO CLUB<br>
</span></div>

<div class="Object60"><span class="textstyle2"><a href="Singlets.html">SINGLETS<br>
</a></span></div>

<div class="Object61"><span class="textstyle2"><a href="FightShorts.html">FIGHT SHORTS<br>
</a></span></div>
</div>

</body>
</html>
User 2147626 Photo


Ambassador
2,958 posts

Just gotta ask, you sure you got all the old code out, and all the new code in?

I'm asking because my code looks a little different. Yours looks like it only has 1 image, then bullets.

<div class="ws_images"><ul>
<li><img src="data1/images/aieahighschoolwrestling.jpg" alt="aiea-high-school-wrestling" title="aiea-high-school-wrestling" id="wows1_0"/></li>
</ul></div>

<div class="ws_bullets"><div>
<a href="data1/images/aieahighschoolwrestling.jpg" title="aiea-high-school-wrestling"><img src="data1/tooltips/aieahighschoolwrestling.jpg" alt="aiea-high-school-wrestling"/>1</a>
<a href="data1/images/senecacomb.jpg" title="senecacomb">2</a>
<a href="data1/images/2008flwrestlingbluesing.jpg" title="2008-FL-Wrestling-Blue-Sing">3</a>
<a href="data1/images/tennesseeperformancetee.jpg" title="Tennessee-Performance-Tee">4</a>
<a href="data1/images/arizonauniversitywildcats.jpg" title="arizona-university-wildcats">5</a>
<a href="data1/images/drifitsublimatedshort.jpg" title="dri-fit-sublimated-short">6</a>
<a href="data1/images/valdezhswrestlingsinglet.jpg" title="Valdez-HS-Wrestling-Singlet">7</a>
<a href="data1/images/osceolacompressiontop.jpg" title="osceola-compression-top">8</a>
<a href="data1/images/blissfieldhighschoolroya.jpg" title="blissfield-high-school-roya">9</a>
<a href="data1/images/warriorsfightshortsf.jpg" title="warriorsfightshortsF">10</a>
<a href="data1/images/arrupejesuitfinalswrestl.jpg" title="arrupe-jesuit-finals-wrestl">11</a>
<a href="data1/images/celebrationperformancetee.jpg" title="Celebration-Performance-Tee">12</a>
<a href="data1/images/coppellwrestlingsinglet.jpg" title="coppell-wrestling-singlet">13</a>
<a href="data1/images/dragonsfightshortsf.jpg" title="dragonsfightshortsF">14</a>
<a href="data1/images/kellerwrestlingacademysi.jpg" title="keller-wrestling-academy-si">15</a>
<a href="data1/images/rousehsraiders.jpg" title="Rouse-HS-Raiders">16</a>
<a href="data1/images/texastribewrestling.jpg" title="texas-tribe-wrestling">17</a>
<a href="data1/images/valdezwrestlingcompressiongear.jpg" title="Valdez-Wrestling-Compression-Gear">18</a>
<a href="data1/images/vikingswrestlingsinglet.jpg" title="Vikings-Wrestling-Singlet">19</a>
</div></div>

Mine lists all the images under the ws_images tag, not a ws_bullets' tag. Under the 'ws_bullets' tag you should see "data1/tooltips/imagename etc etc"

You say the 'preview' works in VSD, then does not work after upload. Might want to delete all files and images from your server dealing with the slider. The data1 and engine1 directories as well as the html page with the slider. Then simply upload again and see what happens.

Main thing is to check the code. You should see ALL your images listed under the ws_images tag.

Let me know what you find.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2147626 Photo


Ambassador
2,958 posts

Having nothing to do with that, I see this...

<div class="Object47"><img src="files/ko wrestling page header.jpg" alt="" width="960px" height="138px"></div>


You should have no 'spaces' in file or directory names. It works on a computer, but sometimes the 'internet' does funny things with them. I'd rename that and delete the spaces. Use - instead of a space.
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
thanks for all your help gunsmoke... I will let you know how I get on
Thanks Gunsmoke... ended up redoing the wow slider and publishing straight into the website folder before uploading.

I tried fixing the code for each of the images and the thumbnails but it ended up just stacking the images on the page without any of the slider etc.

B****y frustrating. But learned something and some progress with the functionality. Cheers again.
Shane

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.