Blending Image Slide Show

[edandrea]

1) Script Title: Blending Image Slide Show

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

3) Describe problem: I would like to have the blending image slide show apear and work within the "Ajax Contentarea". Is this posible. I have tried for days to get it to work but it doesnt. I am required to place the Javascript in the body so I have been placeing it in the content area, I think that must be wrong. I want this to work on the index.html page. Does anybody know how it should be set up?

[jscheuer1]

Much depends upon the specifics of your implementation. Please provide a link to your problem page.

[edandrea]

http://www.salisburybeachhome.com

Thanks for sresponding. I wanted the blending image slide show to begin on the index page. I have moved stuff around so much trying to get it to work but no matter what I do, it no work. I am sure that the two javascripts dont belong in the same <td> and that may be the problem but it will work on my local browser but not when I upload it to a server.

Any help would be appreciated.

[jscheuer1]

First of all, in order to be in compliance with Dynamic Drive's Terms of Use, you need to include the credits for the Dynamic Drive scripts that you are using right in the source code of the page(s) that use them, ex:

<script type="text/javascript" src="js/dynamicajaxpage.js">
/***********************************************
* Dynamic Ajax Content- © 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 full source code
***********************************************/
</script>
<script type="text/javascript" src="js/photo.js">
//*****************************************
// Blending Image Slide Show Script- 
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************
</script>
<script type="text/javascript" src="js/pollcont.js" ></script>

Not:

<script type="text/javascript" src="js/dynamicajaxpage.js"></script>
<script language="JavaScript1.1" src="js/photo.js"></script>
<script language="JavaScript1.1" src="js/pollcont.js" ></script>

as you currently have them.

Now, where you have:

<div id="contentarea">
<script type="text/javascript">ajaxpage('p_home.html', 'contentarea') //load "p_home.html" into "contentarea" DIV
</script>
<script language="JavaScript1.1" src="js/photo_show.js"></script>

						</div>

Since you are loading the show with the page anyway, this would be better:

<div id="contentarea" style="display:none;"></div>
<div id="theShow"><img src="house_pics/rot_ocean.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)">
<script type="text/javascript" src="js/photo_show.js"></script></div>

Once we've broken it up like that, we can do some simple display style manipulation as regards the Ajax stuff here:

        <div id="globalNav"> 
            <ul> 
              <li ><a href="javascript:ajaxpage('p_home.html', 'contentarea');">Home</a></li> 
              <li ><a href="javascript:ajaxpage('p_area.html', 'contentarea');">Area</a></li> 
              <li ><a href="javascript:ajaxpage('p_demo.html', 'contentarea');">Demographics</a></li> 
              <li ><a href="javascript:ajaxpage('p_loc.html', 'contentarea');">Location</a></li> 
            </ul> 
        </div>

Like so:

<script type="text/javascript">
function togShow(state){
document.getElementById('theShow').style.display=state? 'block' : 'none';
document.getElementById('contentarea').style.display=state? 'none' : 'block';
}
</script>
        <div id="globalNav"> 
            <ul> 
              <li ><a href="#" onclick="togShow(1);return false;">Home</a></li> 
              <li ><a href="#" onclick="ajaxpage('p_area.html', 'contentarea');togShow(0);return false;">Area</a></li> 
              <li ><a href="#" onclick="ajaxpage('p_demo.html', 'contentarea');togShow(0);return false;">Demographics</a></li> 
              <li ><a href="#" onclick="ajaxpage('p_loc.html', 'contentarea');togShow(0);return false;">Location</a></li> 
            </ul> 
        </div>

[edandrea]

Thanks John, I will give it a try. Thought I was in compliance by just having it on the javascript page's, but I will make the necessary adjustments as you recomended. I appreciate your help and time in this matter.

[edandrea]

Works great John. A little sluggish but it is doing the job. Thanks heaps......I almost gave up, well I did give up but I am one of those people who just has to know y the code didnt work. I spent days of frustration.

http://www.salisburybeachhome.com

[jscheuer1]

You could probably speed things up by validating to a strict or transitional HTML 4.01 DOCTYPE rather than the unsupported XHTML one you are using and by optimizing your images. Optimizing the images would probably net the biggest gains.

BTW, you only need this:

<script type="text/javascript">
function togShow(state){
document.getElementById('theShow').style.display=state? 'block' : 'none';
document.getElementById('contentarea').style.display=state? 'none' : 'block';
}
</script>

Once on the page. The first one will do nicely.