具有jQuery infinitescroll和jQuery石工的Drupal.attachBehaviours

问题描述

我在这里有点绝望.我一直在阅读能够在Drupal.behaviours上找到的所有内容，但显然仍然不够.我尝试使用infinitescroll插件运行砖石网格，以将新图像附加到砖石上.到目前为止，这个工作正常.我想在网站上执行的下一个操作是悬停效果(在图像上显示信息)，稍后再使用fancybox来显示更大尺寸的图像.

I am a little desperate here. I have been reading everything I was able to find on Drupal.behaviours but obviously its still not enough. I try running a masonry grid with the infinitescroll plugin to attach the new images to the masonry. This works fine so far. The next thing I wanted to implement to my website is a hover effect (which shows information on the images) and later fancybox to show the images in a huger size.

(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.行为.

Now I read that I need to Reattach the Drupal.behaviours if I want the hover event to also take place on the newly added content.

(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中没有真正的正式"运行此组合的版本.

Where do I now write the Drupal.attachBehaviours() to make it work actually? Or is there some other error I just dont see atm? I hope I wrote the question so that its understandable and maybe it also helps somebody else, since I experienced that there is no real "official" running Version of this combination in drupal 7.

推荐答案

好的，解决方案实际上很简单.正确编写时，它也会运行.当然不是Drupal.attachBehaviours()而是Drupal.attachBehaviors().因此，这种组合现在有效，我终于松了一口气:).

Ok, the solution is actually pretty simple. When writing it correctly than it also runs. its of course not Drupal.attachBehaviours() but Drupal.attachBehaviors() . So this combination now works and I am finally relieved :).

这篇关于具有jQuery infinitescroll和jQuery石工的Drupal.attachBehaviours的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！