can't get Ultimate Fade-in slideshow v2.1 to work on main page

[frank18]

Checked about 15 threads based on search "Ultimate Fade-in slideshow" - instructions here http://www.dynamicdrive.com/dynamici...nslideshow.htm
and can't get this show on the road. Some of the threads are dealing with an older version (1.5) - so not much good for me.

Environment:

ZC 1.3.8a
fresh install, local development
template cold steel
add-ons: Easy Populate, Return Authorization
Wampserver 2.0
PHP Version: 5.2.9 (Zend: 2.2.0)
Database: MySQL 5.0.51a-community-nt

Created includes/templates/cold_steel/jscript/jscript_fadeslideshow.js with this code:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [600, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["includes/modules/pages/index/images/image11.jpg", "http://192.168.2.1/chilloutfashions.com/index.php?main_page=index&cPath=11", "", "Beach Bags"],
		["includes/modules/pages/index/images/image3.jpg", "http://192.168.2.1/chilloutfashions.com/index.php?main_page=index&cPath=3", "", "Beach Wear"],
		["includes/modules/pages/index/images/image10.jpg", "http://192.168.2.1/chilloutfashions.com/index.php?main_page=index&cPath=10", "", "Cover Ups"],
		["includes/modules/pages/index/images/image9.jpg", "http://192.168.2.1/chilloutfashions.com/index.php?main_page=index&cPath=9", "", "Kaftans"],
		["includes/modules/pages/index/images/image7.jpg", "http://192.168.2.1/chilloutfashions.com/index.php?main_page=index&cPath=7", "", "Ladies Apparel"],
		["includes/modules/pages/index/images/image1.jpg", "http://192.168.2.1/chilloutfashions.com/index.php?main_page=index&cPath=1", "", "Sarongs and Wraps"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

Then in define_main_page.php added this code (according to instructions at Dynamic Drive):

<div id="fadeshow1"></div>

The source of my index page shows this (as it should):

.....(rest of code omitted)......
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/cold_steel/css/print_stylesheet.css" />
<script type="text/javascript" src="includes/templates/cold_steel/jscript/jscript_fadeslideshow.js"></script>
</head>

It all looks fine and good - BUT: the slide show does not appear on the main page. Worst of all is that I am not getting any error messages at all which would be helpful in pin-pointing what is or (more the point) not happening.

can anyone shed a light on this?

Thanks / Frank

[NYsista872]

I'm having the same problem, waiting for a response also ....

[NYsista872]

Ok this thread helped me, scroll down she explains the steps from scratch ...

http://www.zen-cart.com/forum/showth...c+drive+images

[frank18]

Ok this thread helped me, scroll down she explains the steps from scratch ...

http://www.zen-cart.com/forum/showth...c+drive+images

Thanks NYsista872 - looked at that thread yesterday. It's not the problem in my case. Got it working with the exception that I am getting Error: DIV with ID "fadeshow1" not found on page but know exactly why this is happening. Need to make the script load only on home page - should be up and running in the next few mins.

I will post the full procedure sometime later today - so stay tuned.

[frank18]

OK, here is the 'recipe' :

Script from Dynamic Drive http://www.dynamicdrive.com/dynamici...nslideshow.htm

Copy the content of http://www.dynamicdrive.com/dynamici...deslideshow.js
and drop it into folder includes/modules/pages/index/

(relative path should be includes/modules/pages/index/fadeslideshow.js)

There is nothing to edit in this script.

Then open includes/templates/YOUR_TEMPLATE/common/html_header.php and insert this piece of code just before the </head> tag:

(Note: this is configured to show only on home page)

<?php
if($this_is_home_page){
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/modules/pages/index/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [480, 360], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["includes/modules/pages/index/images/image11.jpg", "index.php?main_page=index&cPath=11", "", "Beach Bags"],
		["includes/modules/pages/index/images/image3.jpg", "index.php?main_page=index&cPath=3", "", "Beach Wear"],
		["includes/modules/pages/index/images/image10.jpg", "index.php?main_page=index&cPath=10", "", "Cover Ups"],
		["includes/modules/pages/index/images/image9.jpg", "index.php?main_page=index&cPath=9", "", "Kaftans"],
		["includes/modules/pages/index/images/image7.jpg", "index.php?main_page=index&cPath=7", "", "Ladies Apparel"],
		["includes/modules/pages/index/images/image1.jpg", "index.php?main_page=index&cPath=1", "", "Sarongs and Wraps"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>
<?php
}
?>

Edit dimensions, displaymode, fadeduration to suit your needs. Place your images into folder includes/modules/pages/index/images/ and name them accordingly.

Enter your links as relative paths. In the above example clicking on image11.jpg takes you to category 11 (in my case 'Beach Bags').

Now in includes/languages/english/html_includes/YOUR_TEMPLATE/define_main_page.php (accessed in admin via Define Pages Editor in admin) place this empty div somewhere in the page;

<div id="fadeshow1"></div>

That's it - save and enjoy!

If I have missed something please post it here to let me know (no PM please...)

Frank

[andreitero]

Thanks for sharing this, i just add it to my lemy store. Cheers!

[rxalex]

Error: DIV with ID "fadeshow1" not found on page.

This is the error I get on my page. ** URL REMOVED **

[rxalex]

Ok got it to work... Is there a way to fix it so you dont see black borders on images that are different sizes?

[perkiekat]

OK, here is the 'recipe' :

Script from Dynamic Drive http://www.dynamicdrive.com/dynamici...nslideshow.htm

Copy the content of http://www.dynamicdrive.com/dynamici...deslideshow.js
and drop it into folder includes/modules/pages/index/

(relative path should be includes/modules/pages/index/fadeslideshow.js)

There is nothing to edit in this script.

Then open includes/templates/YOUR_TEMPLATE/common/html_header.php and insert this piece of code just before the </head> tag:

(Note: this is configured to show only on home page)

<?php
if($this_is_home_page){
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/modules/pages/index/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
 
<script type="text/javascript">
var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [480, 360], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["includes/modules/pages/index/images/image11.jpg", "index.php?main_page=index&cPath=11", "", "Beach Bags"],
        ["includes/modules/pages/index/images/image3.jpg", "index.php?main_page=index&cPath=3", "", "Beach Wear"],
        ["includes/modules/pages/index/images/image10.jpg", "index.php?main_page=index&cPath=10", "", "Cover Ups"],
        ["includes/modules/pages/index/images/image9.jpg", "index.php?main_page=index&cPath=9", "", "Kaftans"],
        ["includes/modules/pages/index/images/image7.jpg", "index.php?main_page=index&cPath=7", "", "Ladies Apparel"],
        ["includes/modules/pages/index/images/image1.jpg", "index.php?main_page=index&cPath=1", "", "Sarongs and Wraps"] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 1000, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})
</script>
<?php
}
?>

Edit dimensions, displaymode, fadeduration to suit your needs. Place your images into folder includes/modules/pages/index/images/ and name them accordingly.

Enter your links as relative paths. In the above example clicking on image11.jpg takes you to category 11 (in my case 'Beach Bags').

Now in includes/languages/english/html_includes/YOUR_TEMPLATE/define_main_page.php (accessed in admin via Define Pages Editor in admin) place this empty div somewhere in the page;

<div id="fadeshow1"></div>

That's it - save and enjoy!

If I have missed something please post it here to let me know (no PM please...)

Frank

How would I get this to work on top of a certain category instead of the home page? I know I can add html to the main category, but how would I use this script to do it?

Thanks

[perkiekat]

Whew...finally figured this one out and here is what I done to get it right.

As stated above, copy the fadeslideshow.js and save into your custom template jscript folder.

Take this code below and paste into the category html area (make sure to use the text editing instead of html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Place Whatever Name You Want Here</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/includes/templates/premium3a/jscript/fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [800, 291], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://YOURDOMAINNAME.com/images/YOURIMAGE.jpg", "", "", ""],
["http://YOURDOMAINNAME.com/images/YOURIMAGE.jpg", "", "", ""],
["http://YOURDOMAINNAME.com/images/YOURIMAGE.jpg", "", "", ""],
["http://YOURDOMAINNAME.com/images/YOURIMAGE.jpg", "", "", ""],
["http://YOURDOMAINNAME.com/images/YOURIMAGE.jpg", "", "", ""] //<--no trailing comma after very last image element!

],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 4000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>

</head>

<body>
<div class="centerdiv">
<style type="text/css">
.centerdiv{ /*IE method of centering a relative div*/
text-align: center;
}

.centerdiv>div{ /*Proper way to center a relative div*/
margin: 0 auto;
}
</style>
</div>
</body>
</html>

You can link each image to whatever page you want by adding to the code above:

["http://YOURDOMAINNAME.com/images/YOURIMAGE.jpg.jpg", "/index.php?main_page=index&cPath=1", "", "You can place text here to show below the image when moused-over"],

I hope this helps someone out there with the new Ver. of the fade slideshow from Dynamic Drive. I had searched and serached and the post above was the only one I came up with that was close to what I was looking for. Thanks to everyone who posted in this thread!

Pkat