Question

我正在尝试使用Drupal 7＆amp; D构建一个页面加载叠加层。 Colorbox和我难倒。我的JS / JQuery技能相当渺茫，我遇到了障碍。我在视图中创建了一个Block并将其推送到我的主页。我在我的tpl.php文件中手动添加了.colorbox类，这允许添加其余的colorbox特定类。这是我的块的代码：

<section id="block-views-hp-overlay-hp-overlay-block" class="block block-views colorbox init-colorbox-processed-processed cboxElement" style="display:none;">

这是我的Drupalized jQuery文件：

/* overlay */
(function ($) {

Drupal.behaviors.initColorboxHP = {
  attach: function (context, settings) {
    if (!$.isFunction($.colorbox)) {
      return;
    }
    $('#block-views-hp-overlay-hp-overlay-block', context)
      .filter('.colorbox')
      .once('init-colorbox-processed')
      .colorbox({inline:true,href:"#block-views-hp-overlay-hp-overlay-block",innerWidth:"600px", innerHeight:"600px"});
  }
};

{
  $(document).bind('cbox_complete', function () {
    Drupal.attachBehaviors('#cboxLoadedContent');
  });
}

})(jQuery);

我期望发生的是通过内联样式定义隐藏的块，它就是这样。然后我的colorbox / jquery会把它拿起来以漂亮的叠加显示它。似乎没有调用事件处理程序，但我不知道如何继续，所以任何指导将非常感激。我看到其他一些人已经在非Drupal环境中使用它，但我很难重新创建。

我用这些资源让我这么远......

http://drupal.org/node/863858

http://jacklmoore.com/colorbox/faq/#faq-cookie

Answer 1

我对Drupal不熟悉，但可能只是需要将open属性添加到colorbox选项中：

{inline:true,href:"#block-views-hp-overlay-hp-overlay-block",innerWidth:"600px", innerHeight:"600px", open:true}

我不确定你的情况，但你可能不需要将colorbox附加到一个元素上（你是否计划点击它以便你可以第二次打开它？）。如果没有，只需直接调用colorbox。替换这个：

$('#block-views-hp-overlay-hp-overlay-block', context)
  .filter('.colorbox')
  .once('init-colorbox-processed')
  .colorbox({inline:true,href:"#block-views-hp-overlay-hp-overlay-block",innerWidth:"600px", innerHeight:"600px"});

有了这个：

    $.colorbox({inline:true,href:"#block-views-hp-overlay-hp-overlay-block",innerWidth:"600px", innerHeight:"600px"});

Answer 2

感谢@Jack的帮助，让我在那里（有点......）这就是我所做的。首先，作为一个练习，我倾倒了drupal的东西（b / c我知道我可以作弊，并在那里拿出我的脚本与drupal特定的东西。然后我这样做：

jQuery(document).ready(function($) {
$('#block-views-hp-overlay-hp-overlay-block').show();
$.fn.colorbox({inline:true,href:"#block-views-hp-overlay-hp-overlay-block",innerWidth:"600px", innerHeight:"600px",open:true});

 $(document).bind('cbox_closed', function(){
            $('#block-views-hp-overlay-hp-overlay-block').hide();
    });

});

这基本上就是我想要的。我相信有一个更优雅和Drupal正确的方式，所以当我想出来的时候我会张贴...

如何建立一个Drupal 7＆amp; Colorbox On Page加载覆盖？

2 个答案: