Lightview was built to change the way you overlay content on a website.
- Clean: Designed to compliment your content.
- Fast: Smart image preloading.
- Easy to customize: You don't even have to know CSS.
- Rounded: Adjustable rounded corners, without PNGs.
- Smart resizing: Content will always fit on your screen.
- Custom events: Using Prototype 1.6
- Slideshow: One button slideshow.
- Effects: Using Scriptaculous.
- Works on all modern browsers
Other media
-
Quicktime -
Ajax Form -
Ajax Post 
Iframe-
Inline content -
SWF
Upload all files from the lightview library to your server: javascript, css and the images.
Download Prototype 1.6.0.2 and Scriptaculous 1.8.1 and upload the files from these libraries as well. When that's done, refer to the required files in your header as in the example below.
The correct order of the files is as in the example, make sure you follow it. Even though effects.js is not in the list below, scriptaculous will dynamically include it, so make sure to upload it as well.
<link rel="stylesheet" type="text/css" href="css/lightview.css" /> <script type='text/javascript' src='js/prototype.js'></script> <script type='text/javascript' src='js/scriptaculous.js?load=effects'></script> <script type='text/javascript' src='js/lightview.js'></script>
If you want to make the filesize smaller, have a look at Protopacked. It contains compressed versions of Prototype and Scriptaculous. You can have the required files, Prototype and effects.js, starting at 28kb.
A view is created using a links class attribute. Single images should have the rel attribute set to 'image', but you can also use no rel attribute at all.
<a href='image.jpg' class='lightview'>My image</a>
An image gallery can be created using rel='gallery[setname]'
<a href='image1.jpg' class='lightview' rel='gallery[myset]'>Image 1</a> <a href='image2.jpg' class='lightview' rel='gallery[myset]'>Image 2</a>
You can set the title and caption using the title attribute. Use the characters '::' if you want both title and caption. The character combination can be changed using the titleSplit option.
<a href='leopard.jpg' title='A title' class='lightview' >Leopard</a> <a href='gazelle.jpg' title='This image has a title :: And a caption' class='lightview'>Gazelle</a> <a href='cheetah.jpg' title=":: I don't have a title, just a caption" class='lightview'>Cheetah</a> <a href='rhino.jpg' title="Left in split characters will get stripped :: " class='lightview'>Rhino</a>
Other media accepts a thirth parameter for options.
<a href='http://www.google.com' rel='iframe' title='Google :: :: fullscreen: true' class='lightview' >Google</a> <a href='http://www.yahoo.com' rel='iframe' title='Yahoo :: A caption :: width: 800, height: 600' class='lightview' >Yahoo</a>
You can create inline content views by adding #id to the href. As options you can use autosize on ajax and inline content, this will automatically resize the view to the content recieved. topclose can be used on ajax, iframe and inline content to have the close button that slides out instead of the static one.
<a href='#hiddenform' class='lightview' title=' :: :: topclose: true, autosize: true' >Show Form</a>
<a href='/ajax/' rel='ajax' title=' :: :: ajax: { onComplete: callback }' >Ajax Form</a>
<a href='#anotherElement' class='lightview' title=' :: :: menubar: false' >No menubar</a>
It's possible to show a view using an object:
Lightview.show({
href: '/ajax/',
rel: 'ajax',
title: 'Login',
caption: 'Enter your username and password to login',
options: {
autosize: true,
topclose: true,
ajax: {
method: 'get',
onComplete: function(){ $('name').focus(); }
}
}
});
// If you have firebug installed you can run this from your console, have fun.
Lightview.show({ href: 'http://www.google.com', rel: 'iframe', options: { width: 800, height: 500 }});
The type of view will be auto-detected using the url you provide. If for some reason you want to force a specific type of view you can overwrite the auto-detection using the rel attribute.
Lightview.show({
href: 'http://movies.apple.com/movies/newline/semi_pro/semi_pro-tlr1_h.480.mov',
rel: 'quicktime' // not required
});
Configuration options:
You can set the following in lightview.js
-
backgroundColorThe background color of the view.
-
borderPixel size of the border
-
buttons.opacityChanges the opacity of the buttons inside the view for different states (normal, hover, disabled).
-
buttons[button].displayToggle the display of the side, inner previous/next and the slideshow buttons.
-
cyclicWhen true, galleries will be cyclic, allowing you to keep pressing next/back.
-
imagesThe directory of the images, relative to lightview.js.
-
imgNumberTemplateA string to go below title/caption, using #{position} and #{total}.
-
overlayToggle the overlay or set it's opacity. On Mac Safari and Firefox overlay.png is used, you will need to modify it for those browsers.
-
preloadHoverPreloads images on mouseover when true.
-
radiusThe pixel radius of the corners.
-
removeTitlesSet to false if you want to preserve title attributes.
-
resizeDurationThe duration of the resizing.
-
slideshowDelayThe time each image is visible during a slideshow.
-
titleSplitThe characters that split title caption and options, '::' by default. This means that if you only want to give options you use: title=' :: :: fullscreen: true '
-
transitionScriptaculous transition during resizing.
-
viewportResizes images to stay within the viewport when they open, if true.
-
zIndexzIndex of the lightview, the overlay has this value - 1.
Forcing media type using 'rel'
You can overwrite the auto detection of the media type. This is useful when Lightview is not detecting your media. For example, when including Youtube or Google video through Flash. The following types are supported using the the rel attribute. For example rel='flash'.
-
ajaxForces lightview to get the content using an ajax call.
-
flashForces lightview to treat the content as flash.
-
imageForces lightview to treat the content as an image.
-
iframeForces lightview to push the content into an iframe.
-
inlineForces lightview to show the content as inline. A shortcut to this method is using '#id' as the href.
-
quicktimeForces lightview to use Quicktime to show the content.
Element options:
These options can be used as thirth parameters in the title attribute, seperated by commas. title='title :: caption :: autosize: true, topclose: true'
-
ajaxAdditional options you would normal put as options on an Ajax.Request.
-
autosizeFor inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results.
-
widthinteger, sets the width of the view in pixels
-
heightinteger, sets the height of the view in pixels
-
flashvarsflashvars to put on the swf object
-
fullscreentrue or false, shows the view in fullscreen, usable on iframes.
-
innerPreviousNexttrue of false, toggle the inner previous and next button for this image.
-
looptrue of false, for quicktime movies
-
menubartrue or false, show or hide the menubar (title/caption/close).
-
scrollingtrue or false. For inline, iframe and ajax views, sets scrolling to auto when true or disables scrolling when false.
-
slideshowtrue or false, toggle the slideshow button for this image.
-
topclosetrue or false, show the sliding close button instead of the static one.
Functions:
The following function are available when using Lightview.
-
Lightview.updateViews()When dynamic content with a lightview is added to the page, this function needs to be called to scan the page for any new links that need to be activated.
-
Lightview.show(param)Accepts 'id', element and object as parameter and shows the view associated with it.
-
Lightview.show('#id')A shortcut for inline content, this show the element with the id using an inline view.
-
Lightview.hide()Hides lightview.
Custom Events:
-
lightview:opened
You can observe the document or individual links for this event. A function can be called when the event fires. Within the function, event.target will refer to the element that was opened, a few examples:
document.observe('lightview:opened', function(event) { alert('You opened ' + event.target.href); }); $('myId').observe('lightview:opened', function(event) { new Effect.Pulsate($('lightview').down('.title')); }); -
lightview:hiddenFires when you hide lightview, can be used like the :opened event.
Keyboard:
-
Arrow left / rightPrevious and next image.
-
P / SPlay and stop the slideshow.
-
Home / EndFirst and last image of the set.
-
EscHide lightview.
Permission to use Lightview on your domain is required and can be obtained by paying a small fee. For non-commercial domains this will allow you to use Lightview under a Creative Commons Attribution-Noncommercial-No Derivative Works License. When you get permission for a commercial domain you may use Lightview under the terms of the Creative Commons Attribution-No Derivative Works License.
-
Non-Commercial
Single domain
A small fee is required for non-commercial use.
-
Non-Commercial
Unlimited
Get permission to use Lightview and future updates on all the non-commercial websites you develop in the future, at no further cost.
-
Commercial
Single domain
This will give you permission to use Lightview on a single commercial domain.When is my website considered commercial?
-
Commercial
Unlimited
With unlimited permission you are allowed to use Lightview and all future updates on any commercial website you develop in the future, at no further cost.
Note: When updating make sure to replace all files.
Changelog
Toggle all changelog entries
*2.2.7 - 2.2.8* (May 03-05, 2008) * Made it possible to disable the keyboard buttons [donwilson] * No more wmode transparent on flash to preserve background colors [xylef] * Fixed console warning from 2.2.7 [mlbfan86]
Use the Lightview Forum for support related questions, feedback, feature requests and bug reports. If you are posting for support please read through the Troubleshooting section first.
For anything non-support related you can contact me at nick@nickstakenburg.com. Please use the forum to get support.
lightview, overlay, images, prototype, photos, effects, scriptaculous, javascript, slideshow, gallery, video, quicktime, flash, inline, lightbox, window, web2.0, Creative Commons by-nc-nd License