PrestaShop slideshow banner images (with jQuery Javascript)

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.

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

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 tag (about line 40).
IMPORTANT: Change YOUR_THEME_NAME to your theme’s folder name.

{if $page_name == 'index'}



{/if}

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

NOTE:

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

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 *********************************************************** */

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

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 <<<

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.

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.

View the original article here

If you're looking for simple and effective ways to influence you, your results and the world, you'll find powerful tools here from an official UK number 1 trainer and coach. Enjoy and be impeccable!

Check it out!