Resolved need help calling external script

[cozart]

so i'm very green when it comes to JavaScript and i realize this is probably an extremely basic question, but i'm at a loss and looking to learn.

i have a content slider script that should rotate content slides at the given interval and also apply the '.current' class to the corresponding thumbnail when that particular slide is active.

i'm just unsure how to call the script in my html. below i'll post, in order, what's in my html header (the script is called sliderscript.js), my first two html entries (there's five slides total), and my script.

<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/sliderscript.js" type="text/javascript"></script>

<div class="slider-container">	
			<div class="slides">	
			
				<div class="slide dummy1">
					<div class="inside">
						<div class="text">
							<p>lorem ipsum</p>
						</div><!--text-->
					</div><!--inside-->
				</div><!--slide dummy1-->
		
				<div class="slide dummy2" style="display: none">
					<div class="inside">
						<div class="text">
							<h1 class="heading">lorem ipsum</h1>
							<p>lorem ipsum</p>
						</div><!--text-->
					</div><!--inside-->
				</div><!--slide dummy2-->
                         </div><!--slides-->

             <div class="slidertray">
		<div class="thumbs-container">
				
			  <ul>
				<li id="dummy1-thumb" class="current first">
					<a href="#">
						<div class="thumbbox"><img src="path" ></div>
						Dummy1 Tag
					</a>
				</li>

				<li id="dummy2-thumb">
					<a href="#">
						<div class="thumbbox"><img src="path"  /></div>
						Dummy2 Tag
					</a>
				</li>
                         </ul>

                   </div><!--thumbs-container-->
               
                 </div><!--slidertray-->

</div><!--slider-container-->

$(function() {

	/* SLIDER */
	var carousel = (function () {
		
		var	init = function () {
			clickThumb($(thumbs + ' a'));
			autoCycleOn = true;
			pauseAutoCycle('.slides'); // Pause when hoversing over a slide
			pauseAutoCycle(thumbs + ' a'); // Pause when hovering over a link
			killAutoCycle('.video-box a'); // Stop when you play a video
			$(document).ready(function(){ autoCycle; });
			slidePointer($(thumbs + '.current'));
		},
			
		thumbs = '.slidertray li',
		thumbsList = '.slidertray ul',
		noThumbs = $(thumbs).length,
		killedAutoCycle = false,
		cycleSpeed = 5000,
		fadeSpeed = 750,
		autoCycleOn,
		
		// Show slide
		showSlide = function(currentThumb){ 
			var id = currentThumb.attr('id').slice(0,-6); // remove "-thumb" from the id to get the name
			var content = '.slide.'+id; 
			if($(content).length !== 0){ 
				$('.slide').fadeOut();
				$(thumbs).removeClass('current');
				$(content).fadeIn(.5*fadeSpeed);
				currentThumb.addClass('current');
				slidePointer(currentThumb);
			}
		},
	
		clickThumb = function(thumbLink){
			thumbLink.click(function(){
				thumb = $(this).parents('li'); 
				showSlide(thumb);
				//clearInterval(autoCycle);
				//autoCycle = setInterval(cycleAll, cycleSpeed);
				return false; 
			});
		},
	
			
		// Cycle selected slide
		cycleAll = function(){
			if(autoCycleOn){
				if (noThumbs > 4){
					if ($(thumbs + '.current').index() < 4) {
						nextThumb = $(thumbs + '.current').next();
					}
					else{
						nextThumb = $(thumbs).eq(0);
					}
					showSlide(nextThumb);	
				}
			}
		},
		
		//Auto-cycle Thumbs
		autoCycle = setInterval(cycleAll, cycleSpeed);
		
		// Pause the auto-cycle
		pauseAutoCycle = function(element){
			if(autoCycleOn){
				$(element).hover(function() {
					 clearInterval(autoCycle);
				}, function() {
					if (!killedAutoCycle){
						autoCycle = setInterval(cycleAll, cycleSpeed)
					}
				});
			}
		},
		
		// End the cycling if they click a slide, assuming that 
		// it's a video or they're leaving the page
		killAutoCycle = function(element){
			$(element).click(function() {
				killedAutoCycle = true;
				clearInterval(autoCycle);
			});
		};	
	
		$(init);
	}());
	
});

any help would be appreciated!

[billboy]

Where on your page is this;

<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/sliderscript.js" type="text/javascript"></script>

it should be between <head> </head>

[felgall]

Originally Posted by billboy

it should be between <head> </head>

No it shouldn't.

With rare exceptions all JavaScript should go immediately before the </body> tag. If you put it in the head then it slows the loading of the page and you need extra code to delay running it until after the page has loaded.

[billboy]

Originally Posted by felgall

No it shouldn't.

With rare exceptions all JavaScript should go immediately before the </body> tag. If you put it in the head then it slows the loading of the page and you need extra code to delay running it until after the page has loaded.

correct, my bad sorry for any confusion to the OP

[cozart]

moving those two scripts to before the </body> tag did the trick.

thanks!