PrestaShop Themes

PrestaShop slideshow banner images (with jQuery Javascript)

May 2, 2010 PrestaShop Customization, PrestaShop Tips

This post is for guiding our PREMIUM theme users to convert the homepage’s header banner to jQuery Javascript powered image slideshow/scroller/rotator — with fade-in effect, clickable banner images and “Next/Previous” buttons. Therefore the code examples and instructions will be based on our premium theme (Pres 2 to Pres 7 — Pres 1 is not included as it does not come with a header banner). If you use themes from elsewhere, you can try to modify the code examples and your own theme files to add the slideshow.

CLICK TO VIEW DEMO

IMPORTANT: Two files need to edited. So backup these files before you start(YOUR_THEME_NAME is the folder name of the theme you are using):
\themes\YOUR_THEME_NAME\header.tpl
\themes\YOUR_THEME_NAME\css\global.css

STEP 1

Open header.tpl from your theme’s folder with any text editor — Paste the code shown below on a new line, right below/after the line with the <body… > tag (about line 40).
IMPORTANT: Change YOUR_THEME_NAME to your theme’s folder name.

{if $page_name == 'index'}
<script type="text/javascript" src="{$content_dir}themes/YOUR_THEME_NAME/js/slide/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="{$content_dir}themes/YOUR_THEME_NAME/js/slide/simslide_scripts.js"></script>
{/if}

STEP 2

Still with header.tpl — Paste this code to replace the “banner” or “banner1” DIV block

NOTE:

1. IMPORTANT: Change the image filename and YOUR_THEME_NAME below to match you own images.
2. IMPORTANT: Change the width (980) and height (300) below to the dimension of your images.
3. You can copy the line of the slide2 below to add more images to your slideshow.
4. You can also remove the links for the images (or edit the links so that the images are clickable).

<!--- Display jQuery slideshow on home page	start -->
	<div id="slideshow">
		<ul id="nav">
			<li id="prev"><a href="#">Previous</a></li>
			<li id="next"><a href="#">Next</a></li>
		</ul>
 
		<ul id="slides">
			<li><a href="http://www.google.com"><img width="980" height="300" src="{$base_dir}themes/YOUR_THEME_NAME/img/slide1.jpg" alt="" /></a></li>
			<li><a href="http://www.google.com"><img width="980" height="300" src="{$base_dir}themes/YOUR_THEME_NAME/img/slide2.jpg" alt="" /></a></li>
 
		</ul>
	</div> <!-- slideshow -->  
<!--- Display jQuery slideshow on home page	end -->

STEP 3

Open global.css from your theme’s folder — Paste this block of code at the bottom.

IMPORTANT: Change the width (980px) and height (300px) below to the dimension of your slideshow images (decide on a dimension that fits your theme layout and make sure all your images have the same dimension)
IMPORTANT: After you have completed all steps of this guide, you may need to change the “padding” and “margin-bottom” of the “div#slideshow” block, to position your slideshow area properly.

/* **************** jQuery slideshow on home page *********************************************************** */
 
div#slideshow {
	width: 980px; height: 300px; padding: 0 0 0 0; margin-bottom: 7px; overflow: hidden;
	position: relative; z-index: 5;
}
 
	div#slideshow img {
	border: none;
	}
 
	div#slideshow ul#nav {
		display: none;
		list-style: none;
		position: absolute; bottom: 15px; right: 0px; z-index: 15;
		width: 125px;
	}
		div#slideshow ul#nav li#prev {
			float: left; margin: 0 0 0 20px;
			display: inline;
		}
		div#slideshow ul#nav li#next {
			float: right; margin: 0 20px 0 0;
			display: inline;
		}
		div#slideshow ul#nav li a {
			display: block; width: 31px; height: 31px; text-indent: -9999px;
		}
			div#slideshow ul#nav li#prev a {
				background: url(../img/prev.png);
			}
			div#slideshow ul#nav li#next a {
				background: url(../img/next.png);
			}
 
	div#slideshow ul#slides {
		list-style: none;
	}
		div#slideshow ul#slides li {
			margin: 0 0 20px 0;
		}
a {outline: none; }
 
/* **************** jQuery slideshow on home page *********************************************************** */

STEP 4

The steps above are all you need to do to edit your files. Besides that, you also need to upload some new files:

1. Upload the jQuery script and navigation arrow images files:
   \themes\YOUR_THEME_NAME\js\slide\jquery.cycle.all.min.js
   \themes\YOUR_THEME_NAME\js\slide\simslide_scripts.js
   \themes\YOUR_THEME_NAME\img\prev.png
   \themes\YOUR_THEME_NAME\img\next.png

   You need to create the “slide” folder as shown above to store the jQuery/Javascript files.
   >>> Click to download the files here <<<

2. Upload your own banner images to this folder:
   \themes\YOUR_THEME_NAME\img\
   Remember, the image filenames and dimensions are what you need to enter to the header.tpl file, as outlined in STEP 2 above. All our premium themes come with a readme file, where you can find the recommended banner dimension/size — please follow.

OPTIONAL – Changing slide/rotate effects

The script will give you the ‘fade in’ effect for the banner images by default. But you can change to other effects. Open this file:
\themes\YOUR_THEME_NAME\js\slide\simslide_scripts.js

At line 5, you can see fx: ‘fade’ — change fade to shuffle or zoom or turnDown or curtainX.

You can see the demos at Cycle Plugin — it is the source of the jQuery Cycle Plugin, which we are using for the different types of transition effects.

Compatibility:
PrestaShop 1.2.4, 1.2.5, 1.3

Acknowledgements:
Based on the jQuery slideshow by Line25.