Post by Chrissy Poo » Tue Jul 20, 2010 12:00 am

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.

10% Discount on all Shared and Reseller Hosting Packages at Vidahost.com

Discount Code: DISCOUNT10


Active Member

Posts

Joined
Mon Jun 29, 2009 8:48 am
Location - UK

Post by JAY6390 » Tue Jul 20, 2010 12:49 am

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

Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by Chrissy Poo » Tue Jul 20, 2010 12:59 am

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

10% Discount on all Shared and Reseller Hosting Packages at Vidahost.com

Discount Code: DISCOUNT10


Active Member

Posts

Joined
Mon Jun 29, 2009 8:48 am
Location - UK

Post by OSWorX » Tue Jul 20, 2010 2:36 am

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!

Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.


User avatar
Guru Member

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by lotus » Tue Jul 20, 2010 2:51 am

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!

New member

Posts

Joined
Fri Jul 16, 2010 9:50 pm

Post by Chrissy Poo » Tue Jul 20, 2010 3:01 am

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

10% Discount on all Shared and Reseller Hosting Packages at Vidahost.com

Discount Code: DISCOUNT10


Active Member

Posts

Joined
Mon Jun 29, 2009 8:48 am
Location - UK

Post by Maansy » Tue Jul 20, 2010 6:42 am

beautiful.
how to change the white bg to something like this: #f8f8f8 ?
thanks alot :)

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by lotus » Tue Jul 20, 2010 9:02 am

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

New member

Posts

Joined
Fri Jul 16, 2010 9:50 pm

Post by Chrissy Poo » Tue Jul 20, 2010 6:56 pm

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

10% Discount on all Shared and Reseller Hosting Packages at Vidahost.com

Discount Code: DISCOUNT10


Active Member

Posts

Joined
Mon Jun 29, 2009 8:48 am
Location - UK

Post by Maansy » Wed Jul 21, 2010 8:39 pm

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

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by Chrissy Poo » Wed Jul 21, 2010 9:05 pm

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.

10% Discount on all Shared and Reseller Hosting Packages at Vidahost.com

Discount Code: DISCOUNT10


Active Member

Posts

Joined
Mon Jun 29, 2009 8:48 am
Location - UK

Post by Maansy » Wed Jul 21, 2010 11:15 pm

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?

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by Chrissy Poo » Wed Jul 21, 2010 11:29 pm

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.

10% Discount on all Shared and Reseller Hosting Packages at Vidahost.com

Discount Code: DISCOUNT10


Active Member

Posts

Joined
Mon Jun 29, 2009 8:48 am
Location - UK

Post by Maansy » Wed Jul 21, 2010 11:35 pm

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>

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by Maansy » Thu Jul 22, 2010 12:48 am

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?

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by Chrissy Poo » Thu Jul 22, 2010 1:03 am

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.

10% Discount on all Shared and Reseller Hosting Packages at Vidahost.com

Discount Code: DISCOUNT10


Active Member

Posts

Joined
Mon Jun 29, 2009 8:48 am
Location - UK

Post by Maansy » Thu Jul 22, 2010 1:28 am

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

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by Maansy » Thu Jul 22, 2010 1:45 am

ok, i installed a freach defualt theme
Defualt5
and still error on page and the images are not showing ???

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am


Post by Chrissy Poo » Thu Jul 22, 2010 2:03 am

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?

10% Discount on all Shared and Reseller Hosting Packages at Vidahost.com

Discount Code: DISCOUNT10


Active Member

Posts

Joined
Mon Jun 29, 2009 8:48 am
Location - UK

Post by Maansy » Thu Jul 22, 2010 3:21 am

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

ALL Templates :: 1.5.1+ Templates :: 50%-75% PRICE DROP ONLY at OpencartStuff.com


User avatar
Active Member

Posts

Joined
Thu Jun 24, 2010 6:04 am

Who is online

Users browsing this forum: No registered users and 3 guests