Kass
08-21-2008, 04:35 PM
1) Script Title: Feature Content Slider
2) Script URL (on DD): http://www.sanddollarit.com/theaterlocations7/SliderTest.asp
3) Describe problem:
I've set up a test page to try to get the Featured Content Slider to work.
I want to mouseover the thumbnails and have a larger picture show up in the feature window. I keep getting 'featurecontentslider' is undefined error... Character 1.... code 0.
I've looked all over your site and can't come up with a solution as to what I'm doing wrong. I know I have the code correct, cuz it shows up from a test page on my PC (in html)... but when I try to move it to the server, it doesn't work. Eventually, the script will be in a .asp page with SSI (I have SSI installed and all is well).
Thanks for your help! I've never posted here before, so if I didn't do this right.... sorry in advance :-)
Here is the code on my test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js">
/***********************************************
* Featured Content Slider- (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>
</head>
<body>
<h2>Example 2, Pagination links from markup</h2>
<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
<div id="slider2" class="sliderwrapper">
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0001.jpg' />
</div>
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0002.jpg' /><br />
</div>
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0003.jpg' /><br />
</div>
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0004.jpg' /><br />
</div>
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0005.jpg' /><br />
</div>
</div>
<div id="paginate-slider2" class="pagination">
<a href="#" class="toc">
<img src='/images7/locations/ridgmar/0001.jpg' width="50px" height="50px" /></a>
<a href="#" class="toc anotherclass">
<img src='/images7/locations/ridgmar/0002.jpg' width="50px" height="50px" /></a>
<a href="#" class="toc">
<img src='/images7/locations/ridgmar/0003.jpg' width="50px" height="50px" /></a>
<a href="#" class="toc">
<img src='/images7/locations/ridgmar/0004.jpg' width="50px" height="50px" /></a>
<a href="#" class="toc">
<img src='/images7/locations/ridgmar/0005.jpg' width="50px" height="50px" /></a>
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider2", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</body>
</html>
2) Script URL (on DD): http://www.sanddollarit.com/theaterlocations7/SliderTest.asp
3) Describe problem:
I've set up a test page to try to get the Featured Content Slider to work.
I want to mouseover the thumbnails and have a larger picture show up in the feature window. I keep getting 'featurecontentslider' is undefined error... Character 1.... code 0.
I've looked all over your site and can't come up with a solution as to what I'm doing wrong. I know I have the code correct, cuz it shows up from a test page on my PC (in html)... but when I try to move it to the server, it doesn't work. Eventually, the script will be in a .asp page with SSI (I have SSI installed and all is well).
Thanks for your help! I've never posted here before, so if I didn't do this right.... sorry in advance :-)
Here is the code on my test page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="contentslider.css" />
<script type="text/javascript" src="contentslider.js">
/***********************************************
* Featured Content Slider- (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>
</head>
<body>
<h2>Example 2, Pagination links from markup</h2>
<!--Inner content DIVs should always carry "contentdiv" CSS class-->
<!--Pagination DIV should always carry "paginate-SLIDERID" CSS class-->
<div id="slider2" class="sliderwrapper">
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0001.jpg' />
</div>
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0002.jpg' /><br />
</div>
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0003.jpg' /><br />
</div>
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0004.jpg' /><br />
</div>
<div class="contentdiv">
<img src='/images7/locations/ridgmar/0005.jpg' /><br />
</div>
</div>
<div id="paginate-slider2" class="pagination">
<a href="#" class="toc">
<img src='/images7/locations/ridgmar/0001.jpg' width="50px" height="50px" /></a>
<a href="#" class="toc anotherclass">
<img src='/images7/locations/ridgmar/0002.jpg' width="50px" height="50px" /></a>
<a href="#" class="toc">
<img src='/images7/locations/ridgmar/0003.jpg' width="50px" height="50px" /></a>
<a href="#" class="toc">
<img src='/images7/locations/ridgmar/0004.jpg' width="50px" height="50px" /></a>
<a href="#" class="toc">
<img src='/images7/locations/ridgmar/0005.jpg' width="50px" height="50px" /></a>
</div>
<script type="text/javascript">
featuredcontentslider.init({
id: "slider2", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</body>
</html>