标签：html javascript jquery jquery-selectors jquery-plugins
我正在使用quicksand jQuery的这个例子.
Making a Beautiful HTML5 Portfolio
现在,我想在点击图片时打开灯箱.为此,我使用fancybox jQuery.但问题在于制作一个美丽的HTML5组合(流沙jQuery)示例图像在< U> < LI>标签,当在fancybox jQuery示例中有< p>标签.
我无法在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>
在这个代码中,P标签中的图像用于花式盒子,但是在ul li标签中它们不是.
我认为问题在这里
<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>
解决方法:
固定它.
fancybox不想在代码中使用流沙的主要原因是因为quicksand插件的工作原理.流沙所做的事情(为了在重组可见结构时为元素设置动画)正在克隆元素并将这些元素的副本注入到DOM中.在洗牌完成后,附加到这些元素的任何事件都将消失.这就是fancybox不适合这些元素的原因.
解决此问题的方法在quicksand plugin documentation中进行了描述(“与其他插件集成”一节).它涉及将回调函数作为第二个元素传递给流沙.一旦洗牌完成,将执行该回调,在我们的情况下,它将负责查找并重新应用fancybox到被洗牌的元素.
以下是使用带有fancybox的流沙的工作示例：http://jsfiddle.net/E2vLq/29/
请注意有关代码的两件事：
> LI中的所有链接现在都有类fsand(所以我们不会一遍又一遍地使用相同的id).
>将回调传递给流沙,该流沙将fancybox重新应用于与a.fsand选择器匹配的所有元素.
除此之外,还有另外两个问题：
>对同一站点上的两个元素使用相同的id(一般禁止使用,并根据html规范).
>您在UL之后未能关闭段落元素.
标签：html,javascript,jquery,jquery-selectors,jquery-plugins 来源： https://codeday.me/bug/20190729/1576065.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。