Stuck with the Ultimate Slide Fade

**andywhitham** · 11-11-2011, 09:23 AM

1) Script Title: Ultimate Fade-in Slideshow v2.

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

Hi, I am stuck. Trying to put the Ultimate Fade-in Slideshow onto my site and failing miserably. I copied the top section of coding and put it into the HEAD section , I 'saved as' the fadeslideshow js and uploaded it to the folder where the other files and html is for the page , I copied the bottom section of coding and pasted that exactly into the area where I want to have the slideshow effect.
I changed the coding in the top section mygallery to include the address of the x4 pics I want to use AND altered the sizes too.
Not sure if I should open the js file and alter that? If so what do I open it with ?
I have all x4 pics uploaded into the same folder as the js file and the html for the page.
* I also have a menu script in the HEAD section of my page ( http://www.awstyle.co.uk/coppicehotel ), would this conflict?

I am new to the world of scripts and find them very confusing, so any explantion in a plain and easy to understand way would be really appreciated.
I have been trying to get this working for 4 solid days now without any success , any help would be appreciated.

andy whitham

**jscheuer1** · 11-11-2011, 11:20 AM

There's none of that on the page you linked to on your site:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**azoomer** · 11-11-2011, 11:20 AM

I don't see the ultimate fade-in slideshow anywhere on the page you link to(http://www.awstyle.co.uk/coppicehotel). Could you provide a link to a page where you have tried to implement the script, that would help us finding any errors

**andywhitham** · 11-11-2011, 12:58 PM

Hi to both of the people that replied...I took the coding off that page, but will put it back again. On the page i sent, which is at www.awstyle.co.uk/coppicehotel I intend to plut the effect onto the large graphic of the hotel. I have 4 other different graphiics of the hotel all the same size ready for use with the effect.

I have replaced the missing coding for you to check through, and I can confirm I have uploaded the fadeslideshow js into the same folder as the .index htm and the graphics.

Any help would be greatly appreciated

~~ andy ~~

**jscheuer1** · 11-11-2011, 04:16 PM

Your copy of fadeslideshow.js has been edited or has become corrupt. Get a fresh copy and try again. I think your editor or upload method have corrupted it by adding code to it. How are you saving and uploading it?

For example, yours looks like so:

Code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<PRE>/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/</PRE>
<PRE>//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new &quot;peakaboo&quot; option to &quot;descreveal&quot; setting. oninit and onslide event handlers added.</PRE>
<PRE>var fadeSlideShow_descpanel={
	controls: [['http//www.awstyle.co.uk/c . . .

It should look like:

Code:

/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.

var fadeSlideShow_descpanel={
	controls: [['http//www.awstyle.co.uk/c . . .

I think it's your editor. Use a text only editor like NotePad to edit the file.

Once that's fixed, there's no div on the page with an id of 'fadeshow1'. I'm pretty sure you want that here:

Code:

<TD WIDTH="68%"> <div id="fadeshow1"><IMG SRC="images/palmoutside.jpg" WIDTH="625" HEIGHT="267"></div>
</TD>

Once that's fixed, the paths to the images are wrong in the new fadeSlideShow() declaration, they should be:

Code:

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [625, 267], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["images/palmoutside.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["images/pooloutdoor.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["images/rooms.jpg"],
		["images/partynight.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})




</script>

That's it to get it working. But, in some browsers - if you use descriptions, their display will be off unless you use a standards invoking DOCTYPE for the page. Do you intend to use descriptions or not?

**andywhitham** · 11-11-2011, 05:12 PM

Hi John.

Thanks for this info, I don't intend to use descriptions , just the graphics on their own.
I use Dreamweaver to edit in.
As for the paths to the images, I thought I would have to put the full web addy ? but it seems just "images/palmoutside is suffice.
So you would recomend editing in Notepad and then copying and pasting into Dreamweaver for this ? I use Dreamweaver normally 100% of the time and until now havent had a problem.
So the fadeslideshow.js doesnt need to be edited and left as it is ?
ASs for the graphics, I intend to use x 5 graphics on that large space on the front page. Could you tell me , I currently have just one on there at the moment, the images/palmoutside.jpg large graphic. I see you mention to put the <div id="fadeshow1">
ahead of the current graphic , thats okay but what and where do I put the other x4 graphics?
Finally I have uploaded the .js file ( I will get another of these) to the folder containing the page html and the x5 graphics, I assume this is correct?

Sorry to sound a thicko John, Im at the age where it takes a little longer for things to sink in , lol..and once again I appreciate your help.

**jscheuer1** · 11-11-2011, 05:22 PM

I don't use dreamweaver. I think it has a code view. If you have to use it to edit the fadeslideshow.js file, use the code view. But, If you're not using descriptions, you don't have to edit fadeslideshow.js. Pasting into dw isn't a very good idea. The 5x images go in the imagearray (there are already 4 there). You can use the absolute paths there as you did, but they have to be accurate. Those you had were wrong. The paths I gave you are relative, but they are accurate.

You don't need any images in the fadeshow1 division, but it's nice to have one as a placeholder for non-javascript users, and to give the browser a 'heads up' as to the layout space that's required.

**andywhitham** · 11-11-2011, 05:34 PM

Thanks John,

I will try that, and just another question, when you cut n copy the coding from the DynamicDrive website , it also brings along the coding for Fadeslideshow2 as well. Do I delete this section of coding as I am using only slidefadeshow1 ?

Thanks John

**jscheuer1** · 11-11-2011, 05:51 PM

Yes. Just as you already had done.

**andywhitham** · 11-11-2011, 06:07 PM

Okay John, I tried it and only partial results, Im doing something wrong. I pasted the correct coding into the HEAD section, deleted the section regarding slidefadeshow2 , and put the <div id="fadeshow1"> into the space where the large graphic goes ( I had already taken the graphic out of the html so I just had an empty space there). When I copied the <div id="fadeshow1"> I also had to put a closing </div> immediately after it as it was showing an error.
I then uploaded the html and refreshed the page.

This time it had duplicated the graphic along the top of the page ! grrrr .

The left hand graphic seeemed to be working fine as the picture was changing but the right hand side was just a space where I had previously removed the graphic. Its thrown evberything skewed. I must have put some coding in the wrong place somewhere, puzzled here.

andy

Thread: Stuck with the Ultimate Slide Fade

Thread Tools

Search Thread

Stuck with the Ultimate Slide Fade

Bookmarks

Bookmarks

Posting Permissions