Results 1 to 6 of 6

Thread: Ultimate Fade-in slideshow (v2.4) - css / html problem?

  1. #1
    Join Date
    Jun 2010
    Location
    United Kingdom
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v2.4) - css / html problem?

    1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

    3) Describe problem:
    I can get the script to work on this page:
    http://business-internet.co.uk/jamba...est-fade1.html

    ... but copying the script onto this page:
    http://business-internet.co.uk/jambalaya/index.htm ... and it doesn't work.

    I'm trying to get the slide show to display in the right-hand cell of the header row.

    I assume this must be a css / html problem as it's the same script on both pages. It does the same thing in FF, IE7 or Chrome.

    I'm not a programmer or particularly skilled with css (don't nag me about the tables!) but any advice would be appreciated and stop me tearing my hair out!

    Thanks

    Mike

    Relevant bits of code:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="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: [250, 90], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["pix/cruising.jpg", "", "", "Cruising"],
    		["pix/classic-regatta-sml.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Classic Regatta 2010"],
    		["pix/anitest2.jpg", "", "", "Islands"],
    		["pix/classic-regatta-sml.jpg", "", "", "Classic Regatta 2"] //<--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>
    </head>
    
    <body>
    <table class="tableMain">
      <tr>
        <td colspan="2" class="header">
    	<table width="100%">
          <tr>
            <td><h2>Jambalaya - Caribbean Yacht Charter<br>
    on a traditional wooden schooner</h2></td>
            <td> <div id="fadeshow1"></div></td>
          </tr>
        </table>
    Last edited by jscheuer1; 06-15-2010 at 01:39 PM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    The path to the script is different/incorrect on the index.htm page:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="../Templates/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: [250, 90], //width/height o . . .
    On the page where it works you have:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="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: [250, 90], //width/height o . . .
    That's probably it. And that has to be fixed. But there could also be other problems.
    - John
    ________________________

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

  3. #3
    Join Date
    Jun 2010
    Location
    United Kingdom
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Ah!

    Thank you John.

    That path is added by Dreamweaver when I create a new html file from a template. I'll watch for that in future.

    Many thinks for your help.

    Cheers

    Mike

  4. #4
    Join Date
    Jun 2010
    Location
    United Kingdom
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default One problem fixed... another appears...

    I can now get the fading images to appear, but they do an odd thing in 2 out of 3 browsers.

    http://business-internet.co.uk/jambalaya/

    It displays as intended in IE7 but in Frefox 3.6.3 and Chrome the image truncates and leaves a black band on the right-hand side of the image.

    The yellow / ochre colour is a background colour in the table cell just so I can see what's going on.

    Thanks for any suggestions.

    Mike

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

    Default

    Code:
    .header img {
    	float: right;
    	margin-right:18px;
    	}
    This part of you css seems to be the bad guy. When deleted all together it looks better in firefox and ie8. Don't know about ie7 though ?

  6. The Following User Says Thank You to azoomer For This Useful Post:

    MikeUK (06-15-2010)

  7. #6
    Join Date
    Jun 2010
    Location
    United Kingdom
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    All sorted now - thank you for your help.

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
  •