JQuery not working. (Function)

Question

So when I put

$(document).ready(function() {
    $(".fancybox").fancybox();
});

at the top of this

$(function() {  
    jQuery.scrollSpeed(1920, 800); 
});

$(document).ready(function(e) {
    $("#open-io").click(function (){
        //console.log("asdfasdf");
        $("#navi").addClass("expand");
    });

    $("#close-io").click(function (){
        //console.log("asdfasdf");
        $("#navi").removeClass("expand");
    });
});

Is not working all.

But if I put the top one to the bottom one look like this

$(function() {  
    jQuery.scrollSpeed(1920, 800); 
});

$(document).ready(function(e) {
    $("#open-io").click(function (){
        //console.log("asdfasdf");
        $("#navi").addClass("expand");
    });

    $("#close-io").click(function (){
        //console.log("asdfasdf");
        $("#navi").removeClass("expand");
    });
});

$(document).ready(function() {
    $(".fancybox").fancybox();
});

The smooth scroll is working but the fancybox is not working. Help me on this. I'm newbie might hard to understand.

This is inside my body/body

<script src="js/modernizr.custom.37797.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jQuery.scrollSpeed.js"></script>
<script src="js/parallax.js"></script>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="fancybox/source/jquery.fancybox.pack.js"></script>
<script src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<script type="text/javascript">
  $(function() {
    jQuery.scrollSpeed(1920, 800);
  });

  $(document).ready(function(e) {
    $("#open-io").click(function() {
    //console.log("asdfasdf");
    $("#navi").addClass("expand");
  });

  $("#close-io").click(function() {
    //console.log("asdfasdf");
    $("#navi").removeClass("expand");
  });
</script>

<script type="text/javascript">
  $(document).ready(function() {
    $(".fancybox").fancybox();
  });
</script>

This is the link

<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>

This is what Console show,

Horizontal_MouseWheel_Parallax.html:6 GET file:///C:/fancybox/source/jquery.fancybox.css net::ERR_FILE_NOT_FOUND Horizontal_MouseWheel_Parallax.html:217 GET file:///C:/js/modernizr.custom.37797.js net::ERR_FILE_NOT_FOUND Horizontal_MouseWheel_Parallax.html:218 GET file:///C:/js/jQuery.scrollSpeed.js net::ERR_FILE_NOT_FOUND Horizontal_MouseWheel_Parallax.html:219 GET file:///C:/js/parallax.js net::ERR_FILE_NOT_FOUND Horizontal_MouseWheel_Parallax.html:221 GET file:///C:/fancybox/lib/jquery.mousewheel-3.0.6.pack.js net::ERR_FILE_NOT_FOUND Horizontal_MouseWheel_Parallax.html:222 GET file:///C:/fancybox/source/jquery.fancybox.pack.js net::ERR_FILE_NOT_FOUND Horizontal_MouseWheel_Parallax.html:227 Uncaught TypeError: jQuery.scrollSpeed is not a function(anonymous function) @ Horizontal_MouseWheel_Parallax.html:227j @ jquery-latest.min.js:2k.fireWith @ jquery-latest.min.js:2m.extend.ready @ jquery-latest.min.js:2J @ jquery-latest.min.js:2

Answer 1

Okay. I just done it properly.

So I rearrange the JQuery and I also remove 1 of the

jquery.min.js

So overall look like this

<script src="js/modernizr.custom.37797.js"></script> 
<script src="js/jquery.min.js"></script>
<script src="js/jQuery.scrollSpeed.js"></script>
<script src="js/parallax.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

For the $(document).ready(function() { I also use the one that you helpe me arrange properly.

$(document).ready(function() {   

jQuery.scrollSpeed(1920, 800);
$(".fancybox").fancybox();

$("#open-io").on('click', function (){
 //console.log("asdfasdf");
 $("#navi").addClass("expand");
});

$("#close-io").on('click', function (){
 //console.log("asdfasdf");
 $("#navi").removeClass("expand");
});

});

And also I did not add the slash to my path. If I add it, it will not working.

Working

fancybox/source/jquery.fancybox.pack.js

Not Working

/fancybox/source/jquery.fancybox.pack.js

Answer 2

It could be a few things but I would do the following to troubleshoot the issue:

1) Rearrange your JavaScript imports as follows. Also, add a leading slash (/) to the source paths otherwise the imports won't work on nested pages (you should use absolute paths, your paths are currently relative).

(I've also removed a duplicate jQuery import)

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />    

<script src="http://code.jquery.com/jquery-latest.min.js"></script>   
<script src="/js/modernizr.custom.37797.js"></script> 
<script src="/js/jQuery.scrollSpeed.js"></script>
<script src="/js/parallax.js"></script>

<script src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script src="/fancybox/source/jquery.fancybox.pack.js"></script>

2) Merge the JavaScript into one $(document).ready function:

(I've also updated your .click handlers into the recommended .on handler instead)

// This could also start with the following line
// $(function() {
$(document).ready(function() {   

  jQuery.scrollSpeed(1920, 800);
  $(".fancybox").fancybox();

  $("#open-io").on('click', function (){
    //console.log("asdfasdf");
    $("#navi").addClass("expand");
  });

  $("#close-io").on('click', function (){
    //console.log("asdfasdf");
    $("#navi").removeClass("expand");
  });

});

Try this and see if helps.

Let me know what you find.