Lightview JS WordPress Plugin

14Mar

Lightview JS WordPress Plugin

Update: I will no longer be updating the lightview-js WordPress plugin with new versions of Lightview from Nick Stakenburg as the author has changed the licensing requiring users to purchase Lightview. As I DO NOT purchase software and frown upon authors who distribute their software freely and then decide to require licensing fees; this plugin is now end of life.

A media viewer application written entirely in JavaScript. Using Lightview, website authors can display pictures, movies, websites, inline content and more in all major browsers without navigating away from the linking page.

This plugin uses Lightview written by Nick Stakenburg.

Javascript libraries supported are: Prototype + Scriptaculous. Prototype + Scriptaculous are included with the plugin as the versions packaged with Wordpress are below the minimum requirements.

Screenshots

Installation

Upload the `lightview-js` folder to the `/wp-content/plugins/` directory
Activate the plugin through the ‘Plugins’ menu in WordPress

Upgrade

Deactivate the plugin through the ‘Plugins’ menu in WordPress
Delete the previous `lightview-js` folder from the `/wp-content/plugins/` directory
Upload the new `lightview-js` folder to the `/wp-content/plugins/` directory
Activate the plugin through the ‘Plugins’ menu in WordPress

Usage

Create a link in your post in the following format:
```
<a href="http://domain.tld/directory/to/image.jpg" class="lightview">Image</a>
```
The above link can be to pretty much anything including websites, video files, YouTube, Google Video, inline content.

This is the minimum code required to use this plugin.
Please see the markup on the Lightview javascript authors usage page for more information such as sizing the media. . Please keep in mind that I did not write the Lightview javascript I only created a WordPress plugin that implements it.
Be sure to include `class=”lightview”` as this activates the plugin.
If `rel=”gallery[album]“` is included the portion listed here as `[album]` will group multiple pictures into an album called album.

NOTE: Do not use the visual editor for doing the above use the code editor. When modifying this post in the future do not use the visual editor; please use the code editor always.

Examples:

<a href="http://domain.tld/directory/to/image.jpg" class="lightview" rel="gallery[album]">Image</a>

<a href="http://domain.tld/directory/to/image.jpg" class="lightview" rel="gallery[album]"><img src="http://domain.tld/directory/to/image.jpg" /></a>

<a href="http://sivel.net/" class="lightview" rel="iframe" title="Sivel.net :: My Site :: fullscreen: true">Sivel.net</a>

Change Log

0.2 (2008-03-14):

Initial Public Release

To Do

Nothing as of yet

Download
Lightview JS version 0.2
Archived Versions

26 comments

Friday, March 14th, 2008 at 10:26 am and is filed under Plugins, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. You can print this post.

Comments

Posted by Marti on Monday 17th March
Thank you for this great plugin! I have one question. Is there a way of adding the description of the photos to the bottom of the page under the title?

Posted by Matt on Tuesday 18th March

@Marti: Yes all you need to do is separate the title and the caption with ::

For example:

<a href="http://www.example.org/image.jpg" title="This image has a title :: And a caption" class="lightview" rel="nofollow">Image</a>

Posted by Paul on Tuesday 18th March
Thankyou for sharing this plugin. It’s just what i was looking for. I just have one problem that is really annoying me. The plugin re-styles all of my links on the main pages. Every time i activate the plug-in my links turn to a plain red colour. Do you have any suggestions why this might be happening?
Posted by Paul on Wednesday 19th March
OK i solved the problem i was having. The links that were affected were the .textlink class. This seems to be a generic class within wordpress i.e. it cannot see .textlinks when the plugin is activated. I swapped .textlinks for p a / p a:hover. I don’t know why this works but i’m guessing they’re just higher up than classes in the css pecking order.
Posted by Marti on Friday 21st March
Thank you, Matt
Posted by Martin on Monday 31st March
Great work, thanks!

I see on the lightview website that it is not commercially free. No problem for me because I only use it to blog, but might be for some others so I wanted to let you know.
Posted by Matt on Tuesday 1st April
@Martin: Thanks for the heads up. It appears as though the author of Lightview as updated to a new version and changed the license. I’ll make sure to include that license update when updating the plugin for the new Lightview version.
Posted by Pablo on Monday 7th April
o.k. this is a bit of an obscure one, but has anyone tried using this as well as toggle boxes. I just can’t get them to work together. I know theres some issues with combining J-Query/Scriptaculous/Mootools. If anyone has both working on the same web page could you let me know how u did it, and which library ur using.
Posted by Josh Sands on Tuesday 15th April
Hi Matt, will this play flv files like your shadowbox plugin?
Posted by Matt on Wednesday 16th April
@Josh Sands: Lightview does have the capability to display flash files. However unlike Shadowbox it does not come with an FLV player. To display FLV videos in Lightview you would need to download an FLV Player such as http://www.jeroenwijering.com/?item=JW_FLV_Player and follow the instructions on using it. Then all you need to do is add the lightview class to the link and you should be good to go.
Posted by Josh Sands on Thursday 17th April
Thank you Matt, I’ll give that a shot this weekend.
Posted by gansad zen on Sunday 20th April
Hi Matt,
I’m using wp2.5; how can I use this plugin to display the comment form? Visitor can just click on a text link and the comment form appears without them having to scroll down through the existing comments, to see the form? thanks
Posted by Matt on Monday 21st April
@gansad zen: It is pretty simple. All you need to do is create a link in your post that looks like:

<a href="#commentform" class="lightview">Comment Form</a>

When a user then clicks on this link it will open the comment form in lightview. I will note that this link will not work while on the home page. It would only work while on the post page. There are ways to get it to work but I’d rather not go into that much detail in a comment. Use the contact link at the top of the page if you want to get more information.
Posted by Anja on Tuesday 29th April
Some photos seem to disable my gallery. I simply can’t figure this one out. If someone knows about it, I’d really appreciate it.

My test gallery is here:
http://anjaladegaard.dk/blog/?page_id=25

You’ll see that the top and bottom album work fine with Lightview. But the middle one, which is my friend’s photos, doesn’t.

It doesn’t work even though they’re uploaded to my own Google web gallery with my own Picasa. When he uploads them, they don’t work either. My photos always work, his never work. It seems to be the photos themselves that make the difference.

Thanks for your time,
Anja
Posted by Anja on Thursday 1st May
Doh, I found out what it was. Spaces in his file names.

=) Anja
Posted by Christian on Monday 12th May
Hey Matt,

i just don’t get it work for me? just added the “class=”lightview”" but the images won’t “popup” ;(
Posted by Matt on Thursday 15th May
@Christian: I wish I could help, but unless you give me a link to a post where you are trying to use the plugin it is doubtful that I could diagnose the problem.
Posted by Christian on Thursday 15th May
Sorry Matt,

here is a post where i tried to use lightview but it won’t work :(

http://www.viernullvier.org/?p=55

thanks a lot!
Posted by Matt on Thursday 15th May
@Christian: I see 2 things right away when looking at the source for your page.

1: The DOCTYPE declaration happens after
```
<div id="container">
  <div id="oben">
```
which is invalid. There should be no html code before the DOCTYPE declaration.

2: I do not see the code that should have been inserted into the head of the document by Lightview which means that your theme probably does not include <?php wp_head(); ?> in header.php. This should appear on the line immediately before </head> in the file titled header.php.
Posted by Christian on Saturday 24th May
Its working!

Thanks Matt :))
Posted by YouTube Downloader on Wednesday 4th June
I like light style,so this plugin is very useful for me.
Posted by George on Monday 7th July
Can you please tell me how to remove the image loading, when the cursor is hovering over the plugin ? I have put many images, ~2mB each on my blog, and if somebody hovers the images, they start loading. I only want to start loading when being clicked.

Thank you.

P.S.: I’ve also sent this via the contact form, but maybe there is somebody else looking for this fix.