开发者

Can't get fancybox to work

I am new to jquery, so I apologize because I am sure this is super easy. Spent half the day trying to figure this out and still got no where.

I have another jquery script running and it is running correctly. I tried adding fancyfox and it just will not work. I even tried to create it own page just to see if I can get it to work and no such luck. I really have no idea what I am doing wrong. I pasted the pages code below. Any help is extremely appreciated. I am also using dreamweaver and noticed that the .js files for the other jquery are attached. I have no idea how I got them attached, but I do not see the .js files for fancybox.

    <!-- The JavaScript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>      
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    <script type="text/javascript" src="jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
    <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css"开发者_如何学Go type="text/css" media="screen" />
    <script type="text/javascript">
        $(function() {
            $('ul.nav a').bind('click',function(event){
                var $anchor = $(this);
                /*
                if you want to use one of the easing effects:
                $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1500,'easeInOutExpo');
                 */
                $('html, body').stop().animate({
                    scrollLeft: $($anchor.attr('href')).offset().left
                }, 1000);
                event.preventDefault();
            });
            $(".fancyimg").fancybox();
        });
    </script>
</body>


first of all

one of those lines are unnecessary

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>      
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

and i suggests you to remove the secend one because those to lines include the jquery lib but the fist one include the last version and the secend one include the version 1.4

now after that try this test to see if the "fancybox" are loaded

write this code

  alert($(".fancyimg").fancybox);

if it alert you undefined or null it a sign that the fancybox box not included. if it alert you lines of code it good. and the problem is not in the include it maybe in the html css or you dont definde the fancybox correctly.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜