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

Printable View

Show 100 post(s) from this thread on one page

9 Apr 2010, 01:45 PM
frank18

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

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

Quote:

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

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

Quote:

.....(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
9 Apr 2010, 03:53 PM
NYsista872

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

I'm having the same problem, waiting for a response also ....
9 Apr 2010, 07:07 PM
NYsista872

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

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

http://www.zen-cart.com/forum/showth...c+drive+images
10 Apr 2010, 01:43 AM
frank18

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

Quote:

Originally Posted by NYsista872

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.
10 Apr 2010, 03:05 AM
frank18

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

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

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)

Code:

<?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
11 Apr 2010, 06:56 PM
andreitero

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

Thanks for sharing this, i just add it to my lemy store. Cheers!
26 Apr 2010, 06:29 PM
rxalex

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

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

This is the error I get on my page. ** URL REMOVED **
26 Apr 2010, 08:17 PM
rxalex

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

Ok got it to work... Is there a way to fix it so you dont see black borders on images that are different sizes?
27 Apr 2010, 09:27 PM
perkiekat

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

Quote:

Originally Posted by frank18

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

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)

Code:

<?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
29 Apr 2010, 11:34 AM
perkiekat

SOLVED!! - How to Place Fade Slideshow in Category (top of page)

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

Show 100 post(s) from this thread on one page