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

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.