Club Drupal

CONTENTS OF THIS FILE

---------------------

 * Introduction

 * Features

 * Requirements

 * Installation

 * Configuration

 * Use the Views Colorbox Trigger field

 * Add a custom Colorbox style to your theme

 * Load images from custom links in a Colorbox

 * Load content in a Colorbox

 * Load inline content in a Colorbox

 * Drush

 * Image in Colorbox not displayed in Internet Explorer 8

 * Maintainers

INTRODUCTION

------------

FEATURES:

The Colorbox:

REQUIREMENTS

------------

This module requires the following modules:

 * Libraries API (https://www.drupal.org/project/libraries)

INSTALLATION

 1. Download and unpack the Libraries module directory in your modules folder

    (this will usually be "sites/all/modules/").

    Link: http://drupal.org/project/libraries

 2. Download and unpack the Colorbox module directory in your modules folder

    (this will usually be "sites/all/modules/").

 3. Download and unpack the Colorbox plugin in "sites/all/libraries".

    Link: https://github.com/jackmoore/colorbox/archive/1.x.zip

    Drush users can use the command "drush colorbox-plugin".

 4. Go to "Administer" -> "Modules" and enable the Colorbox.

    Install as you would normally install a contributed Drupal module. See:

    https://drupal.org/documentation/install/modules-themes/modules-7 for

    further information.

    Note:

    If you download the Colorbox plugin using the makefile included you should 

    assurance that unzip command is available on your host.

CONFIGURATION

 * Go to "Configuration" » "Media" » "Colorbox" to find all the configuration

   options.

USE THE VIEWS COLORBOX TRIGGER FIELD

ADD A CUSTOM COLORBOX STYLE TO YOUR THEME

example styles included in the Colorbox JS library download. Simply copy the

entire style folder to your theme and rename it to something logical like

"mycolorbox". Inside that folder are both a .css and .js file, rename both of

those as well to  match your folder name: i.e. "colorbox_mycolorbox.css" and

"colorbox_mycolorbox.js"

LOAD IMAGES FROM CUSTOM LINKS IN A COLORBOX

LOAD CONTENT IN A COLORBOX

LOAD INLINE CONTENT IN A COLORBOX

<a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">

  Link to click

</a>

  <div id="id-of-content">

    What ever content you want to display in a Colorbox.

  </div>

DRUSH

IMAGE IN COLORBOX NOT DISPLAYED IN INTERNET EXPLORER 8

MAINTAINERS

-----------

Current maintainers:

 * Fredrik Jonsson (frjo) - https://www.drupal.org/user/5546

 * Joe Wheaton (jdwfly) - https://www.drupal.org/user/298179

 * Renato Gonçalves (RenatoG) - https://www.drupal.org/user/3326031

 * Sam Becker (Sam152) - https://www.drupal.org/user/1485048

 * rsmylski - https://www.drupal.org/user/1324348

 * lsolesen - https://www.drupal.org/user/527206

  <img src="<?php print $url; ?>" <?php if ($width && $height): ?>width="<?php print $width; ?>" height="<?php print $height; ?>" <?php

 endif; ?>alt="__alt__" title="__title__" class="<?php print $class; ?>" />

    '#description' => t('<a href="https://www.drupal.org/files/druplicon-small.png" class="colorbox">This</a> enables custom links that can open inline content in a Colorbox. Add the class "colorbox-inline" to the link and build the url like this "?width=500&height=500&inline=true#id-of-content". Other modules may activate this for easy Colorbox integration.'),

    '#description' => t('Select the style to use for the Colorbox. The example styles are the ones that come with the Colorbox plugin. Select "None" if you have added Colorbox styles to your theme. <br> <strong>Examples</strong>: <ul><li><a href="/sites/all/modules/colorbox/images/admin/example_default.png" target="blank">Default</a></li><li><a href="/sites/all/modules/colorbox/images/admin/example_plain.png" target="blank">Plain</a></li><li><a href="/sites/all/modules/colorbox/images/admin/example_stockholm_syndrome.png" target="blank">Stockholm Syndrome</a></li><li><a href="/sites/all/modules/colorbox/images/admin/colorbox_example_1.png" target="blank">Example 1</a></li><li><a href="/sites/all/modules/colorbox/images/admin/colorbox_example_2.png" target="blank">Example 2</a></li><li><a href="/sites/all/modules/colorbox/images/admin/colorbox_example_3.png" target="blank">Example 3</a></li><li><a href="/sites/all/modules/colorbox/images/admin/colorbox_example_4.png" target="blank">Example 4</a></li><li><a href="/sites/all/modules/colorbox/images/admin/colorbox_example_5.png" target="blank">Example 5</a></li><li><a href="/sites/all/modules/colorbox/images/admin/example_none.png" target="blank">None</a></li></ul>'),

    '#options' => array(

      'elastic' => t('Elastic'),

      'fade' => t('Fade'),

      'none' => t('None'),

    ),

    '#options' => drupal_map_assoc(array(

      100,

      150,

      200,

      250,

      300,

      350,

      400,

      450,

      500,

      550,

      600,

    )),

    '#options' => drupal_map_assoc(array(

      '0',

      '0.10',

      '0.15',

      '0.20',

      '0.25',

      '0.30',

      '0.35',

      '0.40',

      '0.45',

      '0.50',

      '0.55',

      '0.60',

      '0.65',

      '0.70',

      '0.75',

      '0.80',

      '0.85',

      '0.90',

      '0.95',

      '1',

    )),

    '#description' => t("If the Colorbox should be displayed in a fixed position within the visitor's viewport or relative to the document."),

    '#options' => drupal_map_assoc(array(

      1000,

      1500,

      2000,

      2500,

      3000,

      3500,

      4000,

      4500,

      5000,

      5500,

      6000,

    )),

    '#options' => drupal_map_assoc(array(

      40,

      45,

      50,

      55,

      60,

      70,

      75,

      80,

      85,

      90,

      95,

      100,

      105,

      110,

      115,

      120,

    )),

    '#description' => t("Specify pages by using their paths. Enter one path per line. The '*' character is a wildcard. Example paths are %blog for the blog page and %blog-wildcard for every personal blog. %front is the front page. <p><a href=\"#\" class=\"colorbox-reset-specific-pages-default\">Reset to default</a></p>", array(

      '%blog' => 'blog',

      '%blog-wildcard' => 'blog/*',

      '%front' => '<front>',

    )),

 *   An associative array of Colorbox settings. See the.

 *

 * @link http://colorpowered.com/colorbox/ Colorbox documentation @endlink

 *   for the full list of supported parameters.

 *

 * @codingStandardsIgnoreStart

  // @codingStandardsIgnoreEnd.

package = Media

; Information added by Drupal.org packaging script on 2020-04-13

version = "7.x-2.15"

datestamp = "1586785587"

/**

 * Implements hook_enable().

 */

function colorbox_enable() {

  drupal_set_message(t('Thanks for installing Colorbox'));

  drupal_set_message(t('You may configure Colorbox by visiting <a href="@url_settings">@url_settings</a>', array(

    '@url_settings' => url('admin/config/media/colorbox'),

  )));

}

        'description' => $t('!error You need to download the !colorbox, extract the archive and place the colorbox directory in the %path directory on your server.', array(

          '!error' => $error_message,

          '!colorbox' => l($t('Colorbox plugin'),

          $library['download url']),

          '%path' => 'sites/all/libraries',

        )),

        'description' => $t('You need to download a later version of the !colorbox and replace the old version located in the %path directory on your server.', array(

          '!colorbox' => l($t('Colorbox plugin'),

          $library['download url']),

          '%path' => $library['library path'],

        )),

 * Implements hook_update_N().

 *

 * Delete the unused colorbox_title_trim and colorbox_title_trim_length

 * variables.

 * A light-weight, customizable lightbox plugin for jQuery 1.3.

        // Left for legacy support.

        'node' => NULL,

  // of installation profiles. Only add the JavaScript and CSS on specified

  // paths.

    // Don't add the JavaScript and CSS multiple times.

    return;

  $js_settings['specificPagesDefaultValue'] = "admin*\nimagebrowser*\nimg_assist*\nimce*\nnode/add/*\nnode/*/edit\nprint/*\nprintpdf/*\nsystem/ajax\nsystem/ajax/*";

    'auto' => t('Automatic'),

  // The module token_tweaks sets a global recursion limit that can not be

  // bypassed.

    'auto' => t('Automatic'),

        // Left for legacy support.

        '#node' => $entity,

 * @codingStandardsIgnoreStart

 *   Returns a array with styles.

/**

 * Implements hook_help().

 */

function colorbox_help($path, $arg) {

  switch ($path) {

    case 'admin/help#colorbox':

      $output = '<h3>' . t('About') . '</h3>';

      $output .= '<p>' . t('<a target="_blank" href="@colorbox_project_link">Colorbox</a> is a light-weight customizable lightbox plugin for jQuery. This module allows for integration of Colorbox into Drupal.', array('@colorbox_project_link' => 'https://www.drupal.org/project/colorbox')) . '</p>';

      $output .= '<p>' . t('Images, iframed or inline content etc. can be displayed in a overlay above the current page.') . '</p>';

      $output .= '<h3>' . t('Usage') . '</h3>';

      $output .= '<p>' . t('Go to "Configuration" » "Media" » "Colorbox" to find all the configuration options.') . '</p>';

      $output .= '<h3>' . t('Features') . '</h3>';

      $output .= '<b>' . t('The Colorbox:') . '</b>';

      $output .= '<ul>';

      $output .= '<li>' . t('Excellent integration with Image field and Image styles') . '</li>';

      $output .= '<li>' . t('Choose between a default style and 5 example styles that are included.') . '</li>';

      $output .= '<li>' . t('Style the Colorbox with a custom colorbox.css file in your theme.') . '</li>';

      $output .= '<li>' . t('Drush command to download and install the Colorbox plugin in sites/all/libraries') . '</li>';

      $output .= '</ul>';

      $output .= '<b>' . t('The Colorbox plugin:') . '</b>';

      $output .= '<ul>';

      $output .= '<li>' . t('Supports photos, grouping, slideshow, ajax, inline, and iframed content.') . '</li>';

      $output .= '<li>' . t('Appearance is controlled through CSS so it can be restyled.') . '</li>';

      $output .= '<li>' . t('Preloads upcoming images in a photo group.') . '</li>';

      $output .= '<li>' . t('Completely unobtrusive, options are set in the JS and require no') . '</li>';

      $output .= '<li>' . t('changes to existing HTML.') . '</li>';

      $output .= '<li>' . t('Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera,') . '</li>';

      $output .= '<li>' . t('Internet Explorer 7+.') . '</li>';

      $output .= '<li>' . t('Released under the MIT License.') . '</p>';

      $output .= '</ul>';

      $output .= '<h3>' . t('Colorbox screencasts') . '</h3>';

      $output .= '<b>' . t('Part 1 to 3 is for an older 7.x-1.x version of the Colorbox:') . '</b>';

      $output .= '<ul>';

      $output .= '<li>' . t('Part 1: <a href="@colorbox_screencasts_part1" target="blank">Installation and image field integration on Vimeo</a>', array('@colorbox_screencasts_part1' => 'https://vimeo.com/19122850')) . '</li>';

      $output .= '<li>' . t('Part 2: <a href="@colorbox_screencasts_part2" target="blank">Inline images with the Insert module on Vimeo</a>', array('@colorbox_screencasts_part2' => 'https://vimeo.com/19386122')) . '</li>';

      $output .= '<li>' . t('Part 3: <a href="@colorbox_screencasts_part3" target="blank">Building a image gallery and a image slideshow.</a>', array('@colorbox_screencasts_part3' => 'https://vimeo.com/26411524')) . '</li>';

      $output .= '</ul>';

      $output .= '<b>' . t('Contributed screencasts:') . '</b>';

      $output .= '<ul>';

      $output .= '<li>' . t('<a href="@colorbox_contributed_screencasts_part1" target="blank">Drupal 7 Colorbox project</a> by Code Karate', array('@colorbox_contributed_screencasts_part1' => 'http://codekarate.com/daily-dose-of-drupal/drupal-7-colorbox-module')) . '</li>';

      $output .= '<li>' . t('<a href="@colorbox_contributed_screencasts_part2" target="blank">Creating and Theming a Node Photo Gallery with Drupal 7 and Colorbox</a> by High Rock Media.', array('@colorbox_contributed_screencasts_part2' => 'http://dannyenglander.com/blog/screencast-creating-and-theming-node-photo-gallery-drupal-7-and-colorbox')) . '</li>';

      $output .= '<li>' . t('<a href="@colorbox_contributed_screencasts_part3" target="blank">How to Build a Lightbox Portfolio in Drupal 7</a> by CMS Quickstart', array('@colorbox_contributed_screencasts_part3' => 'http://www.cmsquickstart.com/blog/tutorial-how-build-lightbox-portfolio-drupal-7')) . '</li>';

      $output .= '</ul>';

      $output .= '<h3>' . t('Load Content in a Colorbox') . '</h3>';

      $output .= '<p>' . t('Check the "Enable Colorbox load" option in Colorbox settings.') . '</p>';

      $output .= '<p>' . t('This enables custom links that can open content in a Colorbox.') . '</p>';

      $output .= '<p>' . t('Add the class "colorbox-load" to the link and build the url like this "[path]?width=500&height=500&iframe=true" or "[path]?width=500&height=500" if you don\'t want an iframe.') . '</p>';

      $output .= '<p>' . t('Other projects may activate this for easy Colorbox integration.') . '</p>';

      $output .= '<h3>' . t('Load Images from custom links in a Colorbox') . '</h3>';

      $output .= '<p>' . t('Add the class "colorbox" to the link and point its href attribute to the image you want to display in the Colorbox.') . '</p>';

      return $output;

  }

}

  return theme(array(

    'colorbox_insert_image__' . str_replace('-', '_', $item['style_name']),

    'colorbox_insert_image',

      ), array(

    'item' => $item,

    'widget' => $widget,

  ));

 * Gallery Exists Function.

 *

 * Machine names normally need to be unique but that does not apply to

 * galleries.

 *

 * @codingStandardsIgnoreStart

  // @codingStandardsIgnoreEnd

  global $language;

      $caption = token_replace($settings['colorbox_caption_custom'], array($entity_type => $entity, 'file' => (object) $item), array('clear' => TRUE, 'language' => $language));

  // Shorten the caption for the example styles or when caption shortening is

  // active.

  list($id) = entity_extract_ids($entity_type, $entity);

      $gallery_id = isset($field['field_name']) ? 'gallery-' . $field['field_name'] : 'gallery-page';

  // If gallery id is not empty add unique per-request token to avoid images

  // being added manually to galleries.

    // Check if gallery token has already been set, we need to reuse the token

    // for the whole request.

  return theme('colorbox_imagefield', array(

    'image' => $image,

    'path' => $path,

    'title' => $caption,

    'gid' => $gallery_id,

  ));

 *

 * @codingStandardsIgnoreStart

  // @codingStandardsIgnoreEnd

 *   Array with variables values.

 *

 * @codingStandardsIgnoreStart

  // @codingStandardsIgnoreEnd

 * Drush integration for colorbox.

 * Implements hook_drush_command().

 * @codingStandardsIgnoreLine

  // The key in the $items array is the name of the command.

  // No bootstrap.

    'bootstrap' => DRUSH_BOOTSTRAP_DRUSH,

 * Implements hook_drush_help().

 * @codingStandardsIgnoreLine

 * @codingStandardsIgnoreLine

  $modules = drush_get_context('PM_ENABLE_MODULES');

  if (in_array('colorbox', $modules) && !drush_get_option('skip')) {

    drush_colorbox_plugin();

  }

    // Download the zip archive.

      // Decompress the zip archive.

    if (!$.isFunction($('a, area, input', context).colorbox) || typeof settings.colorbox === 'undefined') {

      .once('init-colorbox').each(function(){

        $(this).colorbox(settings.colorbox);

      });

    $('.colorbox-reset-specific-pages-default', context).click(function (event) {

      event.preventDefault();

      var colorbox_specific_pages_default_value = Drupal.settings.colorbox.specificPagesDefaultValue;

      if (typeof colorbox_specific_pages_default_value !== 'undefined' && colorbox_specific_pages_default_value.length > 0) {

        $("#edit-colorbox-pages").val(colorbox_specific_pages_default_value);

      }

    });

#colorbox,

#cboxOverlay,

#cboxWrapper {

#cboxMiddleLeft,

#cboxBottomLeft {

#cboxLoadingOverlay,

#cboxLoadingGraphic {

#cboxPrevious,

#cboxNext,

#cboxClose,

#cboxSlideshow {

#cboxPrevious:active,

#cboxNext:active,

#cboxClose:active,

#cboxSlideshow:active {

  max-width: 100%;

  max-height: 100%;

#colorbox,

#cboxContent,

#cboxLoadedContent {

#cboxWrapper {

  background: #fff;

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

#cboxTopLeft {

  width: 15px;

  height: 15px;

}

#cboxTopCenter {

  height: 15px;

}

#cboxTopRight {

  width: 15px;

  height: 15px;

}

#cboxBottomLeft {

  width: 15px;

  height: 10px;

}

#cboxBottomCenter {

  height: 10px;

}

#cboxBottomRight {

  width: 15px;

  height: 10px;

}

#cboxMiddleLeft {

  width: 15px;

}

#cboxMiddleRight {

  width: 15px;

}

#cboxContent {

  background: #fff;

  overflow: hidden;

}

#cboxError {

  padding: 50px;

  border: 1px solid #ccc;

}

#cboxLoadedContent {

  margin-bottom: 28px;

}

#cboxTitle {

  position: absolute;

  background: rgba(255, 255, 255, 0.7);

  bottom: 28px;

  left: 0;

  color: #535353;

  width: 100%;

  padding: 4px 6px;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

}

#cboxCurrent {

  position: absolute;

  bottom: 4px;

  left: 60px;

  color: #949494;

}

.cboxSlideshow_on #cboxSlideshow {

  position: absolute;

  bottom: 0px;

  right: 30px;

  background: url(images/controls.png) no-repeat -75px -50px;

  width: 25px;

  height: 25px;

  text-indent: -9999px;

}

.cboxSlideshow_on #cboxSlideshow:hover {

  background-position: -101px -50px;

}

.cboxSlideshow_off #cboxSlideshow {

  position: absolute;

  bottom: 0px;

  right: 30px;

  background: url(images/controls.png) no-repeat -25px -50px;

  width: 25px;

  height: 25px;

  text-indent: -9999px;

}

.cboxSlideshow_off #cboxSlideshow:hover {

  background-position: -49px -50px;

}

#cboxPrevious {

  position: absolute;

  bottom: 0;

  left: 0;

  background: url(images/controls.png) no-repeat -75px 0px;

  width: 25px;

  height: 25px;

  text-indent: -9999px;

}

#cboxPrevious:hover {

  background-position: -75px -25px;

}

#cboxNext {

  position: absolute;

  bottom: 0;

  left: 27px;

  background: url(images/controls.png) no-repeat -50px 0px;

  width: 25px;

  height: 25px;

  text-indent: -9999px;

}

#cboxNext:hover {

  background-position: -50px -25px;

}

#cboxLoadingOverlay {

  background: #fff;

}

#cboxLoadingGraphic {

  background: url(images/loading_animation.gif) no-repeat center center;

}

#cboxClose {

  position: absolute;

  bottom: 0;

  right: 0;

  background: url(images/controls.png) no-repeat -25px 0px;

  width: 25px;

  height: 25px;

  text-indent: -9999px;

}

#cboxClose:hover {

  background-position: -25px -25px;

}

#colorbox,

#cboxOverlay,

#cboxWrapper {

#cboxMiddleLeft,

#cboxBottomLeft {

#cboxLoadingOverlay,

#cboxLoadingGraphic {

#cboxPrevious,

#cboxNext,

#cboxClose,

#cboxSlideshow {

#cboxPrevious:active,

#cboxNext:active,

#cboxClose:active,

#cboxSlideshow:active {

#colorbox,

#cboxContent,

#cboxLoadedContent {

/* @codingStandardsIgnoreLine */

#cboxWrapper {

}

#cboxContent {

  overflow: hidden;

}

#cboxContent,

.cboxPhoto {

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}

#cboxError {

  padding: 50px;

  border: 1px solid #ccc;

}

#cboxTitle {

  position: absolute;

  background: rgba(255, 255, 255, 0.7);

  bottom: 0;

  left: 0;

  color: #535353;

  width: 100%;

  padding: 4px 6px;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-border-bottom-right-radius: 5px;

  -webkit-border-bottom-left-radius: 5px;

  -moz-border-radius-bottomright: 5px;

  -moz-border-radius-bottomleft: 5px;

  border-bottom-right-radius: 5px;

  border-bottom-left-radius: 5px;

}