JQuery Slider

JavaScript
1

Hi there,

I am trying to develop a Slider for my photo gallary and its not working the way i am wanting it i am recieving this error

i have downloaded jquery from the jquery website and i am recieve this error

jquery.ui.mouse.js:13Uncaught ReferenceError: jQuery is not defined
jquery.ui.slider.js:16Uncaught ReferenceError: jQuery is not defined
test.html:179Uncaught ReferenceError: $ is not defined

Now this is my code i am using


<script src="jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script> 
    <script src="jquery-ui-full-1.5.2.min.js" type="text/javascript" charset="utf-8"></script> 
    <script src="jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="jquery.ui.slider.js" type="text/javascript"></script>    
    <script type="text/javascript" charset="utf-8"> 
        window.onload = function () {
            var container = $('div.sliderGallery');
            var ul = $('ul', container);
            
            var itemsWidth = ul.innerWidth() - container.outerWidth();
            
            $('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 500);
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });
        };
    </script> 
 <div class="sliderGallery">
                  <ul class="items">
                    <li>Item one</li>
                    <li>Item two</li>
                    <li>Item three, etc...</li>
                  </ul>
                  <div class="slider">
                    <!-- the handler to action the slide -->
                    <div class="handle"></div>
                    <!-- labels appear against the slider, as pointers to the user -->
                    <span class="slider-lb1">slider label 1</span>
                    <span class="slider-lb2">slider label 2</span>
                    <span class="slider-lb3">slider label 3</span>
                  </div>
                </div>

Why do i get those errors? what am i doing wrong?

Can anyone help me out here?

Thanks,William

2

I fixed that but not sure why those errors are being displayed though

3

I have used jQuery a lot in the past, but I have never used the slider.

In the head, you have:

<script charset="utf-8" type="text/javascript" src="jquery-ui-full-1.4.2.min.js"></script>

But the javascript file can’t be found. Is your path incorrect? Or maybe you didn’t upload the file to the correct location.

I’d start with that, and go from there.

4

ive fixed it and now i am getting this error


test.html:7<style> is not allowed inside <html>. Moving <style> into the <head>.
jquery.ui.mouse.js:15Uncaught TypeError: Object function ( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context );
	} has no method 'widget'
jquery.ui.slider.js:22Uncaught TypeError: Cannot read property 'mouse' of undefined
test.html:184Uncaught TypeError: Object #<an Object> has no method 'slider'

Webpage is located here

Why do i get these errors?

Thanks,William

5

Hi William. You mention that the slider is not working the way you want. But does that mean it’s working at all? My first question would be (perhaps overly obvious), but is this file path correct?

src=“jquery-1.2.6.js”

That implies that the jquery file is in the same directory as the slider page. Often the jquery scripts will be contained in a /js/ directory (or similarly named).

If you have a live link to the page, that would be a great help.