PDA

View Full Version : Cut & Paste Thumbnail Slider not working



alank
08-22-2014, 03:23 PM
hello,
I've copied the code from http://www.javascriptkit.com/script/script2/thumbslider.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..

vwphillips
08-23-2014, 01:34 PM
The document ready statment initializes the script

please post a link to your to yout page