Jquery fancybox在我的网站中不工作_Jquery_Fancybox

Jquery fancybox在我的网站中不工作

jquery

Jquery fancybox在我的网站中不工作,jquery,fancybox,Jquery,Fancybox,我没有html5或css方面的专业知识。但是，我仍然在努力构建一个投资组合网站。我有一些照片，我想在我的网站上展示，我想使用fancybox。但是，它不起作用。我在一个新的页面中打开图像，这是我不需要的。另外，我正在尝试垂直滚动（带有垂直滚动的单页网站）。以下是我的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

我没有html5或css方面的专业知识。但是，我仍然在努力构建一个投资组合网站。我有一些照片，我想在我的网站上展示，我想使用fancybox。但是，它不起作用。我在一个新的页面中打开图像，这是我不需要的。另外，我正在尝试垂直滚动（带有垂直滚动的单页网站）。以下是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head><title>Sketches</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/font.css" media="all"></link>
    <link rel="stylesheet" href="css/style_vertical.css" type="text/css" media="screen"/>

      <!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="../js/jquery.jscrollpane.min.js"></script>

<!-- EasySlider -->
<script type="text/javascript" src="../js/easySlider.js"></script>

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

<!-- fancybox transitions -->
<script type="text/javascript" src="../js/fancybox/jquery.easing-1.3.pack.js"></script>

<script>
$(function()
{
    $('.scroll-pane').jScrollPane();
});

</script>  

<script>
$(document).ready(function(){   
    $("#slider").easySlider({
        auto: true,
        continuous: true 
    });
});

</script> 

<script>
$(document).ready(function(){   
    $(".fancybox").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });


});
</script>

    </head>
    <style>
        a{
            color:#fff;
            text-decoration:none;
        }
        a:hover{
            text-decoration:underline;
        }
        span.reference{
            position:fixed;
            left:10px;
            bottom:10px;
            font-size:13px;
            font-weight:bold;
        }
        span.reference a{
            color:#fff;
            text-shadow:1px 1px 1px #000;
            padding-right:20px;
        }
        span.reference a:hover{
            color:#ddd;
            text-decoration:none;
        }

    </style>
    <body>

        <div class="section black" id="section1">
            <P>LETS CHECK IF THIS WORKS</P>
            <div class="photo-gallery" id="">
                        <a class="fancybox" rel="group" href="images/sketches/01.jpg"><img src="thumbnails/Sketches/01.jpg" alt="" /></a>
                        <a class="fancybox" rel="group" href="images/sketches/02.jpg"><img src="thumbnails/Sketches/02.jpg" alt="" /></a>
            </div>          
            <ul class="nav">
                <li>1</li>
                <li><a href="#section2">2</a></li>
                <li><a href="#section3">3</a></li>
            </ul>
        </div>
        <div class="section white" id="section2">
            <h2>Section 2</h2>
            <p>
                ‘A fathomless and boundless deep,
                There we wander, there we weep;
                On the hungry craving wind
                My Spectre follows thee behind.

            </p>
            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li>2</li>
                <li><a href="#section3">3</a></li>
            </ul>
        </div>
        <div class="section black" id="section3">
            <h2>Section 3</h2>
            <p>
                ‘He scents thy footsteps in the snow
                Wheresoever thou dost go,
                Thro’ the wintry hail and rain.
                When wilt thou return again?

            </p>
            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li><a href="#section2">2</a></li>
                <li>3</li>
            </ul>
        </div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>      
        <script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('ul.nav a').bind('click',function(event){
                    var $anchor = $(this);

                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
            });
        </script>
    </body>
</html>


草图
$（函数（）
{
$（'.scroll pane'）.jScrollPane（）；
});
$（文档）.ready（函数（）{
$（“#滑块”）.easySlider({
是的，
连续的：对
});
});
$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox({
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“speedIn”：600，
“加速输出”：200，
“叠加显示”：错误
});
});
a{
颜色：#fff；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
span.reference{
位置：固定；
左：10px；
底部：10px；
字体大小：13px；
字体大小：粗体；
}
参考文献a{
颜色：#fff；
文本阴影：1px 1px 1px#000；
右边填充：20px；
}
参考a：悬停{
颜色：#ddd；
文字装饰：无；
}
 让我们检查一下这是否有效

一,



第二节

"深不可测,深不可测,，
我们在那里徘徊，在那里哭泣；
在饥渴的风中
我的幽灵跟在你后面。



二,


第三节

“他在雪地里嗅到你的脚步声
无论你去哪里，
穿过冬日的冰雹和雨水。
你什么时候再来？




三,

$（函数（）{
$（'ul.nav a'）.bind（'click'，函数（事件）{
var$anchor=$（此）；
$（'html，body'）.stop（）.animate({
scrollTop:$（$anchor.attr（'href'））.offset（）.top
}，1500年，“easeInOutExpo”）；
/*
如果不想使用缓和效果，请执行以下操作：
$（'html，body'）.stop（）.animate({
scrollTop:$（$anchor.attr（'href'））.offset（）.top
}, 1000);
*/
event.preventDefault（）；
});
});

您的JS文件未加载：

确保它们位于Web服务器上相对于HTML文件的正确位置，或者使用绝对URL。我觉得您可能无意将

。/

放在资源URL前面。

我希望您不要忘记设置正确的

DOCTYPE

。我希望您验证了文件的路径是否正确，以便正确加载。我希望您没有忘记fancybox css文件。另外，不要在

和

标记之间放置任何东西。您的

标记（它应该

）最好放在

标记内。如果以上所有内容都正常，但仍然无法正常工作，我希望您不介意共享一个链接，以便我们可以查看。

草图

我检查了您提到的所有其他内容，仍然没有任何内容。这是一个示例页面：另外，当鼠标悬停在（或）上方时，图像是否可能“弹出”？我感谢所有的帮助。非常感谢您…查看您的控制台..未捕获类型错误：对象[Object Object]没有方法显示“jScrollPane”错误..这就是fancy box没有运行的原因..我清除了在chrome中发现的错误。现在，我得到了以下信息：

uncaughttypeerror:Object[Object Object Object]没有方法'jScrollPane'index_vertical.html:30（匿名函数）index_vertical.html:30 c.extend.ready jquery.min.js:26 L jquery.min.js:33

请提供帮助。我尝试注释所有滚动窗格函数，但现在，它给出了fancybox第47行的错误：

uncaughttypeerror:Object[Object Object]没有方法“fancybox”索引\u vertical.html:47（匿名函数）索引\u vertical.html:47 c.extend.ready jquery.min.js:26 L jquery.min.js:33