<分区>
如果这是显而易见的，请原谅我，但我无法让我的 fancybox 工作。我知道我的自定义 javascript 正在向预览图像添加正确的类和 href 属性，但由于某种原因，浏览器无法识别我的 fancybox 函数。当我使用 Chrome DevTool 检查页面时，它给出了 "Uncaught TypeError:undefined is not a function" 的错误，我认为这意味着解析器无法识别 .fancybox( ) 函数。我的全尺寸图片有没有可能太大了？我敢肯定这是显而易见的事情，但是如果有人能启发我有关错误的信息，我们将不胜感激。
这是我的网站:Here
这是我的 HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="" />
<meta name="author" content="Brewmaster" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<title>Ryan M Brewer</title>
<link rel="stylesheet" type="text/css" href="includes/jquery.fancybox- 1.3.4/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Poller+One' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="includes/gallery.css" />
<link rel="stylesheet" href="../css/main-styles.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript" src="includes/farinspace/jquery.imgpreload.min.js"></script>
<script type="text/javascript" src="includes/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!--[if lt IE 9]>
<script src="js/ieshim/dist/html5shiv.js"></script>
<![endif]-->
<script type="text/javascript" src="includes/gallery.js"></script>
</head>
<body onLoad="">
<div class="contain">
<header id="header">
<div id="topSpacer"></div>
<div id="topbar">
<div class="topnav-container">
<nav class="topnav-left">
<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../index.html#about">ABOUT ME</a></li>
<li><a href="../index.html#contact">CONTACT ME</a></li>
</ul>
</nav>
<nav class="topnav-right">
<ul>
<li><a href="webdesign.html">WEB DESIGN</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="graphics.html">GRAPHICS</a></li>
</ul>
</nav>
<nav id="mobile-menu-tablet">
<button id="menuButton">MENU</button>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">CONTACT ME</a></li>
<li><a href="#">WEB DESIGN</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">VIDEOS</a></li>
</ul>
</nav>
<nav id="mobile-menu-phone">
<button id="mobileMenuButton">MENU</button>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT ME</a></li>
<li><a href="#">CONTACT ME</a></li>
<li><a href="#">WEB DESIGN</a></li>
<li><a href="#">PHOTOS</a></li>
<li><a href="#">VIDEOS</a></li>
</ul>
</nav>
<div class="logo-container"><a href="#"></a></div>
</div> <!--Closes topnav-container-->
</div> <!--Closes topbar-->
</header>
<body>
<div class="gallery_container">
<div class="gallery_credit"><h1>My Photography</h1></div>
<div class="clear_both"></div>
<div class="gallery_content">
<div class="gallery_thumbnails">
<a href="images/gallery/fireboat_fullsize.jpg" title="'Fireboat', Collection: Architecture"><img src="images/gallery/fireboat_thumbnail.jpg"/></a>
<a href="images/gallery/windows_fullsize.jpg" title="'Windows', Collection: Architecture"><img src="images/gallery/windows_thumbnail.jpg"/></a>
<a href="images/gallery/capitolflower_fullsize.jpg" title="'Capitol Flower', Collection: Architecture"><img src="images/gallery/capitolflower_thumbnail.jpg"/></a>
<a href="images/gallery/caughtintheteeth_fullsize.jpg" title="'Caught In The Teeth', Collection: Nature"><img src="images/gallery/caughtintheteeth_thumbnail.jpg"/></a>
<a href="images/gallery/crimsonbloom_fullsize.jpg" title="'Crimson Bloom', Collection: Nature"><img src="images/gallery/crimsonbloom_thumbnail.jpg"/></a>
<a href="images/gallery/familyisbeautiful_fullsize.jpg" title="'Family Is Beautiful', Collection: People"><img src="images/gallery/familyisbeautiful_thumbnail.jpg"/></a>
<a href="images/gallery/fanme_fullsize.jpg" title="'Fan Me', Collection: People"><img src="images/gallery/fanme_thumbnail.jpg"/></a>
<a href="images/gallery/flutterby_fullsize.jpg" title="'Flutterby', Collection: Nature"><img src="images/gallery/flutterby_thumbnail.jpg"/></a>
<a href="images/gallery/lightlyd_fullsize.jpg" title="'Light Lyd', Collection: People"><img src="images/gallery/lightlyd_thumbnail.jpg"/></a>
<a href="images/gallery/nicedew_fullsize.jpg" title="'Nice Dew', Collection: Nature"><img src="images/gallery/nicedew_thumbnail.jpg"/></a>
<a href="images/gallery/orangedream_fullsize.jpg" title="'Orange Dream', Collection: Nature"><img src="images/gallery/orangedream_thumbnail.jpg"/></a>
<a href="images/gallery/papabuddha_fullsize.jpg" title="'Papa Buddha', Collection: People"><img src="images/gallery/papabuddha_thumbnail.jpg"/></a>
<a href="images/gallery/pinkflamingos_fullsize.jpg" title="'Pink Flamingos', Collection: People"><img src="images/gallery/pinkflamingos_thumbnail.jpg"/></a>
<a href="images/gallery/redleaf_fullsize.jpg" title="'Red Leaf', Collection: Nature"><img src="images/gallery/redleaf_thumbnail.jpg"/></a>
<a href="images/gallery/satchel_fullsize.jpg" title="'Satchel', Collection: People"><img src="images/gallery/satchel_thumbnail.jpg"/></a>
<a href="images/gallery/scenicview_fullsize.jpg" title="'Scenic View', Collection: Architecture"><img src="images/gallery/scenicview_thumbnail.jpg"/></a>
<a href="images/gallery/stemout_fullsize.jpg" title="'Stem Out', Collection: Nature"><img src="images/gallery/stemout_thumbnail.jpg"/></a>
<a href="images/gallery/theroadatnight_fullsize.jpg" title="'The Road At Night', Collection: Nature"><img src="images/gallery/theroadatnight_thumbnail.jpg"/></a>
<a href="images/gallery/willitsfog_fullsize.jpg" title="'Willits Fog', Collection: Nature"><img src="images/gallery/willitsfog_thumbnail.jpg"/></a>
<a href="images/gallery/lightways_fullsize.jpg" title="'Lightways', Collection: Architecture"><img src="images/gallery/lightways_thumbnail.jpg"/></a>
<div class="clear_both"></div>
</div>
<div class="gallery_preview">
<a href="images/gallery/acrobats_large.jpg"></a>
</div>
<div class="clear_both"></div>
<div class="gallery_contact"><p><a class="contactLink" href="mailto:info@lynda.com">Contact Me</a></p></div>
<div class="gallery_caption"></div>
<div class="clear_both"></div>
<div class="gallery_preload_area"></div>
</div>
</div>
<div class="spacer"></div>
</body>
<footer>
<p>© Copyright 2013 - Ryan Michael Brewer</p>
</footer>
</html>
这是我的自定义 Javascript:
$(document).ready(function() {
// Set these DIVs to show for browsers suporting JavaScipt
$('.gallery_data').css('display','block');
$('.gallery_thumbnails').css('width','500px');
$('.gallery_preview').css('display','block');
$('.gallery_caption').css('display','block');
// Capture the thumbnail links
$('.gallery_thumbnails a').click(function(e){
// Disables standard link behavior
e.preventDefault();
// Sets up variables based on linked thumbnails
var photo_caption = $(this).attr('title');
var photo_fullsize = $(this).attr('href');
var photo_preview = photo_fullsize.replace("_fullsize", "_preview");
// Fade out preview, preload new image, fade preview back in
$('.gallery_caption').slideUp(500);
$('.gallery_preview').fadeOut(500, function(){
$('.gallery_preload_area').html('<img src="'+photo_preview+'" />');
$('.gallery_preload_area img').imgpreload(function(){
$('.gallery_preview').html('<a class="overlayLink" title="'+photo_caption+'" href="'+photo_fullsize+'" style="background-image:url('+photo_preview+');"></a>');
$('.gallery_preview').fadeIn(500);
$('.gallery_caption').html('<p><a class="overlayLink zoom" title="'+photo_caption+'" href="'+photo_fullsize+'">View larger</a></p><p>'+photo_caption+'</p>');
$('.gallery_caption').slideDown(500);
setFancyBoxLinks();
updateThumbnails();
});
});
});
// Set the first preview image
var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
var first_photo_fullsize = $('.gallery_thumbnails a').first().attr('href');
var first_photo_preview = first_photo_fullsize.replace("_fullsize", "_preview");
$('.gallery_preview').html('<a class="overlayLink" title="'+first_photo_caption+'" href="'+first_photo_fullsize+'" style="background-image:url('+first_photo_preview+');"></a>');
$('.gallery_caption').html('<p><a class="overlayLink zoom" title="'+first_photo_caption+'" href="'+first_photo_fullsize+'">View larger</a></p><p>'+first_photo_caption+'<a href="'+first_photo_fullsize+'" style="background-image:url('+first_photo_preview+');"></a></p>');
updateThumbnails();
setFancyBoxLinks();
});
function setFancyBoxLinks(){
// Links for Fancybox
$("a.overlayLink").fancybox({
'titlePosition' : 'over',
'overlayColor' : '#000',
'overlayOpacity' : 0.8,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'autoScale' : true
});
}
function updateThumbnails(){
$('.gallery_thumbnails a').each(function(index){
if ( $('.gallery_preview a').attr('href') == $(this).attr('href') ){
$(this).addClass('selected');
$(this).children().fadeTo(250, .4);
}else {
$(this).removeClass('selected');
$(this).children().css('opacity', '1');
}
});
}