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

Checked about 15 threads based on search "Ultimate Fade-in slideshow" - instructions here http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.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

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

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

http://www.zen-cart.com/forum/showthread.php?t=141055&highlight=dynamic+drive+images

NYsista872:

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

http://www.zen-cart.com/forum/showthread.php?t=141055&highlight=dynamic+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.

OK, here is the 'recipe' :smile: :

Script from Dynamic Drive http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Copy the content of http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.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! :cool:

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

Frank

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

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

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

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

frank18:

OK, here is the 'recipe' :smile: :

Script from Dynamic Drive http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Copy the content of http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.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! :cool:
>  
> 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

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](http://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

This is excellent that you have got this working, but the code you posted will certainly cause validation errors if not runtime errors. Zen Cart automatically sends all of these tags```

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title> <body> ```(and matching closing tags) and including them in file content will duplicate them, which is not good.

gjh42:

This is excellent that you have got this working, but the code you posted will certainly cause validation errors if not runtime errors. Zen Cart automatically sends all of these tags```

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title> <body> ```(and matching closing tags) > and including them in file content will duplicate them, which is not good.

So what you are saying is to remove the tags mentioned above? I was under the impression we had to use these tags when placing inside a ezpage, category...but not when we want in code in a header, specific page, etc. Please explain. If I have this wrong, I want to correct and clarify on the forum. I am not getting any errors, so how can I tell if this is working properly?

Thanks

You never need to include the tags in any code you are generating.
See frank18's post #5, and adjust the if test for the category:
/includes/templates/YOUR_TEMPLATE/common/html_header.php and insert this piece of code just before the </head> tag:```php

<?php if ($current_page_base == 'index' and $_GET['cPath'] == 'your_cat_cPath'){ ?>

[script code]

<?php } ?>

You would put the empty div he mentions into your category's description.

gjh42:

You never need to include the tags in any code you are generating.
See frank18's post #5, and adjust the if test for the category:
/includes/templates/YOUR_TEMPLATE/common/html_header.php and insert this piece of code just before the </head> tag:```php

<?php if ($current_page_base == 'index' and $_GET['cPath'] == 'your_cat_cPath'){ ?>

[script code]

<?php } ?>

Glenn---
You are absolutely correct! I removed the tags mentioned and all is good! What was I thinking? I knew those tags didn't belong there... sorry if I misguided anyone. :blush: I was just wanting this to work! All is good!

The script works...just remove the tags Glenn mentioned and you are in business. Thanks Glenn for pointing this out to me. I'm still kinda new to this php stuff but I'm coming around somewhat. :yes:

Thanks,
Pkat

I know that works - I did the same thing when I first put the v1.5 slideshow in a site a year ago, stripping the tags - but it still is not the "correct" method. Frank's description gets the script in the head where it belongs, and my tweak above will make it appear only for that category.

Handy hint Glenn! Much appreciated - thanks

The site in question is now live and up and running (see first link in my signature)

Frank

gjh42:

You never need to include the tags in any code you are generating.
See frank18's post #5, and adjust the if test for the category:
/includes/templates/YOUR_TEMPLATE/common/html_header.php and insert this piece of code just before the </head> tag:```php

<?php if ($current_page_base == 'index' and $_GET['cPath'] == 'your_cat_cPath'){ ?>

[script code]

<?php } ?>

Thanks Glenn. I am trying to do this the right way. I do have a question about the piece of code you posted. Do I need to alter this in anyway? Sorry...but I don't know much about coding and not sure about the ['cPath'] == 'your_cat_cPath'){
What needs to go in these areas...if anything?

Thanks! You have been a great help with this and I appreciate it.

Pkat

your_cat_cPath is a placeholder for the actual cPath to your category. The URL you mention has &cPath=1 which means that the cPath is '1'.```php

<?php if ($current_page_base == 'index' and $_GET['cPath'] == '1'){ ?>

Works great for me:clap:

Thank you all!

Folks, just noted that a new version (v2.4) has been released. Therefore please take my 'recipe' in post #5 with a pinch of salt. You may want to carefully compare the scripting of v2.4 to the stuff I posted earlier.

Frank