hello,
I've copied the code from http://www.javascriptkit.com/script/...mbslider.shtml but I am getting nothing but blank screen. I am running it on my development server with expression Web 4. The code is as follows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="thumbslide.js">
// Thumbnail Slider- by JavaScript Kit (www.javascriptkit.com)
// Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
</script>
<link rel="stylesheet" type="text/css" href="thumbslide.css" />
<script>
//Initialization code:
$(document).ready(function(){ // on document load
$("#thumbsliderdiv").imageSlider({ //initialize slider
'thumbs': ["fpslideshow/church.jpg","fpslideshow/fisherman.jpg","fpslideshow/legs.jpg","fpslideshow/sunset.jpg","fpslideshow/tropical.jpg","livingroom.jpg","livingroom2.jpg"], // file names of images within slider. Default path should be changed inside thumbslide.js (near bottom)
'auto_scroll':true,
'auto_scroll_speed':4500,
'stop_after': 2, //stop after x cycles? Set to 0 to disable.
'canvas_width':700,
'canvas_height':500 // <-- No comma after last option
})
});
</script>
$(document).ready(function(){ // on document load
$("#thumbsliderdiv").imageSlider({ //initialize slider
'thumbs': ["/jsslider/abbeyroad.jpg","/jsslider/fisherman.jpg","/jsslider/legs.jpg",""], // paths to images
'auto_scroll':true,
'auto_scroll_speed':4500,
'stop_after': 2, //stop after x cycles? Set to 0 to disable.
'canvas_width':700,
'canvas_height':500 // <-- No comma after last option
})
});
<body>
<div id="thumbsliderdiv"></div>
</body>
Have tried several different ways of image path but to no avail. Images are in the same directory as code. The doc root is /jsslider. I have downloaded the two scripts to the same directory. Any hints on what might be wrong? I assume the inialization is already include in the code snippet from step 1 of tutorial. Thanks..


Reply With Quote

Bookmarks