My slideshow doesn't link to pages!

[DanielleC]

1) Script Title: Ultimate Fade In Slideshow

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

3) Describe problem: The slideshow looks great. All of the photos are appearing but none of them are clickable. My understanding is that each image should link to an individual page.

Here's what I have:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://culinarysystems.com/culinary_systems/images/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",
dimensions: [856, 327],
imagearray: [
["http://culinarysystems.com/culinary_systems/images/about.png", "http://culinarysystems.com/culinary_systems/about.html", "_top", ""],




["http://culinarysystems.com/culinary_systems/images/startup.png","http://culinarysystems.com/culinary_systems/Restaurant_Startup.html","_top",""],

["http://culinarysystems.com/culinary_systems/images/efficiency.png","http://culinarysystems.com/culinary_systems/Efficiency_Analysis_and_Implementation.html","_top",""],


["http://culinarysystems.com/culinary_systems/images/recipeconcept.png","http://culinarysystems.com/culinary_systems/Recipe_%26_Concept_Development.html","_top",""],


["http://culinarysystems.com/culinary_systems/images/testimonials.png","http://culinarysystems.com/culinary_systems/Testimonials.html","_top",""],


["http://culinarysystems.com/culinary_systems/images/recipes.png","http://culinarysystems.com/culinary_systems/Recipe_%26_Concept_Development.html","_top",""],


["http://culinarysystems.com/culinary_systems/images/product.png","http://culinarysystems.com/culinary_systems/Product_Development.html","_top",""],


["http://culinarysystems.com/culinary_systems/images/executivetraining.png","http://culinarysystems.com/culinary_systems/Executive_Training_Series.html","_top",""],


["http://culinarysystems.com/culinary_systems/images/blog.png","http://culinarysystems.com/culinary_systems/Blog/Blog.html","_top",""],


["http://culinarysystems.com/culinary_systems/images/contactus.png","http://culinarysystems.com/culinary_systems/Contact_Us.html","_top",""],
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:false},
persist: false,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""
})

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

[jscheuer1]

Works OK here if I copy your code and run it in the browser.

Usually a problem like that is caused by an unclosed tag anywhere on the page before the slideshow's div tag.

One thing though, and this has nothing to do with the problem you mention, but for IE 8 or maybe it's 7 and less you cannot have a comma (red) here after the very last imagearry entry (all the other commas are fine, just this one is a problem and only in some browsers):

 . . . narysystems.com/culinary_systems/Contact_Us.html","_top",""],
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false, randomize:false},
persist: false,
fadeduration: 500,
descreveal: "ondemand",
togglerid: ""
})

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

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[DanielleC]

The page is www.culinarysystems.com

[jscheuer1]

The div holding the iframe that has the slideshow in it is being covered by the div holding the stroke images that create a border effect around it. This second div is visually transparent in the middle, so you can still see the slideshow. But from a layout point of view, it's still covering it in most browsers.

Since both of these divs are positioned absolute, we need to raise the first one's z-index to get it to be not only visually seen, but also accessible in the layout to the mouse.

But then some of the stroke images get covered and you lose some of the border effect. To prevent that, we can make the div with the slideshow slightly narrower and move it slightly to the left. Then it all works out, at least in Chrome. IE has no problem to begin with because it doesn't see a problem with the visually transparent section covering anything. But, as I said in my previous post, you have to remove that comma for the slideshow to work in IE 8 and less. And now that I see the page is set for IE 7 emulation, that has to be fixed for any IE to run the slideshow. Other browsers (Firefox, Safari and Opera) should be like Chrome in this regard.

Replace (on culinarysystems.com/Culinary_Systems/Welcome.html):

<div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 327px; left: 20px; opacity: 1.00; position: absolute; top: 241px; width: 856px; z-index: 1; ">

with:

<div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 327px; left: 23px; opacity: 1.00; position: absolute; top: 241px; width: 852px; z-index: 2; ">

Upload the changes and refresh the page.