Log in

View Full Version : Resolved Ultimate Fade-in Slide show (v2.1) Not Rotating


StephanieT
02-24-2010, 10:09 PM
1) Script Title: Ultimate Fade-in Slide show (v2.1)

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

3) Describe problem: My images are all displaying at once, and not rotating one-by-one (http://stephaniesuggests.com/) Can you tell me what I’m doing wrong? Thanks!

This is the code I put in the Head Section:

<!DOCTYPE HTML>

<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, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://stephaniesuggests.com/images/Rotating1.jpg", "", "", "Welcome to our United Physical Therapy in Peru, IL!"],
["http://stephaniesuggests.com/images/Rotating4.jpg", "", "", "Just follow the sign to our office."],
["http://stephaniesuggests.com/images/Rotating6.jpg", "", "", "Our office is private and welcoming."],
["http://stephaniesuggests.com/images/Rotating9.jpg", "", "", "And our waiting room is comfortable and quiet"],
["http://stephaniesuggests.com/images/Rotating2.jpg", "", "", "Each room was designed with your comfort and privacy in mind"],
["http://stephaniesuggests.com/images/Rotating10.jpg", "", "", "Personalized attention promotes your progress and recovery."],
["http://stephaniesuggests.com/images/Rotating3.jpg", "", "", "Any necessary exercises are performed in a private setting"],
["http://stephaniesuggests.com/images/Rotating5.jpg", "", "", "One-on-one care is the best care possible!"] //<--no trailing comma
after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>

<noscript>Sorry you can't see the great pictures here - you have javascript turned off!</noscript>


This is the code I put on the page:


<div id="fadeshow1"></div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://stephaniesuggests.com/images/Rotating1.jpg" style="border-width:0" /></a> <span class="status"
style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://stephaniesuggests.com/images/Rotating4.jpg" style="border
-width:0" /></a><a href="#" class="next"><img src="http://stephaniesuggests.com/images/Rotating6.jpg" style="border-width:0" /></a>
<a href="#" class="next"><img src="http://stephaniesuggests.com/images/Rotating9.jpg" style="border-width:0" /></a>
<a href="#" class="next"><img src="http://stephaniesuggests.com/images/Rotating2.jpg" style="border-width:0" /></a>
<a href="#" class="next"><img src="http://stephaniesuggests.com/images/Rotating10.jpg" style="border-width:0" /></a>
<a href="#" class="next"><img src="http://stephaniesuggests.com/images/Rotating3.jpg" style="border-width:0" /></a>
<a href="#" class="next"><img src="http://stephaniesuggests.com/images/Rotating5.jpg" style="border-width:0" /></a>
</div>


This is the code I uploaded to my site’s script directory:
http://www.dynamicdrive.com/dynamicindex14/fadeslideshow.js

I'm using XSitePro as my html editor.

THANKS!
jscheuer1
02-25-2010, 01:51 AM
I've fixed up your page some:

3166

Replace your current page with the one contained in the archive.

But you still need to place the fadeslideshow.js file in the root folder of your server.

Here's a demo of how it should look (assuming you haven't moved or changed any of your files that this demo uses):

http://home.comcast.net/~jscheuer1/side/pt/pt_h.htm
StephanieT
02-25-2010, 02:05 AM
Thanks for your reply John. I put the fadeslideshow.js in the root directory, but I don't understand your attachment. It just opened my page in Chrome with all the pictures missing. :confused:

Could you help me fix this (please assume I need step-by-step instructions!:))?
Thanks!
jscheuer1
02-25-2010, 03:55 AM
assume I need step-by-step instructions

Perhaps not. The archive I attached to my previous post contains a page (pt_h.htm), the code of which should replace the current code of your current page. You do know how to extract the page in the archive and use its code to replace the code in your current page after backing up the current code just in case there is a problem, right? It's just basic computer stuff. If not let me know.

However, you still haven't uploaded the script yet:

http://stephaniesuggests.com/fadeslideshow.js

is still a 404 not found. Perhaps your server doesn't allow scripts to be uploaded.
StephanieT
02-25-2010, 04:29 AM
What I did may be a little odd, but I think it worked? I just opened your pt_h.htm page and then looked at the source code. I took whatever was in your source code that wasn't in mine and just added it. XSitePro is little funny sometimes, and when I just used your page, it added another header, footer and sidebar. This seems to be working!

I'm going to go in and resize and re-upload the photos (I'd like them a little smaller), but is there a way to center them?

Thanks for all your help John! And please tell me if I've done anything wrong! :o

Stephanie
jscheuer1
02-28-2010, 03:34 PM
Before doing any of this, make a backup copy of your page just in case.

Most things that are duplicated like two of these:


<link type="text/css" rel="stylesheet" href="INFO_BAR_MENU.css">
<link type="text/css" rel="stylesheet" href="LEFT_MENU.css">
<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript" src="mmenudom.js"></script>


</head>


and two of these:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/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: [350, 250], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://stephaniesuggests.com/images/Rotating1.jpg", "", "", "Welcome to United Physical Therapy in Peru, IL!"],
["http://stephaniesuggests.com/images/Rotating4.jpg", "", "", "Just follow the sign to our office."],
["http://stephaniesuggests.com/images/Rotating6.jpg", "", "", "Our office is private and welcoming."],
["http://stephaniesuggests.com/images/Rotating9.jpg", "", "", "And our waiting room is comfortable and quiet"],
["http://stephaniesuggests.com/images/Rotating2.jpg", "", "", "Each room was designed with your comfort and privacy in mind"],
["http://stephaniesuggests.com/images/Rotating10.jpg", "", "", "Personalized attention promotes your progress and recovery."],
["http://stephaniesuggests.com/images/Rotating3.jpg", "", "", "Any necessary exercises are performed in a private setting"],
["http://stephaniesuggests.com/images/Rotating5.jpg", "", "", "One-on-one care is the best care possible!"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>

With stuff like that, generally the second of the two duplicates should be kept. In the case of the slide show code, the second one is in the body. It belongs in the head, so the first should be eliminated and the second placed in the head.

To center the slide show (which will center its images), add this style:


#fadeshow1 {
margin: 0 auto;
}

But for that to work in IE, you will need to change your DOCTYPE (the very first thing in your page's source code) from:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


to:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
StephanieT
02-28-2010, 07:21 PM
Thanks John!