![Very Happy :D](./images/smilies/icon_e_biggrin.gif)
![Image](http://img171.imageshack.us/img171/3183/demook.jpg)
Well get started.
1° Download this files of one server
Code: Select all
http://www.megaupload.com/?d=XC4OKG7R
https://rapidshare.com/files/3671938898/jslider4ISC.zip
3° Upload the files to site/javascript/slider/ (slider and images are new folders you need to create)
- jquery.min.js
jquery.slider.min.js
jquery.slider.css
jquery.slider.ie6.css
images/jquery-slider-theme.png
5° Put the next code under
Code: Select all
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/iselector.js?%%GLOBAL_JSCacheToken%%"></script>
Code: Select all
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/slider/jquery.min.js?%%GLOBAL_JSCacheToken%%"></script>
<script type="text/javascript" src="%%GLOBAL_ShopPath%%/javascript/slider/jquery.slider.min.js?%%GLOBAL_JSCacheToken%%"></script>
<link rel="stylesheet" type="text/css" href="%%GLOBAL_ShopPath%%/javascript/slider/jquery.slider.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="%%GLOBAL_ShopPath%%/javascript/slider/jquery.slider.ie6.css" />
Code: Select all
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".slider").slideshow({
width : 900,
height : 325,
transition : 'square'
});
});
</script>
Change the size of your banner images. I have 600 of width on my index page.
Once changed save and upload the HTMLHead.html filewidth : 600,
height : 325,
transition : 'square'
7° Go to your Admin Panel >> Marketing >> Banner Manager and make new banner
8° Write the name of the banner and with image manager upload your banner images, you can find some on the folder demo images what you download before.
9° Once uploaded your images click on the icon HTML and write this code:
Code: Select all
<div class="slider">
<div><img src="http://www.site.com/product_images/uploaded_images/banner1.jpg" alt="" /></div>
<div class="jquery-slider-trans-exploderandom"><img src="http://www.site.com/product_images/uploaded_images/banner2.jpg" alt="" /></div>
<div class="jquery-slider-squareRandom"><img src="http://www.site.com/product_images/uploaded_images/banner3.jpg" alt="" /></div>
</div>
Code: Select all
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".slider").slideshow({
width : 900,
height : 325,
transition : 'square'
});
});
</script>
10° Save the banner and watch working ittransition : ['barLeft', 'barRight']
transition : 'squareRandom'
transition : 'explode'
transition : 'square'
transition : ['slideLeft', 'slideRight', 'slideTop', 'slideBottom']
![Very Happy :D](./images/smilies/icon_e_biggrin.gif)
Here is another configurations:
<div class="slider">
<div>
<div class="caption">
<h4>First Slide</h4>
</div>
<img src="slide_6.jpg" alt=""/>
</div>
<div>
<div class="caption">
<h4>Second Slide</h4>
</div>
<img src="assets/slide_9.jpg" alt=""/>
</div>
Code: Select all
jQuery(document).ready(function($) {
$(".slider").slideshow({
width : 900,
height : 325,
pauseOnHover : false,
transition : ['slideLeft', 'slideRight', 'slideTop', 'slideBottom']
});
$(".caption").fadeIn(500);
// playing with events:
$(".slider").bind("sliderChange", function(event, curSlide) {
$(curSlide).children(".caption").hide();
});
$(".slider").bind("sliderTransitionFinishes", function(event, curSlide) {
$(curSlide).children(".caption").fadeIn(500);
});
});
WITH CSS<div class="slider">
<div>
<div style="background:url(html_1.jpg) no-repeat left top; width:900px; height:360px;">
<div style="padding:112px 0 30px 0; text-align:center;">
<h1 class="cs3">HTML CONTENT</h1>
<h3 class="cs3">Highlight me...I'm CSS3 font-face text.</h3>
</div>
</div>
</div>
<div>
<div class="slider-movie-example">
<h4>Pirates of the Caribbean: On Stranger Tides</h4>
<br/>
<p>Captain Jack Sparrow (Depp) crosses paths with a woman from his past (Cruz)... </p>
<p><a href="http://www.imdb.com/title/tt1298650/" class="button">View</a></p>
</div>
<img src="html_4.jpg" alt=""/>
</div>
<div>
<a href="html_3.jpg" class="lightbox"><img src="html_2.jpg" alt="" /></a>
</div>
</div>
Code: Select all
h1.cs3,
h3.cs3
{
margin:0 0 8px;
text-decoration:none;
border:0;
padding:0;
font-family: 'Bangers', arial, serif;
color:#FFFFFF;
text-shadow:2px 2px 1px #222222;
}
h1.cs3
{
font-size:80px;
line-height:60px;
}
h3.cs3
{
font-size:27px;
}
.slider-movie-example
{
width:300px;
height:100%;
background:rgba(0,0,0,0.8);
color:#FFFFFF;
padding:10px;
position:absolute;
top:0;
left:20px;
}
Code: Select all
jQuery(document).ready(function($) {
$(".slider").slideshow({
width : 900,
height : 360,
transition : 'squareRandom'
});
$('.lightbox').lightbox();
});