为什么我的fancybox功能不起作用？ [英] Why isn't my fancybox function working?
本文介绍了为什么我的fancybox功能不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请原谅我，如果这是明显的东西，但我不能让我的fancybox工作。我知道我的自定义javascript正在添加正确的类& href属性为预览图像但由于某种原因浏览器无法识别我的fancybox功能。当我使用Chrome DevTool检查页面时，它给出了Uncaught TypeError：undefined is not function的错误，我认为这意味着解析器无法识别 .fancybox（）函数。我的全尺寸图像是否有可能太大？我确信它是显而易见的，但如果有人能够启发我的错误，将非常感激。
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.
这是我的网站：这里
这是我的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：
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');
}
});
}
推荐答案
问题是fancybox插件与最新版本的jQuery不兼容。您可以：将jQuery降级为 v1.8.3 或升级fancybox插件。
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.
这篇关于为什么我的fancybox功能不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
