Centering Ultimate Fade-in slide show V2.4

**digiman57** · 08-06-2010, 05:02 PM

1) Script Title: DD Ultimate Fade-in Slideshow script

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

3) Describe problem: I have successfully 'installed' this script and it works just fine, except that the images appear half way down the page and slightly to the left. What I know about html coding could be written on the back of a postage stamp :O)

Would you be able to advise me as to what i need to write in order to have the slide show appear just under the name at the top of my page please?

I have not yet published the page but can send you a copy of the coding if required.

My site has been designed in Front Page 2003.

TIA

Martin

**Beverleyh** · 08-06-2010, 05:14 PM

Yes that would be very helpful - please paste the code into your reply so we can give you the most appropriate coding advice.

**digiman57** · 08-06-2010, 05:51 PM

Thank you, here is the code below :O) I hope i've done it right...

[code]

<!DOCTYPE HTM>

<p align="center"><b><font color="#FFFFFF" face="Bradley Hand ITC" size="5">Welcome to MWA Photography</font></b></p>
<p align="center"> </p>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welcome</title>
<meta name="keywords" content="welcome, mwa photography, mwaphotography.co.uk, mwaphotography, MWA Photography, sunsets, monochrome, b&w, boats, nature, landscapes, panoroamas, hdr's, HDR's, HDR, hdr, motor sports, cadwell park, silverstone, Moulton Chapel, moulton chapel, LIncolnshire, lincolnshire, lincs, flower parade, Flower Parade, festival, churches, classic vehicles,">
<meta name="description" content="welcome to the main page of mwa photography">
<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">

</script>
<p align="center"> </p>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [800, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://mwaphotography.co.uk/slide show images/St_Andrew_Sempringham_ Lincs_UK.jpg"],
["http://mwaphotography.co.uk/slide show images/sunset1a_29-07-07.jpg"],
["http://mwaphotography.co.uk/slide show images/DSC_9058.jpg"],
["http://mwaphotography.co.uk/slide show images/Thetford_Forest_autumnal1.jpg"],
["http://mwaphotography.co.uk/slide show images/RSPB_Nature_Reserve_ Freiston_ Boston2_ Lincs.jpg"],
["http://mwaphotography.co.uk/slide show images/DSCF0052-V2c.jpg"],
["http://mwaphotography.co.uk/slide show images/St_Marys_ Islington_ HDR.jpg"],
["http://mwaphotography.co.uk/slide show images/1960 Rover P4 (100).jpg"],
["http://mwaphotography.co.uk/slide show images/DSC_2032c_portrait of a wreck.jpg"],
["http://mwaphotography.co.uk/slide show images/DSCF0303A.jpg"],
["http://mwaphotography.co.uk/slide show images/sunny_day-B_&_W.jpg"]
],
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>
<base target="_self">
</head>

/***********************************************
* 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
************************************************/

<body bgcolor="#000000">

<div id="fadeshow1"></div>
<p align="center"> </p>

</body>

</html>

[code]

**azoomer** · 08-06-2010, 06:29 PM

This will get you a little closer

Code:

<!DOCTYPE html>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Welcome</title>
<meta name="keywords" content="welcome, mwa photography, mwaphotography.co.uk, mwaphotography, MWA Photography, sunsets, monochrome, b&amp;w, boats, nature, landscapes, panoroamas, hdr's, HDR's, HDR, hdr, motor sports, cadwell park, silverstone, Moulton Chapel, moulton chapel, LIncolnshire, lincolnshire, lincs, flower parade, Flower Parade, festival, churches, classic vehicles,">
<meta name="description" content="welcome to the main page of mwa photography">
<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>
<style type="text/css">
body { 
       background-color:#000;
}
#fadeshow1 {
      margin-left:auto;
      margin-right:auto;
}
</style>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [800, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://mwaphotography.co.uk/slide show images/St_Andrew_Sempringham_ Lincs_UK.jpg"],
["http://mwaphotography.co.uk/slide show images/sunset1a_29-07-07.jpg"],
["http://mwaphotography.co.uk/slide show images/DSC_9058.jpg"],
["http://mwaphotography.co.uk/slide show images/Thetford_Forest_autumnal1.jpg"],
["http://mwaphotography.co.uk/slide show images/RSPB_Nature_Reserve_ Freiston_ Boston2_ Lincs.jpg"],
["http://mwaphotography.co.uk/slide show images/DSCF0052-V2c.jpg"],
["http://mwaphotography.co.uk/slide show images/St_Marys_ Islington_ HDR.jpg"],
["http://mwaphotography.co.uk/slide show images/1960 Rover P4 (100).jpg"],
["http://mwaphotography.co.uk/slide show images/DSC_2032c_portrait of a wreck.jpg"],
["http://mwaphotography.co.uk/slide show images/DSCF0303A.jpg"],
["http://mwaphotography.co.uk/slide show images/sunny_day-B_&_W.jpg"]
],
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>
<p align="center"><b><font color="#FFFFFF" face="Bradley Hand ITC" size="5">Welcome to MWA Photography</font></b></p>
<div id="fadeshow1"></div>
</body>
</html>

This part of the code
dimensions: [800, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
is responsible for the large gap from the heading down to the pictures. You would probably want to make the dimensions a bit smaller, to avoid the gap. But of course that depends on the dimensions of the images you plan to use. If you make it say 500, 500 the slideshow will move up.
Note that I have moved the <P> tags down in the body section of the page. Tags relating to content should be inside the body tags and not in the head section.
I changed an error in the doctype. You may want to change it to a standard compliant doctype though. The centering was made with css margin-left:auto and so on.

**Beverleyh** · 08-06-2010, 06:56 PM

I dont mean to stomp on your creativity but your code is all over the place.

I've never worked with FrontPage before but I've heard its the tool from hell as far as web editors/designers go. I expect that your messy code is down to 2 factors -
1. that FrontPage does provide obvious and efficient means of editing the head or body of a web page (in code view?) and
2. that you might not be fully up to speed on the basic tags/structure of a web page document.

I recommend that you take a look at a few basic HTML tutorials first so you are comfortable with the different areas of a web page, namely the <head> section and the <body> section. http://www.echoecho.com/htmlbasics.htm explains the basics.
Once you're comfortable with the structure of an HTML document, you'll feel more confident about inserting javascript, CSS and HTML markup in the most appropriate places of a web page.

May I also point you in the direction of an open source WYSIWYG web page editor called Kompozer: http://kompozer.net/ which might be a good an easy step on from FrontPage - the code it produces certainly looks much nicer and with its optional HTML code view, its easy to switch back and forth to do manual edits (such as installing scripts from DD)

Anyway, back to your current page code dilemma. I cant advise you on how to edit the code within FrontPage but this it what your page formatted properly should look something like;

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Language" content="en-gb">
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
 <title>Welcome</title>
  <meta name="keywords"
 content="welcome, mwa photography, mwaphotography.co.uk, mwaphotography, MWA Photography, sunsets, monochrome, b&amp;w, boats, nature, landscapes, panoroamas, hdr's, HDR's, HDR, hdr, motor sports, cadwell park, silverstone, Moulton Chapel, moulton chapel, LIncolnshire, lincolnshire, lincs, flower parade, Flower Parade, festival, churches, classic vehicles,">
  <meta name="description"
 content="welcome to the main page of mwa photography">
  <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: [800, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://mwaphotography.co.uk/slide show images/St_Andrew_Sempringham_ Lincs_UK.jpg"],
["http://mwaphotography.co.uk/slide show images/sunset1a_29-07-07.jpg"],
["http://mwaphotography.co.uk/slide show images/DSC_9058.jpg"],
["http://mwaphotography.co.uk/slide show images/Thetford_Forest_autumnal1.jpg"],
["http://mwaphotography.co.uk/slide show images/RSPB_Nature_Reserve_ Freiston_ Boston2_ Lincs.jpg"],
["http://mwaphotography.co.uk/slide show images/DSCF0052-V2c.jpg"],
["http://mwaphotography.co.uk/slide show images/St_Marys_ Islington_ HDR.jpg"],
["http://mwaphotography.co.uk/slide show images/1960 Rover P4 (100).jpg"],
["http://mwaphotography.co.uk/slide show images/DSC_2032c_portrait of a wreck.jpg"],
["http://mwaphotography.co.uk/slide show images/DSCF0303A.jpg"],
["http://mwaphotography.co.uk/slide show images/sunny_day-B_&_W.jpg"]
],
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>
<style type="text/css">
body { 
background:#000;
}
</style>
</head>
<body>
<div id="fadeshow1" style="margin:auto"></div>
</body>
</html>

With regard to centering the slideshow div, style="margin:auto" should do it (see the code above)

**digiman57** · 08-06-2010, 06:58 PM

Thank you, I see what you have done

I do however get an error warning - Line 26 'fadeslideshow' is undefined but to me it looks exactly like the previous version

Martin

**azoomer** · 08-06-2010, 07:05 PM

make sure the html file and the fadeslideshow.js is in the same folder

**digiman57** · 08-06-2010, 07:12 PM

DOH! My fault as i copied/pasted into a new page but didn't name the page, sorted now though ta. Looks a lot better centred but will it go any higher up the page? It fits nicely on my 20" monitor but will probably have to be scrolled to view otherwise...Could it be because i have designed the site with frames?

For me, this is a learning curve and i surprised myself by working out how to link to my images...easy for anyone who knows how to though

Martin

**digiman57** · 08-06-2010, 07:20 PM

please ignore my last post, i didn't notice the comments from azoomer, very sorry...i'll take a look at it now and hopefully report everything ok :O)

Martin

**mwscrl** · 08-06-2010, 08:14 PM

Good afternoon

This script is almost perfect.

How do you get the css or js written so that the page fades in and out instead of coming in front a side?

(using an external file)

Thank you