Adding WOW / VLB / VSS to VSD?

User 245356 Photo


Registered User
52 posts

I have "finally" managed to get Visual Slideshow to work on my PC and have tested it. It looks like WOW - VSS and VLB are the same basic program and they should do what I need.

Is there a simple tutorial on how I can add any one of these into a VSD page I created? I hope it's simple because a coder I am not:-)

Thanks for any help.

Kenneth
User 2147626 Photo


Ambassador
2,958 posts

It's usually pretty straight forward. Simply create and publish your slideshow to your computer. Open the HTML page it creates in a text editor. In VSD create an HTML box where you want the slideshow to appear. Copy the 'head' and 'body' sections from the HTML file into the VSD html box sections. Then use the 'Edit/Add Files' tool in VSD to add the directories and files created by Visual Slideshow. If all went well, you should be able to preview the slideshow before publishing your VSD site. Let me know if you still need more help. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 245356 Photo


Registered User
52 posts

Gunsmoke: Thanks for your help!

I'm afraid I am not quite getting this however, so here is what I did.

I copied and pasted this into the Header HTML tab of the HTML object in VSD:

<title>Visual Slideshow generated by VisualSlideshow.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Visual Slideshow, Web Site Slide Show, Slideshow" />
<meta name="description" content="Visual Slideshow created with Visual Slideshow, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start VisualSlideShow.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="engine/js/mootools.js"></script>
<script type="text/javascript" src="engine/js/visualslideshow.js"></script>
<!-- End VisualSlideShow.com HEAD section -->

Then I added this to the Body HTML Tab:

<!-- Start VisualSlideShow.com BODY section -->
<div id="show" class="slideshow">
<div class="slideshow-images">
<a href="#"><img id="slide-0" src="data/images/img_1242.jpg" alt="IMG_1242" title="IMG_1242" /></a>
<a href="#"><img id="slide-1" src="data/images/img_1266.jpg" alt="IMG_1266" title="IMG_1266" /></a>
<a href="#"><img id="slide-2" src="data/images/img_1290.jpg" alt="IMG_1290" title="IMG_1290" /></a>
<a href="#"><img id="slide-3" src="data/images/img_1314.jpg" alt="IMG_1314" title="IMG_1314" /></a>
<a href="#"><img id="slide-4" src="data/images/img_1338.jpg" alt="IMG_1338" title="IMG_1338" /></a>
<a href="#"><img id="slide-5" src="data/images/img_1362.jpg" alt="IMG_1362" title="IMG_1362" /></a>
</div>
<div class="slideshow-thumbnails">
<ul>
<li><a href="#slide-0"><img src="data/thumbnails/img_1242.jpg" alt="IMG_1242" /></a></li>
<li><a href="#slide-1"><img src="data/thumbnails/img_1266.jpg" alt="IMG_1266" /></a></li>
<li><a href="#slide-2"><img src="data/thumbnails/img_1290.jpg" alt="IMG_1290" /></a></li>
<li><a href="#slide-3"><img src="data/thumbnails/img_1314.jpg" alt="IMG_1314" /></a></li>
<li><a href="#slide-4"><img src="data/thumbnails/img_1338.jpg" alt="IMG_1338" /></a></li>
<li><a href="#slide-5"><img src="data/thumbnails/img_1362.jpg" alt="IMG_1362" /></a></li>
</ul>
</div>
<a id="vlb" href="http://visualslideshow.com">Web Photo Slideshow by VisualSlideshow.com v2.0</a>
</div>
<!-- End VisualSlideShow.com BODY section -->
Then I opened the Add Files and selected the files from their current location (C:\website 2014) and tried that. All I got on a Preview page was the names of the images with no HTML object. So I have clearly missed something here.

Thanks,

Kenneth
User 603315 Photo


Registered User
938 posts

Kenneth Smith wrote:
Gunsmoke: Thanks for your help!

I'm afraid I am not quite getting this however, so here is what I did.

I copied and pasted this into the Header HTML tab of the HTML object in VSD:

<title>Visual Slideshow generated by VisualSlideshow.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Visual Slideshow, Web Site Slide Show, Slideshow" />
<meta name="description" content="Visual Slideshow created with Visual Slideshow, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start VisualSlideShow.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="engine/js/mootools.js"></script>
<script type="text/javascript" src="engine/js/visualslideshow.js"></script>
<!-- End VisualSlideShow.com HEAD section -->

Then I added this to the Body HTML Tab:

<!-- Start VisualSlideShow.com BODY section -->
<div id="show" class="slideshow">
<div class="slideshow-images">
<a href="#"><img id="slide-0" src="data/images/img_1242.jpg" alt="IMG_1242" title="IMG_1242" /></a>
<a href="#"><img id="slide-1" src="data/images/img_1266.jpg" alt="IMG_1266" title="IMG_1266" /></a>
<a href="#"><img id="slide-2" src="data/images/img_1290.jpg" alt="IMG_1290" title="IMG_1290" /></a>
<a href="#"><img id="slide-3" src="data/images/img_1314.jpg" alt="IMG_1314" title="IMG_1314" /></a>
<a href="#"><img id="slide-4" src="data/images/img_1338.jpg" alt="IMG_1338" title="IMG_1338" /></a>
<a href="#"><img id="slide-5" src="data/images/img_1362.jpg" alt="IMG_1362" title="IMG_1362" /></a>
</div>
<div class="slideshow-thumbnails">
<ul>
<li><a href="#slide-0"><img src="data/thumbnails/img_1242.jpg" alt="IMG_1242" /></a></li>
<li><a href="#slide-1"><img src="data/thumbnails/img_1266.jpg" alt="IMG_1266" /></a></li>
<li><a href="#slide-2"><img src="data/thumbnails/img_1290.jpg" alt="IMG_1290" /></a></li>
<li><a href="#slide-3"><img src="data/thumbnails/img_1314.jpg" alt="IMG_1314" /></a></li>
<li><a href="#slide-4"><img src="data/thumbnails/img_1338.jpg" alt="IMG_1338" /></a></li>
<li><a href="#slide-5"><img src="data/thumbnails/img_1362.jpg" alt="IMG_1362" /></a></li>
</ul>
</div>
<a id="vlb" href="http://visualslideshow.com">Web Photo Slideshow by VisualSlideshow.com v2.0</a>
</div>
<!-- End VisualSlideShow.com BODY section -->
Then I opened the Add Files and selected the files from their current location (C:\website 2014) and tried that. All I got on a Preview page was the names of the images with no HTML object. So I have clearly missed something here.

Thanks,

Kenneth


I haven't got the time to look at this thread in any detail but I'm putting up a vid of Wow slider as we speak for RLM, there's a few ways of doing it, but it might work in VSD, although I don't have the program.
User 2147626 Photo


Ambassador
2,958 posts

Missed it by 'that' much! :D

Before starting this, make sure you use Edit/Remove Files to remove the files you added from VSD.

First, all you need in the 'head' section is this:
<!-- Start VisualSlideShow.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine/css/slideshow.css" media="screen" />
<style type="text/css">.slideshow a#vlb{display:none}</style>
<script type="text/javascript" src="engine/js/mootools.js"></script>
<script type="text/javascript" src="engine/js/visualslideshow.js"></script>
<!-- End VisualSlideShow.com HEAD section -->

The body is fine.

Second, the files you needed to add were not the ones in the original location. When you created your slideshow VSS create an HTML file and 2 directories...one titled 'data' and one titled 'engine'. You need to add these directories and any files and/or directories contained within them.

That should do it. Let me know. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 245356 Photo


Registered User
52 posts

Gunsmoke:

Still not getting it. Can't seem to figure the add files aspect of this, plus trying to do this while I have customers coming in is too much for my non-multitasking brain. I will have a fresh kick at this tomorrow.

Sincere thanks,

Kenneth
User 2147626 Photo


Ambassador
2,958 posts

Well, made a video showing what to do but had the sound turned off. Sorry. Hope you can follow along. If not, let me know. :P
http://youtu.be/SFVQczzzcZg
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 245356 Photo


Registered User
52 posts

Gunsmoke:

That was EXACTLY what I needed! It was the file structure I was not getting, but now I see.

So, one more question if I may. When I produce a site with a slideshow in it, I assume that I have to ftp the directories (data, engine, etc) to my server and as long as they are in the main directory (root), it should work. If however I was to put this into a sub-directory off of the root (let's call it Products), I guess I would have to start off by creating a "Products" folder directly off the root in the Add Files box, and then carry on as you illustrated. Do I have correct?

Very sincere thanks!

Kenneth
User 603315 Photo


Registered User
938 posts

Kenneth Smith wrote:
Gunsmoke:

That was EXACTLY what I needed! It was the file structure I was not getting, but now I see.

So, one more question if I may. When I produce a site with a slideshow in it, I assume that I have to ftp the directories (data, engine, etc) to my server and as long as they are in the main directory (root), it should work. If however I was to put this into a sub-directory off of the root (let's call it Products), I guess I would have to start off by creating a "Products" folder directly off the root in the Add Files box, and then carry on as you illustrated. Do I have correct?

Very sincere thanks!

Kenneth


Kenneth he's smoking that guy :lol: I think your seeing it right now.
User 2147626 Photo


Ambassador
2,958 posts

No. You do not have to FTP the files to the server, if you have added them to VSD. When you publish your VSD site the files will be uploaded to the correct location. As long as you can preview the slideshow in VSD then it should upload and work on the server.

As far as your second question, it's a bit trickier. When you create your pages in VSD all pages are located in the root, so the /data and /engine directories should be there. If you create a page and move it to a sub-folder /products then the /data and /engine folders will have to be located in that directory too.

You can do that in 2 ways.

First, and easiest is to simply FTP the folders to the server and into the directory where you want them. Do not add them to VSD if you FTP them. The disadvantage is that you cannot preview the slideshow. However, this will be the easiest way to do it if you plan on making changes to the slideshow (ie. adding new products). Rather than deleting the old files/folders from VSD and then adding the new ones and re-publishing, you'd simply create or modify the slideshow and publish to your hard disk. Then FTP the files to your server. Then change the code in VSD if necessary and re-publish your VSD site.

Second, you can add the files and folders to your VSD site. When you go to Edit/Add Files create a subfolder /products and add the /data and /engine files under that. The advantage is that you can preview the slideshow and when you publish your VSD site it will upload the files. The disadvantage is when you modify the slideshow you have to delete these files and add the new ones before publishing again.

Your choice. I'd FTP them. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com

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.