Question

我在这里有点绝望。我一直在阅读Drupal.behaviours上能找到的所有东西，但显然它仍然不够。我尝试使用infinitescroll插件运行一个砌体网格，将新图像附加到砌体上。这到目前为止工作正常。接下来我要在我的网站上实现的是悬停效果（显示图像信息）和后来的fancybox以显示更大的图像。

(function ($) {
    Drupal.behaviors.views_fluidgrid = {
        attach: function (context) {
            $('.views-fluidgrid-wrapper:not(.views-fluidgrid-processed)', context).addClass('views-fluidgrid-processed').each(function () {
                // hide items while loading
                var $this = $(this).css({opacity: 0}),      
                id = $(this).attr('id'),
                settings = Drupal.settings.viewsFluidGrid[id];

                $this.imagesLoaded(function() {
                    // show items after .imagesLoaded()
                    $this.animate({opacity: 1});
                    $this.masonry({
                        //the masonry settings
                    });
                });

                //implement the function of jquery.infinitescroll.min.js
                $this.infinitescroll({
                    //the infinitescroll settings
                },

                //show new items and attach behaviours in callback
                function(newElems) {
                    var newItems = $(newElems).css({opacity: 0});
                    $(newItems).imagesLoaded(function() {
                        $(newItems).animate({opacity: 1});
                        $this.masonry('appended', newItems);
                        Drupal.attachBehaviours(newItems);
                    });
                });

            });
        }
    };
})(jQuery);

现在我读到如果我希望在新添加的内容上也发生悬停事件，我需要重新连接Drupal.behaviours。

(function ($) {
    Drupal.behaviors.imgOverlay = {
        attach: function (context) {
            var timeout;
            $('.img_gallery').hover(function() {
                $this = $(this);
                timeout = setTimeout(change_opacity, 500);
                }, reset_opacity);

            function change_opacity() {
                //set opacity to show the desired elements
            }

            function reset_opacity() {
                clearTimeout(timeout);
                //reset opacity to 0 on desired elements
            }
        }
    };
})(jQuery)

我现在在哪里编写Drupal.attachBehaviours（）以使其实际工作？或者是否有其他错误我只是没有看到atm？我希望我写这个问题以便它可以理解，也许它也可以帮助其他人，因为我经历过在drupal 7中没有真正的“官方”运行版本的这个组合。

Answer 1

好的，解决方案实际上非常简单。正确地写它比它也运行。它当然不是Drupal.attachBehaviours()而是Drupal.attachBehaviors()。所以这个组合现在有效，我终于松了一口气:)。

Drupal.attachBehaviours使用jQuery infinitescroll和jQuery砌体

1 个答案: