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

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/showth...c+drive+images

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.

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

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?

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

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

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

Code:

---

<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.

Quote:

---

Originally Posted by 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

Code:

---

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

---

<?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.

Quote:

---

Originally Posted by 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 Code:

---

<?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.

---

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

Quote:

---

Originally Posted by 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 Code:

---

<?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.

---

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

---

<?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

Yeap...

I have installed the new version on a html/php site (not zen cart) and it works great. You can view it on the home page. Replace a the flash we had there.

Give it a second to load...then when the slideshow begins, place your mouse over the image to view the text that'll pop up. The image will stay in place until the mouse is moved off of it. I really like this one.

http://newharmonyinn.com/index.php

I had this working perfectly on 1.3.8a, I just upgraded to 1.3.9d and no longer works... shows a blank area. I even tried to copy over same file from 1.3.8a but that totaly screwed up the entire page.

Quote:

---

Originally Posted by rxalex

I had this working perfectly on 1.3.8a, I just upgraded to 1.3.9d and no longer works... shows a blank area. I even tried to copy over same file from 1.3.8a but that totaly screwed up the entire page.

---

Check your includes/templates/YOUR_TEMPLATE/common/html_header.php 1.3.9d file for merging errors.

If that does not throw any light on the issue then I suggest to re-install / re-configure the mod from scratch as per my post #5 in this thread.

I have this mod running perfectly on my 1.3.9d install

Quote:

---

Originally Posted by 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?

---

You have to edit the file "fadeslideshow.js". On line 54, you'll find

Code:

---

.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})

---

change to ->

Code:

---

.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'white'})

---

You can change "white" to any color you want. This works for me.

For best practice, here is a link to the wiki description of how to add javascript to Zen Cart pages without editing PHP files:
http://www.zen-cart.com/wiki/index.p...s_-_Javascript

You can have sitewide or per-page js loading by putting jscript_fadeslideshow.js in the right folder. I haven't done the whole process yet, but I believe the second js file mentioned in post 5 will also need to be modified and added to a folder. Theoretically,you could just use it as /includes/modules/pages/index/jscript_myslideshow.js, but this would probably operate on all index pages, not just the homepage. Thus, you would use it as /includes/modules/pages/index/jscript_myslideshow.php with the opening if() test to limit it to the homepage. The first script call in that file is to jquery, which may already be operative in v1.3.9 (or maybe that won't be until v2.0 - clarification from someone who knows?), so you might not need to include that.

In all cases, you would also insert the blank div in a PHP template file as mentioned.

Quote:

---

Originally Posted by jppp

You have to edit the file "fadeslideshow.js". On line 54, you'll find

Code:

---

.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})

---

change to ->

Code:

---

.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'white'})

---

You can change "white" to any color you want. This works for me.

---

this is just what I needed too!!! :clap:
Thanks

I've been staring at that Dynamic Drive slide show for a while and this thread is great but, I was wondering if someone could explain how to use it in an existing banner, if that's even possible.

Thank you,
Stephen

[QUOTE=frank18;868072]
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
}
?>

---

Hi,

I really want this mod in my 1.3.9g recently installed Cart but i am so confused with the 'how' . I checked and i don't have the htlm_header.php. Instead i have tpl_header.php and i can't find the </head> or any <head> for that matter.

I am new and i read but my brain can't compute to whatever i'm reading :no: everyhting seems so confusing. I tried to understand what Frank18 "HOW TO" but i just can't.

First where do i actually insert the codes for tpl

Pls don't get mad and irritated with my lack of php or whatever codes. Still very new.

Thanks

:clap::clap::clap::clap:

finally for it:smartalec:

But when it gets to image 5 and 6, the slideshow went black :huh: . The rest of the images 1-4 turned out really well.

Why is that? Everything are in their right place and no spelling error.

Can anyone please advice me on this matter:(

:clap::clap::clap::clap:

finally got it:smartalec:

But when it gets to image 5 and 6, the slideshow went black :huh: . The rest of the images 1-4 turned out really well.

Why is that? Everything are in their right place and no spelling error.

Can anyone please advice me on this matter:(

Never mind..figured it out. JPG instead of jpg :blush:

Now can anyone help me on how to put it in the middle of my zen cart?

Wicked works great, thanks!

http://www.sparklegift.co.uk

[QUOTE=newbie79;947246]

Quote:

---

Originally Posted by frank18

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
}
?>

---

Hi,

I really want this mod in my 1.3.9g recently installed Cart but i am so confused with the 'how' . I checked and i don't have the htlm_header.php. Instead i have tpl_header.php and i can't find the </head> or any <head> for that matter.

I am new and i read but my brain can't compute to whatever i'm reading :no: everyhting seems so confusing. I tried to understand what Frank18 "HOW TO" but i just can't.

First where do i actually insert the codes for tpl

Pls don't get mad and irritated with my lack of php or whatever codes. Still very new.

Thanks

---

I am new as you. i also cannot find the htlm_header.php and do not know where to insert the code, please give some information, i really want this mod in 1.3.9

Instead of inserting the code into html_header.php manually, save it as a file named like jscript_myfadeshow.php, as described in the wiki link in post 25 above.
Zen Cart will automatically insert it into the <head> output when appropriate.

Quote:

---

Originally Posted by gjh42

Instead of inserting the code into html_header.php manually, save it as a file named like jscript_myfadeshow.php, as described in the wiki link in post 25 above.
Zen Cart will automatically insert it into the <head> output when appropriate.

---

thank you, Gleen.

but i am still confused with 'how to'.

i followed steps below but i cannot get the slide:

1.download the file and drop it into folder includes/modules/pages/index/fadeslideshow.js)
2.copy all of the code and save it as jscript_myfadeshow.php, upload it into includes/templates/MYTEMPLATE/common/jscript_myfadeshow.php
3.in admin-Define Pages Editor, input the code:<div id="fadeshow1"></div> into
define_main_page.php, and save it


did i miss any step, or anything is wrong during this process?

includes/modules/pages/index/fadeslideshow.js

Files to be autoloaded here should start with jscript_, so try

jscript_fadeslideshow.js

and if it is called by name from other javascript code, change that to reflect the new name.

thanks, Glenn,

still cannot get the slideshow, but I think it is related to js.
when I visited the wbsite, I found there is a yellow mark in the left corner of the status bar, the error message is
message: 'jQuery' undefined
could you help to take a look?

click

well, I have removed that error finally.

by the way, how can I edit my post? it seems no EDIT option there...

You can edit posts for 7 minutes. After that, they are frozen so that replies that follow still make sense. If you deleted a comment or question after someone answered, it would mislead later readers who might be looking for the same info.

This seems fairly straightforward, but i would like the slideshow to display on the main page, but not in the header. I have a bit larger images than what would comfortably fit in the header, and would like the visitors to see the slideshow when they come in. What should i do differently? can i insert the slideshow through the Define page editor once things are set up?

You would put the blank div in define_main_page.php.

This might be a silly question, but what do you mean by a BLANK div?

A div without content, like
<div id="fadeshow1"></div>

Ok i place the file fadeslideshow.js in the modules/pages/Index folder.
I put the <div id="fadeshow1"></div> in my define_main_page.php

Now, the instructions were for placing the slideshow coding in the header file (html_header.php ) but i want it in the main page NOT the header.

So where do i put it if not in the define_main_page.php?

Since it is still not showing, i know i made a mistake somewhere or forgot something along the way. :(

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

---

I followed these steps and it's not working for me. Is there anything else on the main_page besides the <div fade...>?

Quote:

---

Originally Posted by authentic01

I followed these steps and it's not working for me. Is there anything else on the main_page besides the <div fade...>?

---

I also took out the second part after images because I wasn't referencing any categories.

Do you mean instead of e.g.
["includes/modules/pages/index/images/image1.jpg", "index.php?main_page=index&cPath=1", "", "Sarongs and Wraps"]
you used
["includes/modules/pages/index/images/image1.jpg", "", "", "Sarongs and Wraps"]
?

This would just remove any linking, making a plain image. It is perfectly correct usage.

Could you correct the recipe for the newer version of the Dynamic fadein slideshow?

1- download the file fadeslideshow.js
2- save it into the folder includes/modules/pages/index
3- create the slideshow according to the instruction on the page here (with the images and with or without links)
4- save that slideshow as jscript_myfadeshow.php
5- place it in the folder includes/templates/MYTEMPLATE/common/
6- in admin-Define Pages Editor, input the code: <div id="fadeshow1"></div> into
define_main_page.php, and save it

At least, that is what i did, and it is not working so i assume the recipe is not correct.
Here is the page (the body of the page, NOT the header which has a gif image temporarily) where i expect the slideshow to appear.
test store

1- download the file fadeslideshow.js
2- save it into the folder includes/modules/pages/index as jscript_fadeslideshow.js
2a- may need to change internal file references from original filenames to jscript_ filenames

I am not expert with this, but this is my reading of it.

Which file to edit? the jscript_fadeslideshow.js ?

I opened that file, and that is giberish to me. If anyone can feel comfortable enough to give us the recipe for that type of edition, it might be useful.

Anyone got that working on the main page yet?

Quote:

---

Originally Posted by CaroleAs

Which file to edit? the jscript_fadeslideshow.js ?

I opened that file, and that is giberish to me. If anyone can feel comfortable enough to give us the recipe for that type of edition, it might be useful.

Anyone got that working on the main page yet?

---

The file to edit is

includes/templates/YOUR_TEMPLATE/common/html_header.php

Note: this still only applies to v2.1 as I have not played with any newer versions to date

- reason 1: time restrictions.

- reason 2: v2.1 works perfectly for me on this store

If version 2.1 works fine, where can i get that particular version? What you have in your store is just what i am looking for (although, you really have to edit the header file for placing the slideshow in the main page?)

Quote:

---

Originally Posted by CaroleAs

If version 2.1 works fine, where can i get that particular version? What you have in your store is just what i am looking for (although, you really have to edit the header file for placing the slideshow in the main page?)

---

The links in post #5 are now pointing to v2.4, so I don't know if there is an archive on their site which may lead you to v2.1

As for v2.1, yes - you need to edit the header file if you want to install the mod the way I did.

Thanks. I will contact them to see if they do have an archive to get the version 2.1. If i get anything, i will post here for others to benefit.

Ultimate Fade-in slideshow v2.4 works in exactly the same way as v2.1

The differences are

1. The jquery is now called from http://ajax.googleapis.com/ajax/libs.../jquery.min.js

instead of

http://ajax.googleapis.com/ajax/libs.../jquery.min.js

2. The fadeslideshow.js script has been updated and replaces the script from v2.1 - available here . There is NOTHING to edit in this script, just create the file, save it as fadeslideshow.js and drop it into the appropriate folder as described in post #5

v2.4 has the added optional "peekaboo" effect which can be set that the description bar below the images always displays briefly when a new slide is shown.

For new installation refer to post #5

If upgrading from v2.1 then replace the content of the old fadeslideshow.js with the new code. Then in your includes/templates/YOUR_TEMPLATE/common/html_header.php find 1.3.2/jquery.min.js and replace with 1.4.2/jquery.min.js

You are done ....

Whilst I originally installed the script in a ZC 1.3.8a install, it is now running smoothly on ZC 1.3.9h

Quote:

---

Originally Posted by frank18

1. The jquery is now called from http://ajax.googleapis.com/ajax/libs.../jquery.min.js

instead of

http://ajax.googleapis.com/ajax/libs.../jquery.min.js

---

Could you please clarify what that means (and how it fits in the recipe)? I will follow this recipe as soon as possible.:)

YESSSSS... it works!!!! i didn't do anything about that ajax thingie.

You can view my test store here: http://creationcassel.com/storetest/

Now, just a tiny question : How do i get my text to wrap on the side? can it be done?

Quote:

---

Originally Posted by CaroleAs

YESSSSS... it works!!!! i didn't do anything about that ajax thingie.

You can view my test store here: http://creationcassel.com/storetest/

---

Glad you got it working :cool:

Quote:

---

Now, just a tiny question : How do i get my text to wrap on the side? can it be done?

---

Putting your text and the empty <div> into a table should do it. You will need to search the forums for an answer on this question - it would be off-topic for this thread.

Oh you are right. I will post somewhere else. Thanks for your patience and your help.

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

---

Frankin' awesome!
Works great and thank you for the accurate and concise tutorial.

I do have one question.
What do I need to edit so this does not trigger the IE security warning?

And does anyone have a solution for this IE "Done but with Errors"?

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Tue, 30 Nov 2010 01:54:48 UTC


Message: 'imagearray[...].1' is null or not an object
Line: 38
Char: 3
Code: 0
URI: https://sterlingleafjewelry.com/incl...deslideshow.js



Thank you,
Stephen

Quote:

---

Originally Posted by jabbawest

And does anyone have a solution for this IE "Done but with Errors"?

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Tue, 30 Nov 2010 01:54:48 UTC


Message: 'imagearray[...].1' is null or not an object
Line: 38
Char: 3
Code: 0
URI: https://sterlingleafjewelry.com/incl...deslideshow.js



Thank you,
Stephen

---

Nevermind, my bad.
I found the issue for this. The dreaded trailing comma.
http://www.dynamicdrive.com/forums/s...ad.php?t=51850

And for the IE Security Warning, I changed
http://ajax.googleapis.com/ajax/libs.../jquery.min.js
to
https://ajax.googleapis.com/ajax/lib.../jquery.min.js
which seemed to have solved the problem.

Hi There,

I'm having a heckuva time getting this thing operating. I've installed, removed and reinstalled and read through all of the forum threads on this topic. I've followed Franks instructions with a few modification (the includes/modules/pages/index/fadeslideshow.js was renamed to jscript_fadeslideshow.js and I've looked in both this file and the code that's entered just before the html_header.php and I've made the changes in these two files. I've also made sure that the versions reconcile. My images are names slide1.jpg, slide2.jpg and the script is modified to accept theses. I've double checked the paths...I've read some discrepancies about putting the files in other folders, even perhaps the root but I'm not quite clear on where to go from here. :frusty::frusty::frusty:

I am using All Business Template which has a built in slider but I contacted the author and she states there are no conflicts. Any help would be super much appreciated, Lynn

http://visitmonolake.org/zencart/

I am currently using the fade slide show, but it shows up at the bottom of the page on my home page. www.bargainweddingsupply.com Any ideas???

sorry i meant to ask how i can move it back up to the top/middle of the home page. Thank you.

Quote:

---

Originally Posted by jwheels

I am currently using the fade slide show, but it shows up at the bottom of the page on my home page. www.bargainweddingsupply.com Any ideas???

---

Looks like a template from Template Monster (and those templates are monsters .. :yuck: - not recommended for ZC stores).

Your .main-width class is 950px. Deduct 230px for the left column which leaves you with 720px to play. Your images are 710px wide. Deduct that from your 720px to play, leaves you with 10px.

I am only guessing that one of your many style sheets dictates a padding for the center (main) or left column in excess of 10px. This may cause your slideshow to drop down.

Try to reduce the width of your images by about 15-20px or reduce your left column by that amount.

After taking a second glance at your site I noted that you are having the same issue when you call any of the pages in your header (About Us, Contact Us etc). In either case the content displays out of line.

This appears to be a TM template issue ....

sorry for such a dumb question... but what does TM temp mean?

and is there anyway to fix this issue site wide??? Thanks for all your help!

Quote:

---

Originally Posted by jwheels

sorry for such a dumb question... but what does TM temp mean?

---

TM = Template Monster

Quote:

---

Originally Posted by jwheels

and is there anyway to fix this issue site wide??? Thanks for all your help!

---

You will need to contact the vendor of your template for an answer - this question is not relevant to this thread.

Worked great athnks. However, is it possible to have two slideshows running side by side? Foir example one 350px wide and 200 high and another 200 px wide.
Any ideas how to code that?

Quote:

---

Originally Posted by beco1979

Worked great athnks. However, is it possible to have two slideshows running side by side? Foir example one 350px wide and 200 high and another 200 px wide.
Any ideas how to code that?

---

That sure is possible - see the third link in my signature.

The code needs to be inserted twice into the same file (see earlier posts in this thread) but will require different names like fadeshow1 and fadeshow2.

Then there need to be two blank <div>'s side by side within the same file.

One just needs to make sure that the height of the images is identical and the combined width does not exceed the width of the wrapper.

I am trying to use the Ultimate Fade In Slideshow. I got it to work great but I have 1 issue.

I have it set to display on my main page. It displays fine but the Fly Out navigation opens under the images.

I don't know enough about coding to figure out how to fix this.

Hopefully, someone can guide me to a solution.

My website is http://www.poolcuesexpress.com/testsite

On the live site http://poolcuesexpress.com the non slideshow image does not interfere with the Fly Out navigation.

Any help would be appreciated.

Dave

Quote:

---

Originally Posted by top hatt

I am trying to use the Ultimate Fade In Slideshow. I got it to work great but I have 1 issue.

I have it set to display on my main page. It displays fine but the Fly Out navigation opens under the images.

I don't know enough about coding to figure out how to fix this.

Hopefully, someone can guide me to a solution.

My website is http://www.poolcuesexpress.com/testsite

On the live site http://poolcuesexpress.com the non slideshow image does not interfere with the Fly Out navigation.

Any help would be appreciated.

Dave

---

Dave, I just checked the Dynamic Drive forum. Someone had a similar issue with a drop down menu. Essentially the Fly Out css needs to be modified.

A solution is posted here

Frank:

Thanks for the response.

I didn't know Dynamic Drive had a forum also. I guess I shouldn't be surprised; everything has a forum or a You Tube video nowadays.

I will try to fix the problem tomorrow and let you know how I made out.

I am not an IT guy so I may need some additional help but I'll try myself first.

Dave

Frank:

Thanks for taking the time to help me. The Dynamic Drive forum had a solution to the interference problem.

If anyone else has the same problem, this is what I did.

In the Dynamic Drive forum for the Ultimate Fade In Slideshow they offered 2 possible solutions.

I changed the Z index from 1 to 1000 in the Navlist li of the stylesheet_catagories_menu.css file. Then the Fly Out navigation and the Fade In Slideshow worked great together.

Thanks again for pointing me in the right direction. That's not something I would have come up with myself.

Dave

Hi All is there any way I can change the look of my main page layout from this
http://www.rvsolarsystems.co.uk/store/

to this http://www.sunstore.co.uk/
Cheers Peter

Well, well, well .... tried to implement the 'recipe' I wrote some time ago (post #5) in a zc v1.5 development and the show does not want to get on the road (the main page).... in other words: it ain't working :yuck:

Are there any changes in zc v1.5 relating to the implementation of jscript compared to zc v1.3.9x ?

Quote:

---

Originally Posted by frank18

Well, well, well .... tried to implement the 'recipe' I wrote some time ago (post #5) in a zc v1.5 development and the show does not want to get on the road (the main page).... in other words: it ain't working :yuck:

Are there any changes in zc v1.5 relating to the implementation of jscript compared to zc v1.3.9x ?

---

Obviously no changes in zc v1.5 ....... in the heat of the moment and being rushed to get this finished I simply omitted to properly reference the path to the script :blush:

The upshot: version 2.4 of this show works perfectly in zc v1.5 :yes:

ok. Here is what I have done from trying to follow what has been said here:
I am wanting to use this on one of my ezpages, therefore, I am not sure I have the two files uploaded in the correct areas. Here is where I have them:

templates/CUSTOM_TEMPLATE_NAME/common/jscript_fadeshow.php

and

includes/modules/pages/index/jscript_fadeshow.js

then...I placed the div tag <div id="fadeshow1"></div> in the ezpage...not working for me, therefore, I am sure I do not have these in the correct areas.

Can someone please let me know where I need to have the files?
Much appreciated in advance!
Kat

Quote:

---

Originally Posted by perkiekat

ok. Here is what I have done from trying to follow what has been said here:
I am wanting to use this on one of my ezpages, therefore, I am not sure I have the two files uploaded in the correct areas. Here is where I have them:

templates/CUSTOM_TEMPLATE_NAME/common/jscript_fadeshow.php

and

includes/modules/pages/index/jscript_fadeshow.js

then...I placed the div tag <div id="fadeshow1"></div> in the ezpage...not working for me, therefore, I am sure I do not have these in the correct areas.

Can someone please let me know where I need to have the files?
Much appreciated in advance!
Kat

---

From what I am reading on the forum, EZPages are actually in db table...not good for what I am trying to do with this.
Ok...plan b...
I am going to try to place this in page_2 -- and will need to rename page 2 so it will say "About Company". Can anyone help me out with the structure of what I need to do here to rename page 2 and then place this slideshow in there?

If someone has a better idea I'm listening and please chime in and share your thoughts.
Thank you

Quote:

---

Originally Posted by perkiekat

From what I am reading on the forum, EZPages are actually in db table...not good for what I am trying to do with this.
Ok...plan b...
I am going to try to place this in page_2 -- and will need to rename page 2 so it will say "About Company". Can anyone help me out with the structure of what I need to do here to rename page 2 and then place this slideshow in there?

If someone has a better idea I'm listening and please chime in and share your thoughts.
Thank you

---

First rename page_2 to whatever, eg about_company. Instructions about how to do that can be found elsewhere in the forums and and the FAQ's - it is not really the topic of this thread.

Once you have done that, refer to post #5 or your own post #10 in this thread.

Drop the script into folder includes/modules/pages/about_company/

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

There is nothing to edit in this script.

Then in the part that refers to includes/templates/YOUR_TEMPLATE/common/html_header.php change

Quote:

---

wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

---

to

Quote:

---

wrapperid: "fadeshowac", //ID of blank DIV on page to house Slideshow

---

Edit dimensions, displaymode, fadeduration, images etc accordingly.


Lastly use this empty div

<div id="fadeshowac"></div>

in your about_company template page

Thank you very much for your help. I truly appreciate it. Now I'm off to do the edits!

Glenn (gjh42) has submitted an updated (version 2.4) add-on mod to the Free Software Add Ons section.

A support thread can be found here:

http://www.zen-cart.com/forum/showthread.php?t=172185

Post #46 of that thread outlines some details about v 2.4 - should be approved and ready for download shortly.

To avoid doubling up on threads I have decided that I will no longer attend to this thread (the one you are reading now) and suggest the devs close it.

Frank