Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Stuck with the Ultimate Slide Fade

  1. #1
    Join Date
    Nov 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Stuck with the Ultimate Slide Fade

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    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

  4. #4
    Join Date
    Nov 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Nov 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yes. Just as you already had done.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Nov 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •