大佬教程收集整理的这篇文章主要介绍了javascript – 使用jQuery流沙与fancybox的问题，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
Making a Beautiful HTML5 Portfolio
现在,我想在点击图片时打开灯箱.为此,我使用fancybox jQuery.但问题在于制作一个美丽的HTML5组合(流沙jQuery)示例图像在< U> < LI>标签,当在fancybox jQuery示例中有< p>标签.
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title>Making a Beautiful HTML5 Portfolio | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="assets/js/jquery-1.4.3.min.js"><\/script>');
</script>
<script src="assets/js/jquery.quicksand.js"></script>
<script src="assets/js/script.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./fancybox/style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("a#example2").fancybox({
'overlayShow' : false,'transitionIn' : 'elastic','transitionOut' : 'elastic'
});
$("ul li a#example2").fancybox({
'overlayShow' : false,'transitionOut' : 'elastic'
});
});
</script>
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<nav id="filter"></nav>
<section id="container">
<p>
<a id="example2" href="assets/img/shots/1.jpg"><img src="assets/img/shots/1.jpg" alt="Illustration" /></a>
</p>
<p>
<ul id="stage">
<li data-tags="Print Design"><a id="example2" href="#"><img src="assets/img/shots/1.jpg" alt="Illustration" /></a></li>
<li data-tags="logo Design,Print Design"><img src="assets/img/shots/2.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,logo Design"><img src="assets/img/shots/3.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Print Design"><img src="assets/img/shots/4.jpg" alt="Illustration" /></li>
<li data-tags="logo Design"><img src="assets/img/shots/5.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,logo Design,Print Design"><img src="assets/img/shots/6.jpg" alt="Illustration" /></li>
<li data-tags="logo Design,Print Design"><img src="assets/img/shots/7.jpg" alt="Illustration" /></li>
<li data-tags="Web Design"><img src="assets/img/shots/8.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,logo Design"><img src="assets/img/shots/9.jpg" alt="Illustration" /></li>
<li data-tags="Web Design"><img src="assets/img/shots/10.jpg" alt="Illustration" /></li>
<li data-tags="logo Design,Print Design"><img src="assets/img/shots/11.jpg" alt="Illustration" /></li>
<li data-tags="logo Design,Print Design"><img src="assets/img/shots/12.jpg" alt="Illustration" /></li>
<li data-tags="Print Design"><img src="assets/img/shots/13.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,logo Design"><img src="assets/img/shots/14.jpg" alt="Illustration" /></li>
<li data-tags="Print Design"><img src="assets/img/shots/15.jpg" alt="Illustration" /></li>
<li data-tags="logo Design"><img src="assets/img/shots/16.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Print Design"><img src="assets/img/shots/17.jpg" alt="Illustration" /></li>
<li data-tags="Web Design"><img src="assets/img/shots/18.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,Print Design"><img src="assets/img/shots/19.jpg" alt="Illustration" /></li>
<li data-tags="logo Design,Print Design"><img src="assets/img/shots/20.jpg" alt="Illustration" /></li>
<li data-tags="Web Design,logo Design"><img src="assets/img/shots/21.jpg" alt="Illustration" /></li>
<li data-tags="Print Design"><img src="assets/img/shots/22.jpg" alt="Illustration" /></li>
<li data-tags="logo Design,Print Design"><img src="assets/img/shots/23.jpg" alt="Illustration" /></li>
</ul>
</section>
<footer>
<h2>Making a Beautiful HTML5 Portfolio</h2>
<a class="tzine" href="http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/">Read & Download on</a>
</footer>
</body>
</html>
在这个代码中,P标签中的图像用于花式盒子,但是在ul li标签中它们不是.
我认为问题在这里
<script type="text/javascript">
$(document).ready(function() {
$("a#example2").fancybox({
'overlayShow' : false,'transitionOut' : 'elastic'
});
$("ul li a#example2").fancybox({
'overlayShow' : false,'transitionOut' : 'elastic'
});
});
</script>
fancybox不想在代码中使用流沙的主要原因是因为quicksand插件的工作原理.流沙所做的事情(为了在重组可见结构时为元素设置动画)正在克隆元素并将这些元素的副本注入到DOM中.在洗牌完成后,附加到这些元素的任何事件都将消失.这就是fancybox不适合这些元素的原因.
解决此问题的方法在quicksand plugin documentation中进行了描述(“与其他插件集成”一节).它涉及将回调函数作为第二个元素传递给流沙.一旦洗牌完成,将执行该回调,在我们的情况下,它将负责查找并重新应用fancybox到被洗牌的元素.
以下是使用带有fancybox的流沙的工作示例：http://jsfiddle.net/E2vLq/29/
请注意有关代码的两件事：
> LI中的所有链接现在都有类fsand(所以我们不会一遍又一遍地使用相同的id).
>将回调传递给流沙,该流沙将fancybox重新应用于与a.fsand选择器匹配的所有元素.
除此之外,还有另外两个问题：
以上是大佬教程为你收集整理的javascript – 使用jQuery流沙与fancybox的问题全部内容，希望文章能够帮你解决javascript – 使用jQuery流沙与fancybox的问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。