PDA

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



MikeUK
06-15-2010, 11:41 AM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:
I can get the script to work on this page:
http://business-internet.co.uk/jambalaya/slide-test-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! :confused:

Thanks

Mike

Relevant bits of 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>

jscheuer1
06-15-2010, 12:31 PM
The path to the script is different/incorrect on the index.htm page:


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


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

MikeUK
06-15-2010, 12:52 PM
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

MikeUK
06-15-2010, 01:25 PM
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

azoomer
06-15-2010, 03:08 PM
.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 ?

MikeUK
06-15-2010, 07:02 PM
All sorted now - thank you for your help.