Husky Ninja Blogs

Light Box Alerts Using Colorbox Node

Well, where have I been? I've been working that Drupal, and now days more than ever. I’ve been workin' for the man, and the man has Drupal.

OK, it is an ad agency, and I've been there for about six months now as their Drupal guy. So not only do I not have much in the way of time (video games ain't gonna play themselves), but I also never find an issue in Drupal that I can't Google and get an answer on the first two pages. That is, until today.

Here's the business requirement: A company wants to be able to display alerts in a light box on their front page if it becomes necessary, which isn't that often. (There is no need for cookie tracking or anything like that.) They need to be able to post these themselves, and have some basics around how to control content in Drupal. So I google "light box alerts drupal" and "drupal block light box" and "drupal light box views node", and I get a ton of good information. Still, there is no one-stop-shop solution.

That's right Jenna... There's no module for that.

Keep in mind that this is all "under the gun" work, as everything is billable, and the customer only paid for a block of time, so anything over that block is lost money while anything under is gravy. Not to mention that the Man (the ad agency) has not deployed any development environments, so everything is done live fire. Yes, I could have crafted a template.php solution, but all I need is the site to be down while I figure out I forgot a semicolon or improperly closed something.

What I did find is information on on Colorbox (using 7x-2.9) and (more importantly) Colorbox Node (using 7x-3.5), which does exactly what I needed to do. I learned that I can create a view of some node content, and then have Colorbox read the page that this view creates. Since Colorbox is all JQuery, it is only a matter of teasing out the API so I can control the darn thing once it is open.

So first I did what any Drupal admin / developer would do: I created a custom Content Type named "Alerts", and placed a little code in the Body section that contains a close command to Colorbox:

<div style="margin: 15px auto 25px auto; text-align: center;">
	<div onclick="parent.jQuery.colorbox.close()" style="display: inline; padding: 10px 30px; background-color: #203c61; color: #fff; text-align: center; cursor: pointer;">CLICK HERE TO CLOSE</div>
</div>

Special attention to the onclick event. I love JQuery.

We gots a button!

So when the end users create a new Alert, there will already be a button that can be used to close the page.

Next was the view. Very straight forward. The View created an Unformatted List of Full Content for the Content Type Alerts (that was created above), sorted by Post Date (Descending), displaying only 1 item with no pager, and sent this all to one page (/front-page-alerts... not the best name but I was in a hurry).

A View... to an Alert.

Finally, I needed to call the Colorbox form the page, and this could be anywhere, since the requirements stated "front page and where needed". So, I created a new Content Block, and entered the following...

<style>
	#cboxLoadedContent h2 {
		display: none;
	}
</style>

<script>
	jQuery(function($) {
		$(document).ready(function() {
			$("#mainAlert").trigger('click');
		});
	});
</script>

<a class="colorbox-node" href="front-page-alerts?width=600&height=600" id="mainAlert" style="display: none;">Hidden Link for Alert</a>

Now I know that I can call a Colorbox from a link, but I didn't know how to do it on page load, and again the last thing I wanted to do without a development environment is touch the templates. So again, JQuery to the rescue with a one line command. The style section is in place above so I can hide the Title from the View, since I couldn’t figure out a quick way to do it.

Block, Block, baby... I apologize for that...

Low and behold... a light box alert. Now the users create a new alert using the Content Type, and they can place it on any page based on the "Show block on specific pages" section of the Block configuration.

Alert! Alert! Alert!

At the moment, the size and specific layout of the light box is still under customer review, and I am sure they are going to ask for style changes. The size can be handled in the hidden link (using JQuery, of course), and any additional changes can be intercepted through the colorbox-node style or the parent ID cboxLoadedContent.

Also, this layout is not very responsive. That could be fixed by hiding the light box with a quick JQuery size check and colorbox.close(), or forcing a resize using media queries on div#colorbox (and forcing overflow to "scroll").

That's all for now. Just wanted to share. And to keep this Blog slowly rolling.