Step 1 – Prepare images
The first step is to prepare the images you want to use in the slider. The images should all be the same dimensions (exactly) and optimised for the web (for faster loading). In this example I am using images sized to 660 x 240 pixels. (Note, I have adjusted the width of the default Zen Cart template – Classic – to accommodate this slider size.
By default, these images are named slider1.jpg, slider2.jpg, slider3.jpg and slider4.jpg. Save the images in the /includes/templates/CUSTOM/images/ where CUSTOM represents the name of your current template folder.
If you are keen to try the slider out first, you can download a copy of my demo images here.
If you wish to use the ribbon image (below), save this image in the images folder of your current template.
Step 2 – Load slider script
We are loading the slider script as a page-specific module as we want the script to load only on the home page.
I have prepared the Tanaka Slider script for Zen Cart and you can download a copy of the Tanaka Slider for Zen Cart file here.
Upload this file to the includes/modules/pages/index/ folder. Note, the Zen Cart override system does not currently extend to this folder.
Step 3 – Load jQuery JavaScript Library
The jQuery library is a single JavaScript file, containing all of its common functions – such as the sliding effect used here. It can be included within a web page by either linking to a local copy or to a hosted copy on the Internet (for example, Google hosts a copy of the file). In this tutorial we are loading a local copy to our Zen Cart server.
Download a copy of the jQuery library from http://code.jquery.com/jquery-1.5.min.js.
Rename the file to jscript_jquery-1.5.min.js – as Zen Cart is programmed to look for this jscript_ prefix.
Upload the renamed file to the includes/templates/CUSTOM/jscript/ folder, where CUSTOM represents the name of your current template folder. If the jscript folder does not exist already, you will need to create one.
Step 4 – Include slider CSS in Zen Cart stylesheet
Open the stylesheet.css file located in the /includes/templates/template_default/css/ directory.
At the end of the file, add the following styles: /*--Automatic Image Slider w/ CSS & jQuery from Soh Tanaka--*/
/*--Main Container--*/
.main_view {
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:240px; width: 660px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 10px; right: -3px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(../images/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
/*--End of Automatic Image Slider w/ CSS & jQuery from Soh Tanaka--*/
/*--Automatic Image Slider w/ CSS & jQuery from Soh Tanaka--*/
/*--Main Container--*/
.main_view {
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:240px; width: 660px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 10px; right: -3px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(../images/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
/*--End of Automatic Image Slider w/ CSS & jQuery from Soh Tanaka--*/
Save the modified stylesheet.css file to your override folder. This will be /includes/templates/CUSTOM/css/ where CUSTOM represents the name of your current template folder.
Step 5 – Update Zen Cart home page to include slider
Open the tpl_index_default.php file located in the /includes/templates/template_default/templates/ directory.
Find this section of code: <?php
/**
* get the Define Main Page Text
*/
?>
<div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>
<?php } ?>
<?php
/**
* get the Define Main Page Text
*/
?>
<div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>
<?php } ?>
and add this code directly under: view source
print
?<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="includes/templates/CUSTOM/images/slider1.jpg" alt="" /></a>
<a href="#"><img src="includes/templates/CUSTOM/images/slider2.jpg" alt="" /></a>
<a href="#"><img src="includes/templates/CUSTOM/images/slider3.jpg" alt="" /></a>
<a href="#"><img src="includes/templates/CUSTOM/images/slider4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
<script type="text/javascript" src="includes/templates/CUSTOM/jscript/jscript_jquery-1.5.min.js"></script>
<!-- eof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
view source
print
?<!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="includes/templates/CUSTOM/images/slider1.jpg" alt="" /></a>
<a href="#"><img src="includes/templates/CUSTOM/images/slider2.jpg" alt="" /></a>
<a href="#"><img src="includes/templates/CUSTOM/images/slider3.jpg" alt="" /></a>
<a href="#"><img src="includes/templates/CUSTOM/images/slider4.jpg" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
</div>
</div>
<script type="text/javascript" src="includes/templates/CUSTOM/jscript/jscript_jquery-1.5.min.js"></script>
<!-- eof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
*Remember to update the path to the images and the jQuery library to include your current template name. Save the modified tpl_index_default.php file to your override folder. This will be /includes/templates/CUSTOM/templates/ where CUSTOM represents the name of your current template folder.