Jquery Fancybox不工作?可能是脚本?

Jquery Fancybox不工作?可能是脚本?,jquery,html,css,fancybox,Jquery,Html,Css,Fancybox,你好,飞越者- 在这个网站上有点困惑,想从我做错的事情中找到一个可靠的答案吗目前,此页面上的链接不起作用,这是阅读更多: Fancybox是一个相当简单的“复制粘贴”教程,我在另外两个网站上使用过它,所以我对它相当熟悉;公平地说,这其实没那么难!这就是为什么我在这里发问,因为我知道像这样的简单问题会降低堆栈溢出的质量,但是没有论坛或其他主题可以解决我的问题;所以这是我最后的选择 我已经使用firebug查看了该站点,当我查看脚本时,它再次在脚本中重新加载我的当前页面,而不是JS文档,但路径是10

你好,飞越者-

在这个网站上有点困惑,想从我做错的事情中找到一个可靠的答案吗目前,此页面上的链接不起作用,这是阅读更多:

Fancybox是一个相当简单的“复制粘贴”教程,我在另外两个网站上使用过它,所以我对它相当熟悉;公平地说,这其实没那么难!这就是为什么我在这里发问,因为我知道像这样的简单问题会降低堆栈溢出的质量,但是没有论坛或其他主题可以解决我的问题;所以这是我最后的选择

我已经使用firebug查看了该站点,当我查看脚本时,它再次在脚本中重新加载我的当前页面,而不是JS文档,但路径是100%正确的

他们在装货吗

我的代码如下:

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pixelize.net - Digital & Web Design Agency</title>
<link rel="stylesheet" href="http://pixelize.net/wp-content/themes/blue-and-grey/style.css" type="text/css" media="screen" />
<!--[if lt ie 8]><link rel="stylesheet" href="http://pixelize.net/wp-content/themes/blue-and-grey/styles/ie7.css" type="text/css" /><![endif]-->
<!--[if lt ie 7]><link rel="stylesheet" href="http://pixelize.net/wp-content/themes/blue-and-grey/styles/ie6.css" type="text/css" /><![endif]-->
<link rel="pingback" href="http://pixelize.net/xmlrpc.php" />

<!--FANCYBOX-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pixelize.net/wp-content/themes/blue-and-grey/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="http://www.pixelize.net/wp-content/themes/blue-and-grey/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<!--FANCY BOX JQUERY-->
<script>
jQuery(document).ready(function() { 
/* This is basic - uses default settings */
$("a#single_image").fancybox();

/* Using custom settings */
$("a.inline").fancybox({
    'hideOnContentClick': true
});

/* Apply fancybox to multiple items */  
$("a.group").fancybox({
    'transitionIn'  :   'elastic',
    'transitionOut' :   'elastic',
    'speedIn'       :   1000, 
    'speedOut'      :   800, 
    'overlayShow'   :   false
});
});
</script>

<!--NivoSlider-->
<link rel="stylesheet" href="http://www.pixelize.net/wp-content/themes/blue-and-grey/default/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.pixelize.net/wp-content/themes/blue-and-grey/default/default.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://www.pixelize.net/wp-content/themes/blue-and-grey/default/jquery.nivo.pack.slider.js" type="text/javascript"></script>
<script src="http://www.pixelize.net/wp-content/themes/blue-and-grey/default/jquery.nivo.slider.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: '', // Prev directionNav text
        nextText: '', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
});
</script>

<!--End Of NivoSlider-->
<link rel="alternate" type="application/rss+xml" title="Pixelize  - Digital &amp; Web Design Agency &raquo; Feed" href="http://pixelize.net/feed/" />
<link rel="alternate" type="application/rss+xml" title="Pixelize  - Digital &amp; Web Design Agency &raquo; Comments Feed" href="http://pixelize.net/comments/feed/" />
<link rel='stylesheet' id='admin-bar-css'  href='http://pixelize.net/wp-includes/css/admin-bar.css?ver=20111209' type='text/css' media='all' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://pixelize.net/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://pixelize.net/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='works' href='http://pixelize.net/works/' />
<link rel='next' title='blog' href='http://pixelize.net/blog/' />
<meta name="generator" content="WordPress 3.3.1" />
<link rel='canonical' href='http://pixelize.net/services/' />
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }
</style>

</head>
<body class="page page-id-5 page-template page-template-services-php logged-in admin-bar" style="border-top: 10px solid #FFFFFF;">
<div class="header">
<div class="pixelize-searchform">
    <form method="get" class="searchform" action="http://pixelize.net/">
        <fieldset>
                <input type="text" value="" name="s" id="s" />
                <button type="submit" id="searchsubmit" value="Search">search</button>
        </fieldset>
    </form>

</div>
<div class="header-menu">
<ul class="menu"><li class="page_item page-item-10"><a href="http://pixelize.net/blog/"><span><span>blog</span></span></a></li>
<li class="page_item page-item-2"><a href="http://pixelize.net/works/"><span><span>works</span></span></a></li>
<li class="page_item page-item-5 current_page_item"><a href="http://pixelize.net/services/"><span><span>services</span></span></a></li>
<li class="page_item page-item-27"><a href="http://pixelize.net/"><span><span>home</span></span></a></li>
</ul></div>
</div>

<div class="content">
<div class="main">              

<div class="post-5 page type-page status-publish hentry" id="post-5">
<h1 class="content-title">services</h1>

<div class="pixelize-stretchbg">
<img src="http://pixelize.net/wp-content/themes/blue-and-grey/images/internet.png" style="margin-top:5px;" alt="Pixelize Internet Services" height="100" width="100" />
<h2>Website Design</h2>
<p>At Pixelize we design and develop web sites that are tailored to suit your business needs, we aim to significantly increase your sales and expand your client base. After meetings and topics have been discussed we will ask for the informative criteria to follow from your detailed brief that outlines your business objectives; we approach each web design project with both creative and commercial results in mind.</p>
<ul>
<li><a class="inline" href="#data">Read More</a></li>
<span style="color:#000000;"> | </span>
<li><a class="inline" href="#data2">View 'Folio</a></li>
</ul>
<div style="display:none">

<div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div style="display:none">
<div id="data2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="clear"></div>

<div class="pixelize-maxinside">
<img src="http://pixelize.net/wp-content/themes/blue-and-grey/images/chart.png" style="margin-top:10px;" alt="Search Engine Optimization and Marketing Services" height="100" width="100" />
<h2>Search Engine Optimization and Marketing Services</h2>
<p>Once your website is designed exactly to your needs! Our next step is to increase the rankings of your website, Search Engine Optimisation (SEO) helps to increase your website rankings in an organic way, (to ensure that search engines do not recognise your website as generic spam). Better visibility in the search engines and a marketing campaign pinpointed to your exact demographic will ensure that no website downfalls will exist.</p>
<ul><li><a href="#" style="color: #F900CD;">Read More</a></li><span style="color:#000000;"> | </span><li><a href="#" style="color: #F900CD;">View 'Folio</a></li></ul>

</div>
<div class="clear"></div>

<img src="http://pixelize.net/wp-content/themes/blue-and-grey/images/logoservice.png" alt="Graphic & Logo Design Services" height="100" width="100" />
<h2>Graphic & Logo Design</h2>
<p>Graphic and logo design can take many forms, from magazine advertising, POS material, packaging and event leaflet design. Pixelize holds years of experience in all areas of print, brand and web development. We tackle all areas of graphic design with our creative designers that approach every project from a completely different angle.</p>
<ul><li><a href="#" style="color: #F900CD;">Read More</a></li><span style="color:#000000;"> | </span><li><a href="#" style="color: #F900CD;">View 'Folio</a></li></ul>
<div class="clear"></div>

<div class="pixelize-maxinside">

<img src="http://pixelize.net/wp-content/themes/blue-and-grey/images/logo.png" style="margin:40px 5px 0px 5px;" alt="Branding Services" width="101" />
<h2>Branding Services</h2>
<p>Your brand and your corporate identity is key to any companies success, It represents the face of the company and the information and expectations that your customers associate your company with. This therefore makes your brand the most powerful element within your company. At Pixelize we will target your demographic to gain an understanding of the needs that are required to develop your new found brand to perform at its very best.</p>
<ul><li><a href="#" style="color: #F900CD;">Read More</a></li><span style="color:#000000;"> | </span><li><a href="#" style="color: #F900CD;">View 'Folio</a></li></ul>
</div>
<div class="clear"></div>

<img src="http://pixelize.net/wp-content/themes/blue-and-grey/images/video.png" alt="Video Services" height="100" width="100" />
<h2>Video Services</h2>
<p>Pixelize offering a one of a kind bespoke video service, offered through our graduate scheme. Specialising in event and corporate filming. We create professional cinematic products shot in full HD, using innovative techniques and shooting styles to ensure a high standard and original end product, perfect for your business or even memories of your special day.</p>

<ul><li><a href="#" style="color: #F900CD;">Read More</a></li><span style="color:#000000;"> | </span><li><a href="#" style="color: #F900CD;">View 'Folio</a></li></ul>

</div>

<div class="clear"></div>           
<p><a class="post-edit-link" href="http://pixelize.net/wp-admin/post.php?post=5&amp;action=edit" title="Edit Page">Edit this entry.</a></p></div>


</div></div>
<div class="pixelize-footer">
<ul>
<li><a href="http://www.pixelize.net">home</a></li>

<li>services</li>
<li>our work</li>
<li>about</li>
<li style="margin-right:0px;">contact</li>
</ul>
</div>
<script type='text/javascript' src='http://pixelize.net/wp-includes/js/admin-bar.js?ver=20111130'></script>
        <div id="wpadminbar" class="nojq nojs" role="navigation">
            <div class="quicklinks">
                <ul id="wp-admin-bar-root-default" class="ab-top-menu">

        <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://pixelize.net/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
        <li id="wp-admin-bar-about" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/about.php">About WordPress</a>     </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
        <li id="wp-admin-bar-wporg" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org">WordPress.org</a>     </li>
        <li id="wp-admin-bar-documentation" class=""><a class="ab-item" tabindex="10" href="http://codex.wordpress.org">Documentation</a>       </li>
        <li id="wp-admin-bar-support-forums" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/support/">Support Forums</a>      </li>

        <li id="wp-admin-bar-feedback" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/support/forum/requests-and-feedback">Feedback</a>       </li></ul></div>        </li>
        <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://pixelize.net/wp-admin/">Pixelize - Digital &amp; Web Design Agen&hellip;</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
        <li id="wp-admin-bar-dashboard" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/">Dashboard</a>        </li></ul><ul id="wp-admin-bar-appearance" class=" ab-submenu">
        <li id="wp-admin-bar-themes" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/themes.php">Themes</a>        </li>

        <li id="wp-admin-bar-widgets" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/widgets.php">Widgets</a>     </li>
        <li id="wp-admin-bar-menus" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/nav-menus.php">Menus</a>       </li></ul></div>        </li>
        <li id="wp-admin-bar-updates" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/update-core.php" title="1 Plugin Update"><span class="ab-icon"></span><span class="ab-label">1</span></a>        </li>
        <li id="wp-admin-bar-comments" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/edit-comments.php" title="2 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-2">2</span></a>      </li>

        <li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://pixelize.net/wp-admin/post-new.php" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
        <li id="wp-admin-bar-new-post" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/post-new.php">Post</a>      </li>
        <li id="wp-admin-bar-new-media" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/media-new.php">Media</a>       </li>
        <li id="wp-admin-bar-new-link" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/link-add.php">Link</a>      </li>
        <li id="wp-admin-bar-new-page" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/post-new.php?post_type=page">Page</a>       </li>

        <li id="wp-admin-bar-new-user" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/user-new.php">User</a>      </li></ul></div>        </li>
        <li id="wp-admin-bar-edit" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/post.php?post=5&#038;action=edit">Edit Page</a>     </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
        <li id="wp-admin-bar-search" class=" admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://pixelize.net/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" tabindex="10" type="text" value="" maxlength="150" /><input type="submit" class="adminbar-button" value="Search"/></form></div>        </li>
        <li id="wp-admin-bar-my-account" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://pixelize.net/wp-admin/profile.php" title="My Account">Howdy, admin</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class=" ab-submenu">
        <li id="wp-admin-bar-user-info" class=""><a class="ab-item" tabindex="-1" href="http://pixelize.net/wp-admin/profile.php"><span class='display-name'>admin</span></a>       </li>

        <li id="wp-admin-bar-edit-profile" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-admin/profile.php">Edit My Profile</a>        </li>
        <li id="wp-admin-bar-logout" class=""><a class="ab-item" tabindex="10" href="http://pixelize.net/wp-login.php?action=logout&#038;_wpnonce=470065bb4c">Log Out</a>       </li></ul></div>        </li></ul>          </div>
        </div>

        </body>
</html>
另外-供您参考,这是花式盒子链接:

我错过了一些简单的事情吗?提前感谢您。

在您的nivoSlider中,您正在向jQuery添加另一个脚本引用,它将覆盖jQuery对象,从而使jQuery.fancybox不再存在

从nivoSlider代码中删除以下脚本块:

在nivoSlider中,您正在向jQuery添加另一个脚本引用,它将覆盖jQuery对象,从而使jQuery.fancybox不再存在

从nivoSlider代码中删除以下脚本块:


您缺少开头标记。
首先要修复并尝试

您缺少开头标记。
首先要修复并尝试

当我移除它时,我的Nivoslider不工作,仍然无法修复它:/当我移除它时,我的Nivoslider不工作,仍然无法修复它:/done and done。但还是没有运气:-还有什么想法吗?做了,做了。但仍然没有运气:-还有其他想法吗?你的网站可以在Firefox和Chrome上运行,但不能在IE上运行。。。愚蠢与否,但DOCTYPE必须是文档的第一行没有注释或空格,才能使fancybox v1.3.x与IEyou正常工作知道吗-我厌倦了左右和中间的一切-仍在播放,但只是回到它,并注意到它突然工作,我现在不打算讨论它,但会解决IE的问题:谢谢:@Owen:它现在起作用的原因是nivoSlider代码放在fancybox代码之上。jquery.min.js只加载一次,并且在fancybox-1.3.4.js之前加载一次,因此不会覆盖扩展了$.fn.fancybox的jquery定义。您的站点在Firefox和Chrome中工作,但在IE中不工作。。。愚蠢与否,但DOCTYPE必须是文档的第一行没有注释或空格,才能使fancybox v1.3.x与IEyou正常工作知道吗-我厌倦了左右和中间的一切-仍在播放,但只是回到它,并注意到它突然工作,我现在不打算讨论它,但会解决IE的问题:谢谢:@Owen:它现在起作用的原因是nivoSlider代码放在fancybox代码之上。jquery.min.js只加载一次,并且在fancybox-1.3.4.js之前加载一次,因此不会覆盖扩展了$.fn.fancybox的jquery定义。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>