How to add a slider to Prestashop 1.4.5 template - Tutorial

nestawr · July 18, 2012

Direction on how to add a slider to your store:

(Don't forget to back-up your site before making any changes)

Download Slider JS at http://slidesjs.com/
Open the Slider JS then open the /js/ folder.
Copy the file 'slides.min.jquery.js to your websites root /js/ folder.
Open the Slider JS folder and find the 'index.html' file and open it in note pad or text editor software.
In your websites root folder, find the editorial module and open the editorial.tpl in text editor ---> public.html > modules > editorial > editorial.tpl
Copy the following code from the index.html file to your editorial.tpl file.

<!-- Module Editorial -->
{literal}
<head>

<link rel="stylesheet" href="[color=#ff8c00]css/global-1.css[/color]">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
 $(function(){
  $('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
  });
 });
</script>
</head>
<body>
<div id="container">
 <div id="example">
  <img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
  <div id="slides">
<div class="slides_container">
 [color=#0000ff]<a href="http://yoursite.com/imagelink/" title="Image Name" target="_blank"><img src="http://www.yoursite.com/image-target" width="490" height="230" alt="Slide 1"></a>
  <a href="http://yoursite.com/imagelink/" title="Image Name" target="_blank"><img src="http://www.yoursite.com/image-target" width="490" height="230" alt="Slide 1"></a> <a href="http://yoursite.com/imagelink/" title="Image Name" target="_blank"><img src="http://www.yoursite.com/image-target" width="490" height="230" alt="Slide 1"></a>[/color]
</div>
  </div>
  <img src="img/example-frame.png" width="650" height="300" alt="Example Frame" id="frame">
 </div>
  </div>
{/literal}
<!-- /Module Editorial -->

It's very important you create a separate css file for this to link to. You will notice my editorial.tpl file is pulling from global-1.css which I created and placed in the root directory of my sites css file. It is NOT pulling the css from the themes/css/global.css file.

7. Copy the image files from the Slider JS folder to your website 'img' folder

8. Navigate to your root css file and add a folder called global-1.css

9. Open the Slider JS > CSS > global.css folder and copy the code in that file to your global-1.css file.

You will need to adjust the css file to the sizes of the slider you want on your site. The code I added looks like this:

/*
Resets defualt browser settings
reset.css
*/
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
a:active { outline:none; }
body { line-height:1; color:black; background:white; }
ol,ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; }
blockquote:before,blockquote:after,q:before,q:after { content:""; }
blockquote,q { quotes:"" ""; }
/*
#container {
width:480px;
padding:5px;
margin:0 auto;
position:relative;
z-index:0;
}
#example {
width:600px;
height:300px;
position:relative;
}
#ribbon {
position:absolute;
top:-3px;
left:-15px;
z-index:500;
}
#frame {
position:absolute;
z-index:0;
width:650px;
height:300px;
top:-3px;
left:-80px;
}
/*
Slideshow
*/
#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container {
width:490px;
overflow:hidden;
position:relative;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:490px;
height:230px;
display:block;
}
.slides_container a img {
display:block;
}
/*
Next/prev buttons
*/
#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}
#slides .next {
left:495px;
}
/*
Pagination
*/
.pagination {
margin:26px auto 0;
width:100px;
}
.pagination li {
float:left;
margin:0 0px;
list-style:none;
}
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(../img/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
}
.pagination li.current a {
background-position:0 -12px;
}
/*
Caption
*/
.caption {
z-index:500;
position:absolute;
bottom:-35px;
left:0;
height:30px;
padding:5px 20px 0 20px;
background:#000;
background:rgba(0,0,0,.5);
width:540px;
font-size:1.3em;
line-height:1.33;
color:#fff;
border-top:1px solid #000;
text-shadow:none;
}
/*
Footer
*/
#footer {
text-align:center;
width:900;
margin-top:3px;
padding:0px 0 9px;
border-top:0px solid #dfdfdf;
}
#footer p {
margin:0px 0;
font-size:2.0em;
}
/*
Anchors
*/
a:link,a:visited {
color:#599100;
text-decoration:none;
}
a:hover,a:active {
color:#599100;
text-decoration:underline;
}

Hope this works for you like it did for me.

Here is a screenshot of my results:

Edited July 18, 2012 by wcousin (see edit history)

Sign In

How to add a slider to Prestashop 1.4.5 template - Tutorial

Recommended Posts

nestawr

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Go back to prestashop.com