2

I would like to launch a colorbox right after an user has successfully saved a new node.

The content of the colorbox is a drupal block which would contain instructions asking the user to share that newly created node to their social media.

I am able to set up a link which loads the block into the colorbox when the link is clicked.

I would like, however, to programatically call the "link clicking" event. So, how do I trigger, by JQuery or otherwise, a colorbox from my custom form submit handler?

2
  • You want the sharing options in colorbox or just want to redirect to the newly created node? Aug 8, 2014 at 6:12
  • Redirect to the newly created node. Then a colorbox would popup. The sharing thing is just an example, the colorbox could contain anything in it. Aug 8, 2014 at 7:38

3 Answers 3

3

Install colorbox module. Read its README.txt to find out how to build links for loading inline and iframe content in a colorbox.

Set the id #cbox_trigger_on_page_load for your link and place it somewhere in your page and hide it with CSS.

If you are loading inline content, place the content in a block and hide the block too with CSS.

The mechanics of how to place the hidden colorbox link on the right page is not really what the question is about, is it?

So, lets stick with how to trigger the colorbox.

/**
 * Implements hook_preprocess_html();
 */
function MYMODULE_preprocess_html(&$variables) {
  // The overlay content from the site in an iframe should have cbox_overlay
  // as first path argument.
  // i.e. http:/mywebsite.com/cbox_overlay/content-title.

  // This will prevent a triggering loop.
  $is_cbox_overlay = FALSE;
  if (arg(0) == 'cbox_overlay') {
    $is_cbox_overlay = TRUE;
  }

  $settings = array(
    'is_cbox_overlay' => $is_cbox_overlay,
  );
  drupal_add_js(array('MYMODULE' => $settings), array('type' => 'setting'));

  drupal_add_js(drupal_get_path('module', 'MYMODULE') . '/js/colorbox_onpageload.js', array( 
    // Making sure our JQuery code runs after colorbox's.
    'scope' => 'footer', 
    'weight' => '15' 
  ));
}

In the /js/colorbox_onpageload.js file:

(function ($) {  
  Drupal.behaviors.MYMODULE = {
    attach: function (context, settings) {            
      if (!settings.MYMODULE.is_cbox_overlay && $('#cbox_trigger_on_page_load').length) {
        $('#cbox_trigger_on_page_load')[0].click();
      }
    }

};})(jQuery);
0

You can do it by Rules.

Create an action of redirect user to newly created node on "When a new node is saved".

Create a path redirection action to the freshly created node with some query argument appended e.g. node/10?clbox=10

Now render a block using page.tpl.php or with our custom module to check if the $_GET['clbox'] exists in the url, the colorbox should popup.

Condition can be this way

<?php 
if(isset($_GET['clbox']) && is_numeric($_GET['clbox'])){
$nid = $_GET['clbox'];
?>
  <script>
    jQuery(document).ready(function() {
       hr = "path to a page with  ?<?php print $nid ?>";
        jQuery("a.customclass").click(
          function(ev) {
            ev.preventDefault(); //To prevent redirection
            var hr = jQuery(this).attr("href");
            jQuery.colorbox({iframe: true, href: hr , innerWidth: 500, innerHeight: 400});
          });
      });
 </script>
<? }

Hope it will help

1
0

In my thinking, using JavaScript and PHP together in a condition is old school. We used this method in time of PHP4.

However, in Drupal you have a more efficient method of doing this. All you need is a custom module and some js and some alters.

First you need to alter the node submission form to add custom path redirect.

/**
 * Implements hook_form_BASE_FORM_ID_alter().
 */
function CUSTOM_MODULE_form_node_form_alter(&$form, &$form_state, $form_id) {
  if ($form['#node']->type == 'custom') {
    $form['actions']['submit']['#submit'][] = 'custom_node_submit_redirect';
  }
}

function custom_node_submit_redirect($form, &$form_state) {
  $form_state['redirect'] = array(
    'node/' . $form['#node']->nid,
    array(
      'query' => array('cbox' => TRUE),
    ),
  );
}

Then, in your custom module you need to add hook_preprocess_page.

/**
 * Implements hook_preprocess_page().
 */
function CUSTOM_MODULE_preprocess_page(&$variables) {
  if ($node = menu_get_object()) {
    $variables['node'] = $node;
    if ($node->type == 'custom' && isset($_GET['cbox'])) {
      drupal_add_js(drupal_get_path('module', 'CUSTOM_MODULE') . '/scripts.js', 'module');
    }
  }
}

So here you added a JavaScript to the page if the node object is present. In your JavaScript file, you can add your custom callback to open up the colorbox.

Drupal.behaviors.CUSTOM_MODULE_behaviour = function (context) 
{
  // callback to open cbox.
};

I hope this solves it.

1
  • Your sample code is very well elaborated but it misses what I really asked for, which is how to trigger the colorbox. It was my fault though because I should've stated that I was seeking the JQuery bit of it. Thank you anyway Nov 6, 2014 at 0:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.