1
你好Stackoverflowers -Fancybox無法正常工作？可能是腳本？
有點在這個網站混淆，並尋找一個堅實的答案，在我做錯了什麼？ - 目前，此頁面上的鏈接不能正常工作，這是更多：
的fancybox是一個相當簡單的「複製和粘貼」的教程，我已經在使用它另外兩個網站，所以我對它很熟悉;爲了公平起見，這並不是那麼困難！這就是爲什麼它錯誤地問我在這裏，因爲我知道這樣簡單的問題可以降低堆棧溢出的質量，但沒有論壇或其他主題正在解決我的問題;所以這是我的最後一招。
我已經使用螢火蟲查看了該網站，當我查看腳本的時候，它將在腳本中重新加載當前頁面而不是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 & Web Design Agency » Feed" href="http://pixelize.net/feed/" />
<link rel="alternate" type="application/rss+xml" title="Pixelize - Digital & Web Design Agency » 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&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 & Web Design Agen…</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&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&_wpnonce=470065bb4c">Log Out</a> </li></ul></div> </li></ul> </div>
</div>
</body>
</html>
而且 - 供大家參考，這是看中箱鏈接：http://fancybox.net/howto
我錯過了簡單的東西？
您的網站可以在Firefox和Chrome瀏覽器中使用，但IE瀏覽器不支持IE瀏覽器......無論如何，「DOCTYPE」必須是文檔的第一行（無評論或空格）才能使fancybox v1.3.x正常工作與IE – JFK 2012-03-13 21:38:14
你知道什麼 - 我累了一切左右和中心 - 仍在玩，但剛回來並注意到它突然起作用，我現在不會爭論它，但將解決IE問題:)謝謝:) – 2012-03-13 22:57:11
@Owen：現在它的工作原理是'nivoSlider'代碼放在'fancybox'代碼的上方。 'jquery.min.js'只加載一次，*在'fancybox-1.3.4.js'之前，因此不會覆蓋'$ .fn.fancybox'所具有的'jQuery'的任何定義已延長。 – 2012-03-14 06:14:10