[ Sample Tour Page ]
[ Sample Page With Cart ]





 Virtual Tour Add-On Setup:
 This script is intended to be added to Allwebco templates (or websites) that do not now have a virtual tour included. Click here for current info and options for this add-on.

Outline: (Steps on this page)
#1. Unzip and place files.
#2. Create new tour page or add links.
#3. Add 2 lines to page head areas.
#4. Edit the header Flash text.
#5. Setup the tour.
#6. Troubleshooting.
#7. Change/Edit options.

STEP #1: | More Details
Unzip the tour zip file and put the "tour" folder in your template folder. Place the "tour-sample_page.htm" and "FORMtour-sample_page.htm" in your template folder with the other HTML files. This should be the same folder with your index.html and about.html.

STEP #2-A: (Create a new tour page)
You can now either add tour links to your existing pages or you can create a new tour page. To create a new tour page:
  1. To create a new page to use as the tour page. Copy an existing page. For example make a copy of your about page. Click here for help copying pages. We will call this page "tour_home.htm" for the rest of these instructions.
  2. Open the "tour-sample_page.htm" in Notepad or your editor, or if you want a Paypal cart tour open the "FORMtour-sample_page.htm" in Notepad.
  3. In the tour sample page highlight the code between these notes in the HTML source code: "START COPY AND PASTE AREA" and "END COPY AND PASTE AREA".
  4. In your "tour_home.htm" you created find the "MAIN TABLE" or the "CONTENT TABLE" note. Or find the start of the page text in your "tour_home.htm". Paste the code from the "tour-sample_page.htm" or "FORMtour-sample_page.htm" into this area on your "tour_home.htm".
  5. Save this page and test it in your browser to see how it looks. The tour links will still not work and the text may not be formatted yet. You will just be checking for serious alignment errors or placement errors.
  6. Go to step #3 on this page.
STEP #2-B: (Adding tour links on existing pages) | More Link Details
You can add a tour link to any existing page or to your menu.js. To add tour links on your existing HTML pages: Select and copy the following code. Then paste this onto any of your HTML pages:



In HTML editors such as Frontpage or Dreamweaver create a new link and use this code for the actual link:



To add a link in the menu.js or sidebar.js you will add two backslashes to the link like the following:



NOTE: If you are adding links to the sidebar.js or need help adding links to your pages, see the following two support pages: Adding page links and also see Adding items to .js files.

STEP #3:
Select and copy the following two lines in the box below. The paste them into the head of your HTML page. You will add this to the head of either a new page you have created, or add this on any page you have added a tour link to. Add this code just above the </head> tag on your HTML pages.



See the source code for the tour-sample_page.htm for an example of where to add the code above.

STEP #4:
EDIT THE TOUR FLASH HEADER: | Click for more details
Open the "flash-tour.txt" in the "tour" folder with Notepad and change only "Yourwebsitetitle.com Virtual Tour" to match your name or company name. Be sure not to delete the "logo-tour=". If you wish to use a graphic logo, there are instructions later in this document.

STEP #5:
EDIT THE TOUR AREA: | Click for more details and options
All the files for the tour area can be found in the "tour" folder.

1. In the "tour" folder edit the tour-1.htm through tour-4.htm with your own item descriptions.

2. For each tour replace the images used in the tour popups. For example, for tour #1, edit the panoramic.jpg and the 9 other .jpg images found in the "tour_folder-1" that is inside the "tour" folder. Each tour image has a thumbnail and a full sized image to edit. For the scrolling image (panoramic.jpg) the matching thumbnail is called tour-1thumb.jpg.

3. If you need to change the header color, change the variables in the header-tour.js in the "tour" folder. (Also see options below)

4. If you would like to use videos or see your other options Click here for more details.



TROUBLESHOOTING: | More Details
If you do the steps above and the tour is not working on one or any of the pages, be sure you have added the lines of code in step #3 to any and all pages with tour links on them. Add the code in step #3 just above the </head> tag.

It also may not work because you are linking the wrong .htm document or it is misspelled. Remember that hosting areas are case sensitive. Be sure all file and link names match exactly.

It also will not work if your tour folder does not exist or is named incorrectly.

Try doing the above steps again from the start.





OPTIONS:

TOUR POPUP OPTIONS: | More Details
There are some options in the tour_pop-closeup.js. The tour_pop-closeup.js can be found in the "tour" folder and can be edited with Notepad or any plain text editor.

REPLACING IMAGES: | More Details
If you need help setting up the tour images, please click above.

ADDING VIDEO: | More Details
You can add video to the tour area and replace either the sliding Flash or any of the images in the tour. Click above for more details.

PAYPAL SETUP: | More Details
To setup the Paypal forms in the FORMtour-sample_page.htm please click the link above. Be sure to also change the e-mail in the "view cart" button as well as in all the forms on the new HTML page you have created (see step #2-A).

USING A GRAPHIC LOGO:
You can replace the tour Flash logo with a graphic one. To do this, rename or delete the header-tour.js in the "tour" folder and then rename the graphic_header-tour.js to header-tour.js. Then edit the logo-tour.jpg with your own logo image. This image can be found in the "tour_picts" folder.

COLOR CHANGES: | Click for more details | More color details
This add-in features some quick color changes in some of the .js files and the tour.css file. You will edit these files in Notepad to change the colors:
  • Edit the "header-tour.js" to change the Flash header color.
  • Edit the "sidebar-background" class in the tour.css to change the sidebar color.
  • Edit the tour.css to change the link, text (TABLE) and title in the tour pages.
  • Edit the "background.jpg" in the "tour_picts" folder to change the tour background color.