Add Your Images to the Main Page Slider



A slider or slide show on your zen cart store’s main page is a wonderful way to showcase promotions, sales, featured products, etc. All of the free zen cart templates by Picaflor Azul and all of the templates you see in our store come with home page sliders. This step by step tutorial will show you how to add your own images to the slider, customize the size of the slider, and customize the number of images shown in the slider.

This tutorial features the All Business free zen cart template by Picaflor Azul. If you want to use this template for your web site, you can download it for free here.

1. Create your images for the slider. See the install.txt file for the particular template to find out the default slider dimensions. All of your slider images should be the same height and width. The default number of images for all of the sliders are 5. Your images should be named:

slide1.jpg

slide2.jpg

slide3.jpg

slide4.jpg

slide5.jpg

2. Upload your images to includes/templates/your-template-override-directory/images.

3. If you have used the same image names, dimensions, and number of images, you are finished! If you have used different image names, a different number of images, or images of different dimensions then you need to continue on with the tutorial.

Using Images With Different Names



A. Log into your zen cart admin and go to Tools -> Define Pages Editor.

B. Select define_main_page.php from the drop down menu. Make sure that the Text Editor drop down is set to “Plain Text”.

C. Find this code:

define(IMAGE1,'slide1.jpg');// default width 700px height 250px /
define(
IMAGE2,'slide2.jpg');
define(
IMAGE3,'slide3.jpg');
define(
IMAGE4,'slide4.jpg');
define(
IMAGE5,'slide5.jpg');

D. Replace slide1.jpg, etc. with the names of your images, making sure to keep the single quotes intact.

E. Click on the “save” button.

Go to your store url in the browser and refresh the page. You might have to clear your cache or even restart your browser to see the changes.

Using Images That Are Different Dimensions



In your favorite plain text editor, open the file includes/templates/your-template-override-directory/css/stylesheet.css. Find this code (in our free and for purchase templates it will be toward the bottom):

#slider li, #slider2 li{/*define width and height of list item (slide) entire slider area will adjust according to the parameters provided here*/width:740px;height:440px;overflow:hidden;}

Change the width and height to the width and height of your images and save the file. Depending on the new dimensions you might also have to change the position of the slider navigation buttons.

In your favorite plain text editor, open the file includes/templates/your-template-override-directory/css/stylesheet.css. Find this code (in our free and for purchase templates it will be toward the bottom):

#control_div{width:200px;height:18px;position:relative;
left:500px;top:-50px;}

Change the values for left and top until the slider navigation shows where you want it to show.

Add Links to the Images



Follow steps A. and B. from the “Using Images With Different Names” section of this tutorial.

Find this code:

define(URL1,'http://www.picaflor-azul.com');
define(
URL2,'http://www.picaflor-azul.com');
define(
URL3,'http://www.picaflor-azul.com');
define(
URL4,'http://www.picaflor-azul.com');
define(
URL5,'http://www.picaflor-azul.com');

Replace http://www.picaflor-azul.com with your link urls, making sure to keep the single quotes intact.

Using More or Less Than 5 Images in the Slider

Follow steps A. and B. from the “Using Images With Different Names” section of this tutorial.

Find this code:

<div id="slider">
<ul>
<li><a href="<?php echo URL1 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE1 ?>" alt="first slide image" /></a></li>
<li><a href="<?php echo URL2 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE2 ?>" alt="second slide image" /></a></li>
<li><a href="<?php echo URL3 ?>"><img src="<?php echo $template-<get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE3 ?>" alt="third slide image" /></a></li>
<li><a href="<?php echo URL4 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE4 ?>" alt="fourth slide image" /></a></li>
<li><a href="<?php echo URL5 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE5 ?>" alt="fifth slide image" /></a></li>
</ul>
</div>

To use less images, remove this block of code for each image:

<li><a href=”<?php echo URL5 ?>”><img src=”<?php echo $template->get_template_dir(”,DIR_WS_TEMPLATE, $current_page_base,’images’).’/’.IMAGE5 ?>” alt=”fifth slide image” /></a></li>

You are removing the <li> to </li>and all the code in between.



To use more images, add this code using the next number in sequence, for example image 6 would be:


<li><a href="<?php echo URL6 ?>"><img src="<?php echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.IMAGE6 ?>" alt="sixth slide image" /></a></li>

Then add these lines to define code above:

define(IMAGE6,'slide6.jpg');

and:

define(URL6,'http://www.picaflor-azul.com');

Follow this procedure for each image you want to add.

In your favorite plain text editor, open the file includes/templates/your-template-override-directory/css/stylesheet.css. Find this code (in our free and for purchase templates it will be toward the bottom):

#control_div{/code>width:200px;height:18px;position:relative;
left:500px;top:-50px;}

Adjust the width (make it larger) so that all of the slider navigation buttons show on one line.

If you need help customizing your zen cart web site, or would like a great custom design, please contact us for a quote.

equation

Article Global Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google StumbleUpon Eli Pets