WP-Lightview 4.0

Overview

WP-Lightview is a Wordpress plugin that lets you integrate in an easy way the Lightview image overlay mechanism in your Wordpress posts and pages. What WP-Lightview plugin does is to include all the mandatory CSS and Javascript files required by Lightview in the header of your blog.

WP-Lightview also includes an extension of the Wordpress rich-text editor, to easily integrate Lightview-enabled images when writing posts or pages from the Wordpress admin console.

Starting with release 4.0, WP-Lightview DOESN’T include the Lightview library anymore, in order to comply with its license and respect its author. The Lightview library has to be purchased and installed separately. See instructions below.

WP-Lightview 4.0 has only been tested with Wordpress 2.8.x. The front-end part (integration of CSS and Javascript) should work on all Wordpress 2.5+ releases (and even in older releases, who knows :) ) ; however, the extension of the Wordpress rich-text editor requires Wordpress 2.5+, as it requires TinyMCE 3.0.x to work.

How to install it?

  1. Extract the ZIP archive into your “wp-content/plugins/” directory. A new folder named “wp-lightview” will be created.
  2. Download Lightview from its official website; extract the content of the library (the three folders “/js“, “/css“, “/images” in the “wp-content/plugins/wp-lightview/lightview” folder (you can specify another location, see the “Configuration” section).
  3. Log into your administration panel, click on “Plugins” tab and activate the “WP-Lightview” plugin.

Download

Download Wp-Lightview 4.0

Configuration

Lightview requires Prototype and Scriptaculous libraries to work properly. Those libraries are bundled with WP-Lightview. So you can start using WP-Lightview without any extra configuration. But in case you’ve already had some plugins that add Prototype and Scriptaculous, you may end up with conflicts. You can disable the inclusion of Prototype and Scriptaculous:

  • By editing the “wp-content/plugins/wp-lightview/configuration.php” file, set the “WP_LIGHTVIEW_INCLUDE_PROTOTYPE” constant to “false”.
You can also specify the folder where you want to store the Lightview library, by changing the “WP_LIGHTVIEW_PATH_TO_LIGHTVIEW” constant. By default, the constant is set to “wp-content/plugins/wp-lightview/lightview”. However, I would recommend storing the Lightview library outside the WP-Lightview folder, for easier maintenance. For instance, by editing the “wp-content/plugins/wp-lightview/configuration.php” file, you can set the “WP_LIGHTVIEW_PATH_TO_LIGHTVIEW” constant to “http://yoursite/lightview”.

You can also specify the folder where you want to store the Lightview library, by changing the “WP_LIGHTVIEW_PATH_TO_LIGHTVIEW” constant. By default, the constant is set to “wp-content/plugins/wp-lightview/lightview“. However, I would recommend storing the Lightview library outside the WP-Lightview folder, for easier maintenance.

  • For instance, by editing the “wp-content/plugins/wp-lightview/configuration.php” file, you can set the “WP_LIGHTVIEW_PATH_TO_LIGHTVIEW” constant to “http://yoursite/lightview“.
You can also configure the display of the Lightview, by setting parameters in the JS file (“wp-content/plugins/wp-lightview/js/lightview.js“). Please read the Lightview official site to have all the details regarding configuration.

How to use it?

The manual way

When editing a blog post or a blog page through the administration panel, simply add class=”lightview” attribute to any link tag you want to configure. For instance: “<a href=”image1.jpg” class=”lightview” title=”my caption”><img src=”image1_thumb.jpg” width=”50″ height=”100″/></a>

The rich-text editor extension

Starting with WP-Lightview 3.0, an extension to TinyMCE, the rich-text editor integrated into Wordpress, lets you easily integrate Lightview-enabled images without editing the HTML code. This extension can be called by clicking on a new icon added in the TinyMCE toolbar.

Toolbar of the Wordpress rich-text editor

When clicking on it, a form appears and lets you define:

  • Image URL. The URL of the image that will be displayed in your post or page.
  • Destination URL. The URL of the destination image that will be called using Lightview when clicking on the image in your post or page. The “copy” feature automatically copies the current value of the “Image URL” field into the “Desintation URL” field.
  • Image Description. The description of the image used to populate the “alt” attribute of the image
  • Image Title. The title of the image that will be displayed on the Lightview (used to populate the “title” attribute of the “a” link)
  • Image Caption. The caption of the image that will be displayed below the title of the image (is used with “Image Title” to populate the “title” attribute of the “a” link)
  • Class. The class name applied on the “img” tag
  • Gallery. The gallery name when you want to create a gallery of images in a post or page. See the how-to-use document of Lightview for more details.

You can customize the default path to your images, in order to pre-fill the “Image URL” and “Destination URL” fields, by editing the “wp-content/plugins/wp-lightview/configuration.php” file: simply set the “WP_LIGHTVIEW_DEFAULT_PATH_TO_IMAGES” constant to your path (by default: “/wp-content/uploads/“).

WP-Lightview extension of the Wordpress rich-text editor

Technical details

WP-Lightview 4.0 is bundled with the following:

  • Prototype 1.6.1 (minified)
  • Scriptaculous 1.8.2 (minified)

It has been tested with Lightview 2.5.1.

History

  • Jan, 12th 08 – 1.0 – Initial release
  • Jan, 15th 08 – 1.1 – Integrates Lightview 1.0.2
  • Jan, 28th 08 – 2.0 – Integrates Lightview 1.1. Versioned 2.0, as it breaks the compatibility with previous releases. Previous rel=”lightview” syntax has to be replaced by class=”lightview” syntax. See Lightview notes for more information.
  • Mar, 1st 08 – 2.1 – Integrates Lightview 2.01
  • Mar, 21st 08 – 2.2 – Integrates Lightview 2.0.3.1
  • Apr, 13th 08 – 2.3 – Integrates Lightview 2.2.1
  • Jun, 1st 08 – 3.0 – Integrates Lightview 2.2.9.2. Adds a TinyMCE extension to easily integrate Lightview-enabled images from the rich-text editor on the admin page.
  • Dec, 8th 08 – 3.1 – Integrates Lightview 2.4. Change PHP markup tag from <? to <?php
  • Sep, 27th 09 – 4.0 – Upgrade to Prototype 1.6.1; rewrite of the plugin to use Wordpress “wp_enqueue_script” function; Lightview is not bundled anymore with WP-Lightviews, hence the major revision.

Resources


About this page

Related articles