VP-ASP Shopping Cart - Online Help Guides - Integrate EasySlide1.7 into your VP-ASP 7.00 site

Integrate EasySlide1.7 into your VP-ASP 7.00 site

It is easy to integrate the nice looking banners sliding into your homepage of your VP-ASP 7.00 site.

For the demo of EasySlider1.7, you can review it at :
http://cssglobe.com/lab/easyslider1.7/01.html

For downloading and details of EasySlider1.7, you can go to below URL :
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Please follow these steps below on how to integrate EasySlider1.7 to your site:

1. At the first steps, you need to upload your banners to the template folder of your site.
E.g. if you want to slide about 5 banners, please name the banners files as :
- 01.jpg
- 02.jpg
- 03.jpg
- 04.jpg
- 05.jpg

Then please upload these banners to the folder "templates/default-2cols/images/" (if you are using 2 columns template) or "templates/default-3cols/images/" (if you are using 3 columns template).

Note : The image width and height of the banner is up to you to suit your homepage, it could be 520px × 220px for example.

2. Locate the below JS files that you get from EasySlider1.7 addon :
- jquery.js
- easySlider1.7.js

Then please upload these files to the folder "templates/default-2cols/js/" (if you are using 2 columns template) or "templates/default-3cols/js/" (if you are using 3 columns template).

3. Locate the below CSS file that you get from EasySlider1.7 addon :
- screen.css

Open the file and replace all the code in the screen.css with the below code :

/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */

#containersl{
margin:0 auto;
position:relative;
text-align:left;
width:520px;

margin-bottom:2em;
}
#contentsl{
position:relative;
}

/* Easy Slider */

#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
target:_blank;
}
#slider2{margin-top:0em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:520px;
height:221px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(templates/default-2cols/images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(templates/default-2cols/images/btn_next.gif) no-repeat 0 0;
}

/* numeric controls */

ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */

Save the file and then please upload the file to the folder "templates/default-2cols/css/" (if you are using 2 columns template) or "templates/default-3cols/css/" (if you are using 3 columns template).

4. Open your VP-ASP template header file (shoppage_header.htm). This file usually located in the folder "templates/default-2cols/" (if you are using 2 columns template) or "templates/default-3cols/" (if you are using 3 columns template) using text editor such as notepad or wordpad.

5. Locate the code below :

</head>

6a. Please check your file shoppage_header.htm, if this file does not have this line :

then only can insert this code to the file before </head> :

6b. If you have this code in the file shoppage_header.htm :

Then the new code below :

must be inserted AFTER the below code :

However, if you cannot locate the code :

then in your file shoppage_header.htm, you must insert the code below after the code

7. There are two options for you whether you want to display the sliding banners in the center content of your homepage or to be displayed in the left/right side bar column of your site.
Simply follow step 7A or 7B that suit your needs.

7A. If you want to display the sliding banners in the center content of your homepage, then you can follow these steps below:

- Insert these code below in the very beginning of the file tmp_default.htm (located in the folder "templates/default-2cols/" (if you are using 2 columns template) or "templates/default-3cols/" (if you are using 3 columns template) ) :

Please note : The above example is if you are using 2 columns layout, if you are using 3 columns layout or any other template, simply change the value "default-2cols" to "default-3cols" or "template_xxxxxx" .

- Save and upload the file to your site.
- You are done.

7B. If you want to display the sliding banner in the left/right side bar column of your site, then you can follow these steps below:

- Login to your VPASP control panel and go to : Website » Layout Manager

- In the left or right column section, try to create a new box Column Free Text.

- Enter the fields value below:

Main Selection : Column Free Text (should be selected by default)
Enable : Yes
Label Name : leave empty
Seq No. : 10 (just example)
Display with Box : No
Display Text :

- Click Save Changes

- Open file screen.css located in the "templates\default-2cols\css" or "templates\default-3cols\css" folder and locate the below code (around line 36):

width:540px;
height:270px;

- Please replace to :

width:190px;
height:auto;

- Save and upload the file to your site.

- You are done.

Here is the preview if you have completed the 7A or 7B in the above steps :

For sliding banners in the center content of homepage: