How to build a Drupal 7 & Colorbox On Page Load Overlay?

Posted by ricardoom on November 2, 2011 at 7:23pm

I am attempting to build an on-page-load overlay using Drupal 7 & Colorbox and am stumped. I my JS / JQuery skills are pretty slim and I've hit a barrier. I've created a Block in views and pushing it to my home page.
I added the .colorbox class manually in my tpl.php file, which is allowing the rest of the colorbox specific classes to be added.
here is the code for my block:

<section id="block--my-overlay-block" class="block block-views colorbox init-colorbox-processed-processed cboxElement" style="display:none;">foo, bar & baz</section>

here is my Drupalized jQuery file:

/* overlay */
    (function ($) {
    
    Drupal.behaviors.initColorboxHP = {
      attach: function (context, settings) {
        if (!$.isFunction($.colorbox)) {
          return;
        }
        $('#block--my-overlay-block', context)
          .filter('.colorbox')
          .once('init-colorbox-processed')
          .colorbox({inline:true,href:"#block--my-overlay-block",innerWidth:"600px", innerHeight:"600px"});
      }
    };
    
    {
      $(document).bind('cbox_complete', function () {
        Drupal.attachBehaviors('#cboxLoadedContent');
      });
    }
    
    })(jQuery);

What I expected to happen was the block to be hidden via an inline style definition, which it is. Then my colorbox/jquery would pick it up show it in a nice overlay. Seems like an event handler is not being invoked, but I am not sure how to proceed. As an exercise, i worked up a version w/o the Drupal specific behavior code (b/c i knew i could cheat and get my script in there w/out the Drupal specific code:

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

I am hoping for some guidance in learning how to do this the Drupal way.
thanks!

Comments

I think your Drupalized

Posted by ChrisNelson on December 13, 2011 at 10:26pm

I think your Drupalized jQuery was painfully close looks like you just forgot to include the open:true and it would have opened for you. The below worked for me.

(function ($) {
	Drupal.behaviors.my_module = {
	    attach: function(context, settings) {
		if (!$.isFunction($.colorbox)) {
		          return;
		        }
		   $('#user-profile-form', context).colorbox({
					open:true, 
					inline:true, 
					innerWidth:"600px",
					innerHeight:"400px",
					href:'#first_login_display',
					onComplete:function(){
						//alert('complete');
					}}); 
	    }
    }
})(jQuery);

web Kreator

Sorry for being newbee-ish,

Posted by Anderskj on February 3, 2012 at 10:44am

Sorry for being newbee-ish, but I have used 5 hours now to get something like this to work:

<script type="text/javascript" >
   $(document).ready(function() {		
       $.fn.colorbox({iframe:true,href:'/node/117', 'width':'300px', 'height':'550px', open:true});
    });
</script>

This is placed inside and on the same page is a working link (when clicked):

<a href="/partner-request?&width=243&height=490&iframe=true" class="colorbox-load init-colorbox-load-processed-processed cboxElement" id="popup-form">Become a partner</a>

This is the page: http://acmarine.dk/partners-usa (click the "Become a parther link" to see the colorbox).
I don't know how to open the colorbox (same as clicking the link) on page load. Beleive I have now tried "everything". Where di I put the code in ChrisNelson's suggestion?