使用jQuery流沙与fancybox的问题

我正在使用quicksand jQuery的这个例子。

制作精美的HTML5产品组合

现在，我想在点击图片时打开灯箱。 为此，我使用fancybox jQuery。 但问题是在这个制作一个漂亮的HTML5组合（流沙jQuery）示例图像在

• 标签中，当在fancybox jQuery示例中有

  标签。

  我无法在ul li之间选择锚标签。

             !window.jQuery && document.write('');        $(document).ready(function() { $("a#example2").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); $("ul li a#example2").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); });    
   
  My Portfolio
   
   
   
   
    
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  Making a Beautiful HTML5 Portfolio
   Read & Download on 
     

  在这个代码中，P标签中的图像用于花式盒子，但在ul li标签中它们不是。

  我认为问题在这里

    $(document).ready(function() { $("a#example2").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); $("ul li a#example2").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); });  

  整个代码http://fyels.in/Y95

  Answer 1

  固定它。

  fancybox不想在代码中使用流沙的主要原因是因为quicksand插件的工作原理。 流沙所做的事情（为了在重组可见结构时为元素设置动画）正在克隆元素并将这些元素的副本注入到DOM中。 在洗牌完成后，附加到这些元素的任何事件都将消失。 这就是fancybox不适合这些元素的原因。

  quicksand插件文档 （“与其他插件集成”一节）中介绍了解决此问题的方法。 它涉及将回调函数作为第二个元素传递给流沙。 一旦洗牌完成，该回调将被执行，在我们的情况下，它将负责查找并重新应用fancybox到被洗牌的元素。

  以下是使用fsbox的流沙的工作示例 ： http ： //jsfiddle.net/E2vLq/29/

  请注意有关代码的两件事：

  • LI中的所有链接现在都有类fsand （所以我们不会一遍又一遍地使用相同的id）。
  • 将回调传递给流沙，该流沙将fancybox重新应用于与a.fsand selector匹配的所有元素。

  除此之外 ，还有另外两个问题：

  • 对同一站点上的两个元素使用相同的id （一般禁止使用，并根据html规范）。
  • 您无法在UL之后关闭段落元素。

  Answer 2

  重用ID无效。 试试

  1. 在ul使用不同的ID

  2. 使用不同的机制来引用元素 – 例如使用类