Lightview was built to change the way you overlay content on a website.

• Clean: Designed to compliment your content.
• Fast: Smart image preloading.
• Easy: Customizable without having to know CSS.
• Rounded: Adjustable rounded corners, without PNGs.
• Smart: Content resizes to always fit on your screen.
• Slideshow: One button slideshow.
• Works on all modern browsers.

6+ 2+ 2+ 9.25

Your document needs a doctype, I recommend using a Transitional or Strict doctype. Here's how to setup a Transitional doctype, at the top of your document above your html tag add:

Upload all files from the lightview package 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 to the javascript directory as well. After uploading, include all 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.

<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

• backgroundColor
  The background color of the view.
• border
  Pixel size of the border
• buttons.opacity
  Changes the opacity of the buttons inside the view for different states (normal, hover, disabled).
• buttons[button].display
  Toggle the display of the side, inner previous/next and the slideshow buttons.
• cyclic
  When true, galleries will be cyclic, allowing you to keep pressing next/back.
• images
  The directory of the images, relative to the javascript file ('../images/lightview/') or an absolute url ('http://yoururl.com/images/lightview/').
• imgNumberTemplate
  A string to go below title/caption, using #{position} and #{total}.
• keyboard.enabled
  Enable or disable the keyboard buttons.
• overlay
  Toggle 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.
• overlay.close
  Toggle if clicking the overlay should close Lightview.
• preloadHover
  Preloads images on mouseover when true.
• radius
  The pixel radius of the corners.
• removeTitles
  Set to false if you want to preserve title attributes.
• resizeDuration
  The duration of the resizing.
• slideshowDelay
  The time each image is visible during a slideshow.
• titleSplit
  The characters that split title caption and options, '::' by default. This means that if you only want to give options you use: title=' :: :: fullscreen: true '
• transition
  Scriptaculous transition during resizing.
• viewport
  Resizes images to stay within the viewport when they open, if true.
• zIndex
  zIndex 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'.

• ajax
  Forces lightview to get the content using an ajax call.
• flash
  Forces lightview to treat the content as flash.
• image
  Forces lightview to treat the content as an image.
• iframe
  Forces lightview to push the content into an iframe.
• inline
  Forces lightview to show the content as inline. A shortcut to this method is using '#id' as the href.
• quicktime
  Forces 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'

• ajax
  Additional options you would normal put as options on an Ajax.Request.
• autosize
  For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results.
• width
  integer, sets the width of the view in pixels
• height
  integer, sets the height of the view in pixels
• flashvars
  flashvars to put on the swf object
• fullscreen
  true or false, shows the view in fullscreen, usable on iframes.
• innerPreviousNext
  true of false, toggle the inner previous and next button for this image.
• loop
  true of false, for quicktime movies
• menubar
  true or false, show or hide the menubar (title/caption/close).
• overlayClose
  when false, disables the overlay close on click for this view.
• scrolling
  true or false. For inline, iframe and ajax views, sets scrolling to auto when true or disables scrolling when false.
• slideshow
  true or false, toggle the slideshow button for this image.
• topclose
  true or false, show the sliding close button instead of the static one.
• wmode
  flash uses wmode: "transparent" by default, overwrite using wmode: "window" or "opaque".

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 shows 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:hidden
  Fires when you hide lightview, can be used like the :opened event.
• lightview:loaded

  Fires on the document when Lightview is loaded and ready for a Lightview.show call.

  document.observe('lightview:loaded', function() {
    Lightview.show('myId');
  });

Keyboard:

• Arrow left / right
  Previous and next image.
• P / S
  Play and stop the slideshow.
• Home / End
  First and last image of the set.
• Esc
  Hide lightview.

• Lightview 2.3.2

Note: When updating make sure to replace all files.

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, I don't have the time to answer every support related email individualy.

lightview, overlay, images, prototype, photos, effects, scriptaculous, javascript, slideshow, gallery, video, quicktime, flash, inline, lightbox, thickbox, lytebox, lightwindow, light, box, lightbox, slimbox, lytebox, lytebox, litebox window, web2.0, Creative Commons by-nc-nd License