如何构建 Drupal 7 和 Drupal 7页面加载叠加上的 Colorbox？

Question

我正在尝试使用 Drupal 7 & 构建页面加载叠加层。 Colorbox 和我被难住了。我的 JS / JQuery 技能非常薄弱，并且已经遇到了障碍。我在视图中创建了一个块并将其推送到我的主页。 我在 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/ci 知道我可以作弊并将我的脚本放入其中，而无需 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 正确的方法，所以当我弄清楚时我会发布它......