Features:
- Unlimited number of Slides.
- Each Slide can have it's own Link.
- Links can open in New Window or Existing.
- Choose Fade Duration.
- Choose Slide Duration.
Demo:
http://www.stylemyapple.co.uk
Requirements:
- Tested on the default theme.
- Tested with OpenCart 1.4.8 (but should work with other versions).
- Tested with all major web browsers.
Instructions:
Edit: catalog/view/theme/default/template/common/header.tpl
Find:
Code: Select all
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
Code: Select all
<script type="text/javascript" src="catalog/view/javascript/fadeslideshow.js"></script>
Code: Select all
<script type="text/javascript"><!--
function bookmark(url, title) {
if (window.sidebar) { // firefox
window.sidebar.addPanel(title, url, "");
} else if(window.opera && window.print) { // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
} else if(document.all) {// ie
window.external.AddFavorite(url, title);
}
}
//--></script>
Code: Select all
<script type="text/javascript">
$(function(){
if($('#slideshow').length === 1)
var mygallery=new fadeSlideShow({
wrapperid: "slideshow",
dimensions: [570, 200],
imagearray: [
["catalog/view/theme/default/image/slide1.png", "http://www.stylemyapple.co.uk", "_self", ""],
["catalog/view/theme/default/image/slide2.png", "http://www.stylemyapple.co.uk", "_self", ""],
["catalog/view/theme/default/image/slide3.png", "http://www.stylemyapple.co.uk", "_self", ""]
],
displaymode: {type:'auto', pause:8000, cycles:0, wraparound:false},
persist: true,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""
})
});
</script>
Find:
Code: Select all
<?php if ($welcome) { ?>
Code: Select all
<div id="slideshow"></div>
Add the following to it:
Code: Select all
#slideshow {
text-align:center;
margin-bottom:8px;
margin-left:auto;
margin-right:auto;
width:570px;
height:200px;
}
Download this File:
http://www.stylemyapple.co.uk/download/ ... deshow.zip
Extract and Upload to:
Code: Select all
catalog/view/javascript/
You now need to create some slides......
Create each slide at a side of 570px X 200px and use a format of either PNG or JPG.
Upload your slides to:
Code: Select all
catalog/view/theme/default/image/
Code: Select all
["catalog/view/theme/default/image/slide1.png", "http://www.stylemyapple.co.uk", "_self", ""],
["catalog/view/theme/default/image/slide2.png", "http://www.stylemyapple.co.uk", "_self", ""],
["catalog/view/theme/default/image/slide3.png", "http://www.stylemyapple.co.uk", "_self", ""]
Make sure the last slide in the list DOES NOT have a comma on the end.
That's it, let me know if I have missed anything or you need help.