JavaScript: Colorbox

Inline Content w/Colorbox

To see an example of a "popup" Colorbox, click the first link below.

Basics of the New Law (from the CFLs home page).

New Light Bulb Law (Energy Independence and Security Act of 2007) - The Basics

The law:

  • does not ban the use or purchase of incandescent bulbs.
  • does not ban the sale or manufacture of ALL incandescent bulbs, just those common household incandescent (and other) bulbs that are not energy-efficient.
  • does not require the use of compact fluorescent bulbs.
  • requires about 25 percent greater efficiency (that is, less energy use) for household light bulbs that have traditionally used between 40 and 100 watts of electricity.
  • exempts many bulbs, including specialty bulbs, three-way bulbs, chandelier bulbs, refrigerator bulbs, plant grow lights and others.
  • was passed by Congress and signed by President Bush in 2007 and is implemented by the U.S. Department of Energy.
  • includes many other provisions that do not pertain to lighting. Some of these provisions call for: higher gas mileage in automobiles; transportation electrification; increased reliance on biofuels; and training for green jobs.

How-to: HTML

You will need to be comfortable with source view.

First, create your link, and give it a class of colorbox-inline.

<a class="colorbox-inline" href="#colorbox-hidden">Basics of the New Law</a>

Then create the content you want "hidden" and displayed only when the link is clicked. Wrap this content in two <div>s, like so:

<div id="hidden-content">
  <div class="colorbox-hidden">
    Your content goes in here.
  </div>
</div>

How-to: JavaScript

<script>
  jQuery(document).ready(function() {
  // Hide the inline content
  jQuery("#hidden-content").css({'display':'none'});
  // Open inlined content in "box"
  jQuery(".colorbox-inline").colorbox({inline:true,width:"50%"});
</script>

You can, of course, fiddle with the parameters for the colorbox itself, making it wider or narrower.

Image Gallery w/Colorbox

Here's how you might create an image gallery with the thumbnails linking to the full-size image.

How-to: HTML

You will need to be comfortable with source view. Follow the instructions for making a gallery of images. As you upload each image, don't forget to check the box to "link to the original image."

Once you've got your column of images, then add the following, class="colorbox-gallery" to each link, like so:

<a class="colorbox-gallery" href="/sites/production/files/blue_heron-th.jpg" title="Blue Heron">[ [  {"type":"media","view_mode":"media_small","fid":"209","attributes":{"alt":"","class":"media-image","height":"160","width":"160"}} ] ]</a>

Note that the img is not present while you're in code view: your image is actually a managed Media file, and all of that "funny-looking" text will be processed by Drupal WebCMS before publishing the page (note, spacing around the is added for clarity).

How-to: JavaScript

Note that the target for the jQuery code is the same as the class you added to the link above.

<script src="/sites/all/libraries/colorbox/colorbox/jquery.colorbox-min.js"></script>
<script>
jQuery(document).ready(function() {
  // Colorbox gallery
  jQuery('.colorbox-gallery').colorbox({rel:'colorbox-gallery'});
});
</script>