Study PHP Skills, Share PHP Code

1. Copy jquery.flexslider.js, jquery.flexslider-min.js, and slide_toggle.js to the folder skin/light_responsive/js/;

2. Copy flexslider.css to the folder skin/light_responsive/css/;

3. Edit altskin.css which is at skin/light_responsive/css/, add the following css code at the end of the file:
.flexslider {

border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 transparent;
-moz-box-shadow: 0 0 transparent;
-o-box-shadow: 0 0 transparent;
box-shadow: 0 0 transparent;
margin: 0 0 0px;
}

.flexslider .slides > li {
padding: 0px;
}

4. Imbed new .js, and .css code:
a: Copy service_js.tpl to skin/light_responsive/customer/, add the following code to it:
{load_defer file=”js/slide_toggle.js” type=”js”}
{load_defer file=”js/jquery.flexslider-min.js” type=”js”}

b: Copy service_css.tpl to skin/light_responsive/customer/, add the following code to it:

{load_defer file=”css/flexslider.css” type=”css”}

5. Edit home.tpl which is at skin/light_responsive/customer/, find
{include file=”customer/tabs.tpl”}
under it add the following code:

{if $main eq “catalog” and $current_category.category eq “”}
<div id=”main_slider” class=”flexslider”>
<ul class=”slides”>
<li><a href=”http://www.loupesusa.com/”> <img src=”{$AltImagesDir}/slides/introduction.jpg” alt=”” /></a></li>
<li><a href=”http://www.loupesusa.com/”> <img src=”{$AltImagesDir}/slides/eyeglasses.jpg” alt=”” /></a></li>
</ul>
</div>
{/if}