問題描述
我正在使用這個流沙 jQuery 示例.
I am using this example of quicksand jQuery.
制作精美的 HTML5 作品集
現在，我想在單擊圖像時打開燈箱.為此，我正在使用fancybox jQuery.但問題在于這個制作美麗的 HTML5 作品集(quicksand jQuery)示例圖像在 <Ul><LI> 標簽，當在 fancybox jQuery 示例中有 <p> 標簽.
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.
我無法選擇 ul li 之間的錨標記.
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" >Read & Download on</a>
</footer>
</body>
</html>
在此代碼中，P 標簽中的圖像適用于花哨的盒子，但在 ul li 標簽中它們不是.
in this code images in P tag working for fancy box but in ul li tags they aren't.
我認為問題就在這里
<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>
整個代碼http://fyels.in/Y95
推薦答案
已修復.
fancybox 不想在你的代碼中使用流沙的主要原因是流沙插件的工作原理.流沙所做的(為了在重組可見結構時為元素設置動畫)是克隆元素并將它們的副本注入到 DOM 中.洗牌完成后，附加到這些元素的任何事件都將消失.這就是為什么 fancybox 不適用于這些元素的原因.
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.
quicksand 插件文檔(部分與其他插件集成").它涉及將回調函數作為第二個元素傳遞給流沙.一旦洗牌完成，該回調將被執行，在我們的例子中，它將負責查找并重新將fancybox應用于被洗牌的元素.
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.
這里是在fancybox 中使用流沙的工作示例:http://jsfiddle.net/E2vLq/29/
Here's working example of using quicksand with fancybox: http://jsfiddle.net/E2vLq/29/
請注意關于代碼的兩點:
Please note two things about the code:
- 現在 LI 中的所有鏈接都有類 fsand(所以我們不會一遍又一遍地使用相同的 id).
- 將回調傳遞給流沙，將fancybox重新應用到所有匹配
a.fsand選擇器的元素.
- 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.
除此之外，還有另外兩個問題:
- 對同一站點上的兩個元素使用相同的 id(一般情況下，根據 html 規范，這是被禁止的).
- 您未能在 UL 之后關閉段落元素.
- 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.
這篇關于使用帶有fancybox的jQuery流沙的問題的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！