Page 1 of 3

[MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 12:00 am
by Chrissy Poo
Easy add a Slide Show to your OpenCart Store.

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>
add below:

Code: Select all

<script type="text/javascript" src="catalog/view/javascript/fadeslideshow.js"></script>
Find:

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>
add below:

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>
Edit: catalog/view/theme/default/template/common/home.tpl

Find:

Code: Select all

<?php if ($welcome) { ?>
add below:

Code: Select all

<div id="slideshow"></div>
Edit: catalog/view/theme/default/stylesheet/stylesheet.css

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: fadeslideshow.js

Download this File:
http://www.stylemyapple.co.uk/download/ ... deshow.zip

Extract and Upload to:

Code: Select all

catalog/view/javascript/
Create Slides for your Slide Show

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/
Edit the following lines in the header.tpl file:

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", ""]
You need to change the link/name of the image and the url you want it to point to.

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.

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 12:49 am
by JAY6390
Nice contribution chrissy poo :)
My module is very similar, except that it doesn't involve having to create the slides manually or edit any source files, but for a free contribution I'm sure it's going to be very popular :)

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 12:59 am
by Chrissy Poo
JAY6390 wrote:Nice contribution chrissy poo :)
My module is very similar, except that it doesn't involve having to create the slides manually or edit any source files, but for a free contribution I'm sure it's going to be very popular :)
Thanks :)

It took hours to get it working correctly with Opencart (conflicts in .js file) so after spending that amount of time getting it working I thought it was worth sharing :)

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 2:36 am
by OSWorX
JAY6390 wrote:Nice contribution chrissy poo :)
My module is very similar, except that it doesn't involve having to create the slides manually or edit any source files, but for a free contribution I'm sure it's going to be very popular :)
Unfortunately your demo sites do not work!

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 2:51 am
by lotus
Worked just fine for me. Just tried again few seconds ago..!

Thanks Chris, good stuff.
OSWorX wrote:
JAY6390 wrote:Nice contribution chrissy poo :)
My module is very similar, except that it doesn't involve having to create the slides manually or edit any source files, but for a free contribution I'm sure it's going to be very popular :)
Unfortunately your demo sites do not work!

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 3:01 am
by Chrissy Poo
OSWorX wrote:
JAY6390 wrote:Nice contribution chrissy poo :)
My module is very similar, except that it doesn't involve having to create the slides manually or edit any source files, but for a free contribution I'm sure it's going to be very popular :)
Unfortunately your demo sites do not work!
Working fine here too :)

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 6:42 am
by Maansy
beautiful.
how to change the white bg to something like this: #f8f8f8 ?
thanks alot :)

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 9:02 am
by lotus
Also Chris like th delivery side box on left and the social network box on right.

Is there a mod for this already that could be shared?

thanks

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Tue Jul 20, 2010 6:56 pm
by Chrissy Poo
Maansy wrote:beautiful.
how to change the white bg to something like this: #f8f8f8 ?
thanks alot :)
Edit the .js file and search for "white" and replace with your colour code above :)

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Wed Jul 21, 2010 8:39 pm
by Maansy
Chrissy,
i just noticed today that the page has errors.
i can see in the IE8 on the low left corner the messege: Done, but with errors on the page. also the slider stopped working. on the other hand in firefox i dont have that problem.

any idea why in IE8 gives my this error?
knowing that i installed 1 module (Theme Switcher) after the install of the image slider add-on.

any help appreciated

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Wed Jul 21, 2010 9:05 pm
by Chrissy Poo
Not sure what the problem is, I have tested in the following web browsers:

- IE6, IE7 and IE8
- Firefox 3.6.7
- Chrome

All with no problems.

Either something was not installed correctly or you have another JavaScript which conflicts.

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Wed Jul 21, 2010 11:15 pm
by Maansy
do you think the drop down menu i have is conflicting with the slide show?
if you view the source page here (theme: Defualt3 & Defualt4)
and look for this line:
<style media="all" type="text/css">@import "catalog/view/theme/default4/stylesheet/menu/menu_style.css";</style>
this is to call the .css for the menu.
do you think its better if i put it between the <head> </head> ?
if yes, then how to write it to fit between the head?

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Wed Jul 21, 2010 11:29 pm
by Chrissy Poo
Is there anyway to disable the dropdown? is it a module that can be switched off?

That way you could test to see if its a compatibility issue.

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Wed Jul 21, 2010 11:35 pm
by Maansy
i took that line that calls the menu css out to test, but still there is error on page hmmmm
i am thinking its conflicting with other js, but it was working fine. i just dont understand
i also noticed that the HOME tab is not selected when i am in HOME bage

here is my <head>...<//head>

Code: Select all

<head>
<title><?php echo $title; ?></title>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<base href="<?php echo $base; ?>" />
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo str_replace('&', '&', $link['href']); ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default4/stylesheet/ie6.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default4/stylesheet/menu/menu_style.css" />
<script type="text/javascript" src="catalog/view/javascript/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('img, #header .div3 a, #content .left, #content .right, .box .top');
</script>
<![endif]-->
<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/fadeslideshow.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/thickbox/thickbox-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/thickbox/thickbox.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>
<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>
<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>
<script type="text/javascript">
$(function(){
if($('#slideshow').length === 1)
var mygallery=new fadeSlideShow({
   wrapperid: "slideshow",
   dimensions: [550, 200],
   imagearray: [
      ["catalog/view/theme/default4/image/slide1.png", "http://lafloria.000a.biz/store/index.php?route=product/category&path=35", "_self", ""],
      ["catalog/view/theme/default4/image/slide2.png", "http://lafloria.000a.biz/store/index.php?route=product/category&path=40", "_self", ""],
      ["catalog/view/theme/default4/image/slide3.png", "http://lafloria.000a.biz/store/index.php?route=product/category&path=37_44", "_self", ""]
   ],
   displaymode: {type:'auto', pause:8000, cycles:0, wraparound:false},
   persist: true,
   fadeduration: 500,
   descreveal: "ondemand",
   togglerid: ""
})
});
</script>
</head>

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Thu Jul 22, 2010 12:48 am
by Maansy
ok, i took out this from home.tpl

Code: Select all

<div id="slideshow"></div>
 
and there was no error so i know it has to do with the slide show, but what is it thu hmmmm?

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Thu Jul 22, 2010 1:03 am
by Chrissy Poo
Maansy wrote:ok, i took out this from home.tpl

Code: Select all

<div id="slideshow"></div>
 
and there was no error so i know it has to do with the slide show, but what is it thu hmmmm?
Yes if that div is missing the javascript won't load, which is why your not getting an error.

The slideshow works perfect with the default theme so it must be something to do with the theme switcher.

I don't see the point in having more than one theme for a store anyway. You should have one great theme that represents your business/style.

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Thu Jul 22, 2010 1:28 am
by Maansy
ok i am uploading now a fresh defual theme and i will install ONLY the slide show in it and see.
i like this add-on, i want it to work :)

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Thu Jul 22, 2010 1:45 am
by Maansy
ok, i installed a freach defualt theme
Defualt5
and still error on page and the images are not showing ???

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Thu Jul 22, 2010 2:03 am
by Chrissy Poo
Maansy wrote:ok, i installed a freach defualt theme
Defualt5
and still error on page and the images are not showing ???
Which browser are you having trouble with? Just tried in IE8 on Win7 and I don't get any errors?

Re: [MOD] Sleek Slide Show for OpenCart Stores

Posted: Thu Jul 22, 2010 3:21 am
by Maansy
Chrissy Poo wrote:
Maansy wrote:ok, i installed a freach defualt theme
Defualt5
and still error on page and the images are not showing ???
Which browser are you having trouble with? Just tried in IE8 on Win7 and I don't get any errors?
i tried with my mac, ipad, 2nd laptop and blackberry and no error
so i restarted this laptop and error was gone :drunk:
thanks and its working just how it show, i only need to speed the slide speed thats all :)