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

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

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

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

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?

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

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/1.4.2/jquery.min.js

instead of

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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

frank18:

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

instead of

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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?

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:

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.

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

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