0

我有一个页面，其中包含许多隐藏的 div。这些 div 使用 CSS 处理程序隐藏.div {display: none}。

每个隐藏的 div 中都有一个 jQuery 驱动的幻灯片，使用一个名为 TN3 的 jQuery 插件构建。

每个隐藏的 div 都链接到页面上可见的照片。单击照片会显示相应的隐藏 div 并将其滑入到位。再次单击照片，或单击隐藏 div 中的关闭按钮，将其向上滑动并再次隐藏。这是使用简单的 jQuery 显示/隐藏切换脚本完成的。

我的问题是，当您单击照片并且“隐藏”的 div 变得可见时，现在可见的 div 中的 jQuery 幻灯片不起作用。

我认为这是因为幻灯片的脚本使用了一个$(document).ready()函数。由于隐藏的 div 不是 DOM 的一部分（因为它们被设置为display:none） - 运行幻灯片所需的 jQuery 不会触发。

我认为这给我留下了两个选择：

  1. 使用 jQuery 隐藏页面加载时隐藏的 div，而不是将 CSS 设置为display: none. 我认为这意味着隐藏的 div 将在页面加载时的几分之一秒内全部可见，然后它们会被 jQuery 代码隐藏——这看起来很笨重而且不可取。

  2. 当用户单击照片以切换隐藏 div 的可见性时，以某种方式将操作幻灯片所需的 jQuery 代码设置为触发。这就是我陷入困境的地方 - 我不知道该怎么做。

我对 JavaScript 的了解仅限于 jQuery，并且通常仅限于使用具有$(document).ready(). 我不知道如何在页面加载以外的另一个事件上触发代码。

幻灯片的代码如下。

任何想法将不胜感激

$(document).ready(function () {
    $('.tn3-gallery').tn3({
        image: {
            transitions: [{
                type: "fade",
                easing: "easeInQuad",
                duration: 423
            }]
        },
        thumbnailer: {
            overMove: false
        },
        mouseWheel: false
    });
}); // end ready
4

1 回答 1

2

带有 display:none 的元素存在于 DOM 中，但是当您为它们应用画廊插件时，它可能会计算这些元素的高度/宽度以用于画廊尺寸，并且由于元素不显示它需要 0。

jquery 的 .width() 或 .height() 将为具有 display:none 的元素返回 0

如果是这种情况，那么可能的解决方案是：

1) 仅在“隐藏”的 div 首次可见后才初始化库

2）临时设置元素显示：块，但在画廊初始化之前可见性：隐藏 - 这将允许采用正确的元素高度/宽度

第二个例子：

$('.tn3-gallery')
       .css({'display':'block','visibility':'hidden'})
       .tn3({
           //your tn3 options
          init:function(){
           //turn element back to display:none after gallery is built
            $('.tn3-gallery').css({'display':'none','visibility':'visible'})
          }
       });
于 2013-06-10T12:16:53.923 回答