问题
Forgive me if this is something obvious but I cannot get my fancybox to work. I know my custom javascript is adding the proper class & href attribute to the preview image but for some reason the browser is not recognizing my fancybox function. When I inspect the page with the Chrome DevTool it gives me the error of "Uncaught TypeError:undefined is not a function", which I think means that the parser is not recognizing the .fancybox() function. Is it possible that my fullsize images are too big? I'm sure it is something obvious but if anyone could enlighten me as to the error is would be very much appreciated.
Here is my website:Here
Here is my 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>
Here is my custom 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');
}
});
}
回答1:
The problem is that fancybox plugin is not compatible with the newest versions of jQuery. You can either: downgrade your jQuery to v1.8.3 or upgrade fancybox plugin.
来源：https://stackoverflow.com/questions/23590565/why-isnt-my-fancybox-function-working