Fancybox Box Isn't Working After I Upload It To Webhost But Works On Localhost

http://www.outofthegardendesigns.com any thoughts? I think it has something to do with the pathing but I'm not sure what I'm doing wrong.

Solution 1:

You are adding jQuery multiple times.

Two times from this url js/libs/jquery-1.7.1.js and then again with google cdn and again a fallback if google cdn is offline. I guess, this is causing conflict. Since, on your localhost you may be offline, google cdn jQuery is not loading and everything is working fine. But when you open it in server, google cdn jQuery tries to load and takes time and throws an error.

Solution 2:

Your links to fancybox and jquery is not correct. You have :

<script src="js/libs/jquery-1.7.1.js" type="text/javascript"></script>
<script src="fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>

You need to add "/" at the begining of the links like:

<script src="/js/libs/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>

After removing extra jquyer link, your code should be look like this:

<script src="/js/libs/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function(){

        $('.b2').animate({
            opacity:.0

        });

        $('.b2').hover(function(){
            $(this).stop().animate({opacity:1});


        }, function(){
            $(this).stop().animate({opacity:0});

        });


    });
</script>


<!--FANCY BOX-->
<script src="/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>