使用jQuery quicksand与fancybox的问题 [英] Problems using jQuery quicksand with fancybox
本文介绍了使用jQuery quicksand与fancybox的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$ b
现在，我想在点击图片时打开灯箱。为此，我使用fancybox jQuery。但问题在于，制作一个漂亮的HTML5 Portfolio（流沙jQuery）示例图片位于< UI> < LI> 标签，当在fancybox jQuery例子中有< p> 标签。
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8/>
< title>制作漂亮的HTML5投资组合| Tutorialzine Demo< / title>
<！ - 我们的CSS样式表文件 - >
< link rel =stylesheethref =assets / css / styles.css/>
<！ - [if lt IE 9]>
< script src =http://html5shiv.googlecode.com/svn/trunk/html5.js>< / script>
<！[endif] - >
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js>< /脚本>
< 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 / javascriptsrc =./ fancybox / jquery.fancybox-1.3.4.pack.js>< / script>
< link rel =stylesheettype =text / csshref =./ fancybox / jquery.fancybox-1.3.4.cssmedia =screen/>
< link rel =stylesheettype =text / csshref =./ 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，
'transitionIn'：'elastic'，
'transitionOut'：'elastic'
}）;
}）;
< / script>
< / head>
< body>
< header>
< h1>我的作品集< / h1>
< / header>
< nav id =filter>< / nav>
< section id =container>
< p>
< a id =example2href =assets / img / shots / 1.jpg>< img src =assets / img / shots / 1.jpgalt =插图/> ;< / A>
< / p>
< p>
< ul id =stage>
< li data-tags =Print Design>< a id =example2href =＃>< img src =assets / img / shots / 1.jpgalt = 插图/>< / a>< / li>
< li data-tags =Logo Design>< img src =assets / img / shots / 5.jpgalt =插图/>< / li>
< li data-tags =网页设计>< img src =assets / img / shots / 8.jpgalt =插图/>< / li>
< li data-tags =Print Design>< img src =assets / img / shots / 13.jpgalt =插图/>< / li>
< li data-tags =Print Design>< img src =assets / img / shots / 15.jpgalt =插图/>< / li>
< li data-tags =Logo Design>< img src =assets / img / shots / 16.jpgalt =插图/>< / li>
< li data-tags =网页设计>< img src =assets / img / shots / 18.jpgalt =插图/>< / li>
< li data-tags =Print Design>< img src =assets / img / shots / 22.jpgalt =插图/>< / li>
< / ul>
< / section>
< footer>
制作漂亮的HTML5投资组合< / h2>
< a class =tzinehref =http://tutorialzine.com/2011/06/beautiful-portfolio-html5-jquery/>阅读& amp; amp; amp;在< / a>上下载
< / footer>
< / body>
< / html>
在这段代码中，P标签中的图像适用于花式框但是在ul标签中却不是。
我认为问题在这里
< script type =文本/ JavaScript的>
$（document）.ready（function（）{
$（a＃example2）。fancybox（{
'overlayShow'：false，
' transitionIn'：'elastic'，
'transitionOut'：'elastic'
}）;
$（ul li a＃example2）。fancybox（{
'overlayShow' ：false，
'transitionIn'：'elastic'，
'transitionOut'：'elastic'
}）;
}）;
< / script>
整个代码 http://fyels.in/Y95
解决方案
修正了它。
main 原因fancybox不希望在代码中快速融入是因为quicksand插件的工作原理。什么quicksand（为了在重组可见结构时动画元素）克隆元素并将其复制到DOM中。任何附加到这些元素的事件都在洗牌完成后消失。这就是为什么fancybox不适合这些元素。 > quicksand插件文档（与其他插件集成一节）。它包括将回调函数传递给流沙作为第二个元素。该回调将在洗牌完成后执行，在我们的情况下，它将负责查找和重新应用fancybox到洗牌的元素。
这里是在fancybox中使用流沙的工作示例： http://jsfiddle.net/E2vLq/29/
请注意以下两件事：
a.fsand 选择器的元素。
除
还有两个问题：- 使用相同的 id 同一网站（一般禁止使用，并根据html规范）。
- 您未在UL之后关闭段落元素。
I am using this example of quicksand jQuery.
Making a Beautiful HTML5 Portfolio
Now, i want to open light box when clicking on image. for this i am using fancybox jQuery. but the problem is in this Making a Beautiful HTML5 Portfolio(quicksand jQuery) example images are in <Ul> <LI> Tag, when in fancybox jQuery example have <p> Tag.
I am not able to select the anchor tag between ul li.
<!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,
'transitionIn' : 'elastic',
'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,Logo 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>
in this code images in P tag working for fancy box but in ul li tags they aren't.
I think problem is here
<script type="text/javascript">
$(document).ready(function() {
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("ul li a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
});
</script>
whole code http://fyels.in/Y95
解决方案
Fixed it.
The main reason fancybox didn't want to get along quicksand in your code is because of how quicksand plugin works. What quicksand does (in order to animate elements when reorganizing visible structure) is cloning the elements and injects copy of those into the DOM. Any events attached to those elements are gone after shuffling is done. This is why fancybox didn't work for those elements.
The way to fix this is described in quicksand plugin documentation (section "Integration with other plugins"). It involves passing a callback function to quicksand as a second element. That callback will be executed once the shuffling is done, in our case it will be responsible for finding and re-applying fancybox to elements that were shuffled.
Here's working example of using quicksand with fancybox: http://jsfiddle.net/E2vLq/29/
Please note two things about the code:
- All links in the LI's have now class fsand (so we don't use same id over and over again).
- Passing the callback to quicksand that is re-applying fancybox to all elements that match
a.fsandselector.
Apart from that, there were two other issues:
- Using same id for two elements on the same site (it is forbidden in general and according to html specs).
- You failed to close paragraph element after UL.
这篇关于使用jQuery quicksand与fancybox的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
