Commit 1439cca0 authored by frjo's avatar frjo
Browse files

Updated the README. Removing Drupal 7 specific stuff and added Drupal 8 installation instructions.

parent f56f0967
...@@ -2,8 +2,7 @@ Drupal colorbox module: ...@@ -2,8 +2,7 @@ Drupal colorbox module:
------------------------ ------------------------
Maintainers: Maintainers:
Fredrik Jonsson (http://drupal.org/user/5546) Fredrik Jonsson (http://drupal.org/user/5546)
Francisco J. Cruz Romanos (https://drupal.org/user/848238) Requires - Drupal 8
Requires - Drupal 8, Libraries API 8.x
License - GPL (see LICENSE) License - GPL (see LICENSE)
...@@ -13,9 +12,6 @@ Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.4.3+. ...@@ -13,9 +12,6 @@ Colorbox is a light-weight, customizable lightbox plugin for jQuery 1.4.3+.
This module allows for integration of Colorbox into Drupal. This module allows for integration of Colorbox into Drupal.
The jQuery library is a part of Drupal since version 5+. The jQuery library is a part of Drupal since version 5+.
Images, iframed or inline content etc. can be displayed in a
overlay above the current page.
* jQuery - http://jquery.com/ * jQuery - http://jquery.com/
* Colorbox - http://www.jacklmoore.com/colorbox/ * Colorbox - http://www.jacklmoore.com/colorbox/
...@@ -25,37 +21,34 @@ Features: ...@@ -25,37 +21,34 @@ Features:
The Colorbox module: The Colorbox module:
* Excellent integration with Image field and Image styles * Works as a Formatter in entities and in views.
* Choose between a default style and 5 example styles that are included. * Excellent integration with core image field and image styles and the Insert module
* Style the Colorbox with a custom colorbox.css file in your theme. * Choose between a default style and a number of other styles that are included.
* Drush command to download and install the Colorbox plugin in * Style the Colorbox with a custom Colorbox style in your theme.
sites/all/libraries * Drush command, drush colorbox-plugin, to download and install the Colorbox plugin in sites/all/libraries.
The Colorbox plugin: The Colorbox plugin:
* Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+
* Supports photos, grouping, slideshow, ajax, inline, and iframed content. * Supports photos, grouping, slideshow, ajax, inline, and iframed content.
* Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
* Appearance is controlled through CSS so it can be restyled. * Appearance is controlled through CSS so it can be restyled.
* Can be extended with callbacks & event-hooks without altering the source files.
* Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
* Preloads upcoming images in a photo group. * Preloads upcoming images in a photo group.
* Completely unobtrusive, options are set in the JS and require no * Currently used on more than 2 million websites.
changes to existing HTML. * Released under the MIT License
* Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera,
Internet Explorer 7+.
* Released under the MIT License.
Installation: Installation:
------------ ------------
1. Download and unpack the Libraries module directory in your modules folder 1. Install the module as normal, see link for instructions.
(this will usually be "modules/"). Link: https://www.drupal.org/documentation/install/modules-themes/modules-8
Link: http://drupal.org/project/libraries 2. Download and unpack the Colorbox plugin in "libraries".
2. Download and unpack the Colorbox module directory in your modules folder
(this will usually be "modules/").
3. Download and unpack the Colorbox plugin in "libraries".
Make sure the path to the plugin file becomes: Make sure the path to the plugin file becomes:
"libraries/colorbox/jquery.colorbox-min.js" "libraries/colorbox/jquery.colorbox-min.js"
Link: https://github.com/jackmoore/colorbox/archive/1.x.zip Link: https://github.com/jackmoore/colorbox/archive/1.x.zip
Drush users can use the command "drush colorbox-plugin". Drush users can use the command "drush colorbox-plugin".
4. Go to "Administer" -> "Modules" and enable the Colorbox module. 3. Go to "Administer" -> "Extend" and enable the Colorbox module.
Configuration: Configuration:
...@@ -64,11 +57,6 @@ Go to "Configuration" -> "Media" -> "Colorbox" to find ...@@ -64,11 +57,6 @@ Go to "Configuration" -> "Media" -> "Colorbox" to find
all the configuration options. all the configuration options.
Use the Views Colorbox Trigger field:
------------------------------------
TODO
Add a custom Colorbox style to your theme: Add a custom Colorbox style to your theme:
---------------------------------------- ----------------------------------------
The easiest way is to start with either the default style or one of the The easiest way is to start with either the default style or one of the
...@@ -87,47 +75,6 @@ Go to "Configuration" -> "Media" -> "Colorbox" and select "None" under ...@@ -87,47 +75,6 @@ Go to "Configuration" -> "Media" -> "Colorbox" and select "None" under
Make any CSS adjustments to your "colorbox_mycolorbox.css" file. Make any CSS adjustments to your "colorbox_mycolorbox.css" file.
Load images from custom links in a Colorbox:
--------------------------------------------
Add the class "colorbox" to the link and point the src to the image
you want to display in the Colorbox.
Load content in a Colorbox:
---------------------------
Check the "Enable Colorbox load" option in Colorbox settings.
This enables custom links that can open content in a Colorbox.
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.
Other modules may activate this for easy Colorbox integration.
Load inline content in a Colorbox:
----------------------------------
Check the "Enable Colorbox inline" option in Colorbox settings.
This enables custom links that can open inline content in a Colorbox.
Inline in this context means some part/tag of the current page, e.g. a div.
Replace "id-of-content" with the id of the tag you want to open.
Add the class "colorbox-inline" to the link and build the url like
this "?width=500&height=500&inline=true#id-of-content".
It could e.g. look like this.
<a class="colorbox-inline" href="?width=500&height=500&inline=true#id-of-content">Link to click</a>
<div style="display: none;">
<div id="id-of-content">What ever content you want to display in a Colorbox.</div>
</div>
Other modules may activate this for easy Colorbox integration.
Drush: Drush:
------ ------
A Drush command is provides for easy installation of the Colorbox A Drush command is provides for easy installation of the Colorbox
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment