$(“#slider”).easySlider is not a function

StackOverflow https://stackoverflow.com/questions/8592170

  •  24-03-2021
  •  | 
  •  

سؤال

I'm not used to work with jQuery, but I thought to use the easyslider for showing some pictures on my website. The problem is that I get this error: $("#slider").easySlider is not a function I don't know what I have done wrong, because if I open the page alone, there is no problem, but when I place the file back between others it won't work. Here's my code : 

    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/easySlider1.7.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){   
            $("#slider").easySlider({
                auto: true, 
                continuous: true
            });
        }); 
    </script>

<div class="block">
    <div class="m950 flb">  

<div id="slider" style="position:relative; width:947px; height:615px; left:-20px;  top:-3px; overflow:hidden;">
<ul>                
                <li><img src="/images/slideshow/1.jpg" /></li>
        <li><img src="/images/slideshow/2.jpg" /></li>
        <li><img src="/images/slideshow/3.jpg" /></li>
        <li><img src="/images/slideshow/4.jpg" /></li>
        <li><img src="/images/slideshow/5.jpg" /></li>
                <li><img src="/images/slideshow/6.jpg" /></li>
        <li><img src="/images/slideshow/7.jpg" /></li>
        <li><img src="/images/slideshow/8.jpg" /></li>
        <li><img src="/images/slideshow/9.jpg" /></li>
        <li><img src="/images/slideshow/10.jpg" /></li>

</ul>
</div>



</div>
</div>

Does someone know what I could do to make it work, because I've been braking my head for this problem.

Thank you so much in advance!

هل كانت مفيدة؟

المحلول

Try this: 

 <script type="text/javascript">
( function($) {
    // we can now rely on $ within the safety of our “bodyguard” function
    $(document).ready( function() { 
            $("#slider").easySlider({
                auto: true, 
                continuous: true
            });
              } );
} ) ( jQuery );

</script>

It's a way around it.

نصائح أخرى

It sounds like you may be moving the file around and have broken the reference paths to your javascript files.

if I open the page alone, there is no problem, but when I place the file back between others it won't work.

If you view page source and click on the link to your javascript file, does it load? If not then the path is wrong. If you post more information about your directory structure then someone may be able to help you out with that. Or you could just use a full path instead of your relative path.

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider1.7.js"></script>
<script type="text/javascript" src="http://mysite.com/js/jquery.js"></script>
<script type="text/javascript" src="http://mysite.com/js/easySlider1.7.js"></script>

You are probably loading jQuery twice as you add the page you showed to your main page. Double check jquery is not loaded in your <head> section.

In case it is happening, keep the loading in only one place, i.e. if the slider is only needed in this specific page but jQuery is needed application wide, then keep jQuery loading in your <head> and leave easySlider loading in that page. (but don't forget to load jquery only once!)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top