• Intro
    • Demonstrations
    • Installation
    • How to use
    • Documentation
    • Troubleshooting
    • License
    • Download
    • Contact
    Latest version:
    2.2.8 04-05-2008
    • nickstakenburg.com
    I'm looking for freelance work starting from Januari '09. Hire me
  • 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

    Image set

    Photos © Philippe Vieux-Jeanton

    Single images

    Photos © Ian Grainger

    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

    • 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 lightview.js.
    • imgNumberTemplate
      A string to go below title/caption, using #{position} and #{total}.
    • 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.
    • 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).
    • 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.

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

    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 doesn't open in the center of the window.
    Give your page a doctype, I recommend using Strict or Transitional.
    The overlay doesn't cover the entire screen.
    Give your page a doctype, I recommend using Strict or Transitional.
    When I click the lightview link, a new window opens instead of lightview.
    Lightview will look for links with the class lightview once the DOM is loaded. Even though this only takes a little while for most pages it could be that you've clicked the link before the documented was loaded.
    The effects don't work no matter what I try.
    You must have effects.js from the Scriptaculous package. Don't download Scriptaculous from my site, but get the full package at script.aculo.us
    Lightview doesn't look the same when I use it on my website.
    This could be because lightview.css is not included. It also happens when your own css is conflicting with lightview.css. Remember not to set things globally in your own css files, rules like: li { display: inline; } are bad practice. Target your elements better, this will prevent conflicts, see lightview.css if you need an example. When your css is properly coded you should have no problem implementing Lightview.
    After I did some updates on my website, lightview links stopped working.
    Use Lightview.updateViews() once the ajax update is complete to enable new/updated links.
    It's still not working.
    Make sure you have the right versions of Prototype and Scriptaculous and validate your website using validator.w3.org before posting for support on the Lightview Forum.
    I don't like the filesize.
    Gzip your Javascript files. If gzipping is not an option you should look into Protopacked. You can get the required files combined, Prototype and Scriptaculous effects.js, starting at 28kb.

    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.

    Don't have a Paypal account?

    • Lightview 2.2.8

    Permission to use Lightview on your domain is required.
    Are you aware of the License terms and agree to abide by them?

    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]
    
    
    
    *2.2.6* (April 20, 2008)
    
    * Fixed IE6 close button size and black pixels caused by 2.2.4 changes.
      CSS on the close button changed from padding to margin.
    
    
    *2.2.5*
    
    * Fixed top margin problems some sites had on Internet Explorer after inserting Lightview.
      
      details: Lightview and it's overlay are now inserted at the bottom of the page.
      This reverts a change made in 2.0.1 where those elements were added to the top of the page.
      It prevented some pages throwing 'Operating Aborted' on IE6 after lightview was inserted
      into document.body on Prototypes 'dom:loaded' event. Should that bug arise again it will be
      solved in Prototype instead. A workaround in that case is inserting lightview.js right before
      the </body> tag. [kak, zencocoon, noxhoej]
    
    
    *2.2.3 - 2.2.4* (April 19, 2008)
    
    * Fixed CSS padding within the menubar on IE for inline, ajax, and iframe views.
    
    * Fixed Firefox 3b5 issues png close button having black pixels during fade effect.
    
    * Fixed disabled buttons when going from iframe to image view in IE [pppun, jabbercode]
    
    
    *2.2.2* (April 18, 2008)
    
    * Fixed selects, embeds and objects getting visibility: hidden in inline views [Daan van der Werf]
    
    * Slightly darkened the inner previous, next and slideshow button.
    
    
    *2.2.1* (April 7, 2008)
    
    * Improved the way closing is done by using event delegation.
    
    * Fixed the option to disable overlay close [Carlos A. Gutierrez Gonzalez]
    
    
    *2.2.0*
    
    * All images are now PNG, this makes it easier to style using transparent images.
    
    * Fixed disabling sidebuttons [Basti]
    
    * Added Element.setPngBackground(image) for cross-browser png backgrounds.
    
    * Made sure visibility on select, embed and object tags remains
      unchanged after closing [rlightner]
    
    * Added 'jsp' to default iframe view [andreainfusino]
    
    * Added allowFullScreen=true for flash [corpo]
    
    * Fixed 'lightview' class not working when it's not the first 
      class on the element [Kyle]
    
    
    *2.1* (March 31, 2008)
    
    * New bottom navigation bar
       - Updated images for a cleaner look.
       - Optional previous next buttons in the view.
       - Slideshow and previous next buttons can be disabled as 
         option on the element.
    
    * Side buttons can now be disabled, 
      makes it easier to download an image.
    
    * Prevented slideshow button from hiding it's border when clicked.
    
    
    *2.0.5* (March 29, 2008)
    
    * Fix flash always on top in firefox
    
    
    *2.0.4* (March 26, 2008)
    
    * Fixed iframe bugs with reloading
      Safari needs unique iframes for urls to work properly after reload.
    
    * Refactoring and changes to the build, fixes an Opera bug.
    
    
    *2.0.3.1* (March 19, 2008)
    
    * Fixed side buttons in Safari 3.1 [dbg]
    
    
    *2.0.3* (March 7, 2008)
    
    * Fixed CSS margins on slideshow button [diwie]
    
    * Added option to disable overlay close [Vince Welter, festafotra]
    
    
    *2.0.2* (March 2, 2008)
    
    * Fixed flashvars for IE [bisam]
    
    * Fixed IE7 centering problems, by improving browser detection.
      [diwie, hhoang, mrfunny, matt_sz, stevesuk, skinner, hoppster, Kaushalya S.]
    
    * Added margin/padding 0 to CSS .lv_Frames li [Nicolas Leroy]
    
    
    *2.0.1* (Februari 26, 2008)
    
    * Fixed a bug where ajax/inline content wasn't positioned correctly when opened
      for the first time in IE. Caused by 2.0.0 change.
    
    * Added view.options.flashvars for flash (swf) content [jtclarke]
    
    * Added defaultOptions for flash [baalwww]
    
    * view.options.ajaxOptions became view.options.ajax
      ajaxOptions will still work but I will eventually drop support for it,
      so switching to ajax instead is recommended.
    
    * Added view.options.loop to quicktime [Antonio]
    
    * Added options.removeTitles to prevent removal of title attributes.
    
    * Made sure margins will also transfer to inline content [Danny Bloemendaal]
    
    * Preventing IE throwing 'Operation aborted' on dom:loaded,
      by appending to top instead of bottom [noxhoej]
    
    
    *2.0.0rc_6* (Februari 24, 2008)
    
    * Fixed firefox overlay size when resizing the window [ZeBadSeed]
    
    * Fixed IE overlay not covering full screen on small pages.
      Changed IE6 CSS expression to use Prototype.
    
    * Fixed firefox/IE scrollbars appearing on small pages when resizing [ZeBadSeed]
    
    
    *2.0.0rc_5* (Februari 21, 2008)
    
    * Fixed IE7 bug where overlay didn't cover the entire screen in some setups.
    
    * Fixed a bug with overlay resizing in IE6
    
    
    *2.0.0rc_3* (Februari 20, 2008)
    
    * Added mp3 to quicktime autodetect [dy]
    
    * Added some documentation to the CSS.
    
    * Fixed CSS issues that could cause incorrect display of rounded corners and iframes.
      [cssguru, Jordi Berges, sroush, drmikey]
    
    * Fixed a bug where IE was throwing an alert on iframes that attempted to set focus.
      This is not possible when the iframe is still hidden, so the iframe is now inserted later.
    
    * Fixed Opera overlay and resize problems. Opera refactoring: since Opera is one of the few
      that supports fixed positioning properly, a few observers could be removed.
    
    * Fixed iframe resize issue in non-fullscreen mode when resizing to stay within the viewport.
    
    * Fixed inline content for IE7, made sure inline content is placed back before the 
      overlay is hidden. [Sven]
    
    * Fixed a bug with the topclose button after opening a view with it several times.
      and fixed a bug where it did not appear at all in Opera.
    
    
    *2.0.0rc_2* (Februari 19, 2008)
    
    * Fixed: top_innerclose.jpg failed to load correctly. [diwie]
    
    * Improved the cleanup of content when moving between views.
    
    
    *2.0.0_rc1* (Februari 18, 2008)
    
    * Made sure ajaxOptions onComplete uses Function#wrap only once.
    
    * Made sure the view stays centered in Firefox when resizing and scrolling [kangax]
    
    * Fixed Lightview for Safari2, refactoring to use setStyle(string) for speed [tobie]
    
    * Added HTML creation out of object, replaces the Eolas fix.
    
    * Added type detection and extension detection.
    
    * Added Lightview#getHiddenDimensions, a placeholder for patched Element#getDimensions,
      it allows to get the dimensions of an element even if it has display:none ancestors.
      Also posted it on Prototype trac: http://dev.rubyonrails.org/ticket/11142
    
    * Removed effect-less part of code. And made it possible to only add effects.js.
      It slims down the code with 20% and allows me to only worry about Effect.Queues
      instead of setting timers.
      
      When only using effects.js it's impossible to tell if the right scriptaculous
      version is included. The version check will know about this and ignore the scriptaculous
      check in this case.
    
    * Effect.Parallel gives unexpected results when queued with the others,
      modified the order of effects to make sure effects still queue right.
    
    * Changed topclose button to be on the left side for Mac, right side on others.
    
    * Fixed topclose button having a double side margin in IE, switched to padding on parent.
    
    * Fixed a bug that caused an area of the screen not being clickable after lightview
      closed and you started scrolling or resizing in firefox and safari.
    
    * Made sure sidebuttons never pop out after switching from media to external and back.
    
    * Added Lightview.error to hold possible error messages, you can now change the
      plugin message to your own language.
    
    * Added Plugin check for Quicktime and Flash Lightview will show a message that 
      informs you to download the required plugins. Added pluginspages.
    
    * Made sure Lightview.View extends only once.
    
    * Added clearContent to clean up when closing and switching between views.
    
    * Added topclose button.
    
    * Fixed a bug where firefox showed a background offset effect on the sides of 
      Lightview, caused by position: fixed in combination with negative margin and opacity.
      This seems to be fixed in FF3b2, for now firefox2 can't use position:fixed.
      When FF3 is adopted I'll reintroduce position:fixed for firefox.
    
    
    
    *1.5.0* (Februari 4, 2008)
    
    * Using event delegation for side buttons. This allows to recreate the sidebutton divs
      without having to reobserve them. IE needs to recreate sidebuttons each time.
    
    * Fixed hidden side button being clickable in IE7 after going through a serie of slides
    
    * Fixed loading element to pass xhtml validation
    
    * Removed IE overlay .closeable, it's no longer required
    
    * Prefixed all classes with lv_ to prevent CSS conflicts.
    
    * Fixed a bug when resizing that caused a 1pixel jump from left to right.
    
    * Prevented resizing when going to a view that has the same dimensions.
    
    * Added autodetect of type, this could save setting the rel attribute.
    
    * Cleaned up the way the previous next buttons are displayed.
    
    * Added bottom margin to title
    
    * Added ajaxOptions for Ajax views, you can use it like the options on Ajax.Updater
      Lightview.show({
        href: '/items',
        rel: 'ajax'
        options: {
          ajaxOptions: { method: 'get' },
          fullscreen:true
        }
      });
    
    * Added fullscreen mode for ajax/iframe/inline views
      Lightview.show({ href: 'http://www.prototypejs.org', options: { fullscreen:true }});
    
    * Added options parameter for ajax/iframe/inline content.
      Usage it like you would use an object:
      <a href='http://www.prototypejs.org' rel='iframe' title='Prototype :: width: 800, height: 600'>
      
      or:
      Lightview.show({
        href: 'http://www.prototypejs.org',
        rel: 'iframe',
    	title: 'Prototype', 
        options: { width: 800, height: 600 }
      });
    
    * Lightview.show now accepts an object, you can use it like this:
    
    * Side buttons will now fade/appear with the content when moving between views.
    
    * Prevented title attribute tooltips from showing, the original title is stored in 
      element._view._title then removed.
    
    * Prevented close button flicker when going to a different view
    
    * Smoother fading on next/previous
    
    * slideshow.display toggles the slideshow button, overlay.display now works
    
    * Fixed <base  tag throwing page not found error in IE6 [cssguru, noxhoej]
    
    * Added options.preloadHover to toggle preloading of images on mouseover.
    
    * Fixed IE6 prev next buttons when no effects.
    
    * Fixed IE6 requiring effects for positioning [noxhoej]
    
    * Version check can now check for any version of Prototype/Scriptaculous.
      Also added to Scriptaculous trac: http://dev.rubyonrails.org/ticket/10966
    
    * Changed dimensions of the slideshow buttons for better alignment.
    
    * Lightview.View Class added, it extends elements with _view, containing everything Lightview
      needs to get out of that element, including functions Lightview can use.
      This speeds things up by preventing duplicate requests to element attributes.
    
    * Fixed missing var in preloadSurroundingImages.
    
    * Fixed missing 'px' in canvas drawing.
    
    * Refactoring of corner drawing.
    
    
    *1.1.0*
    
    * Lightview now works in Safari 2+.
    
    * Changes to the API. Switched to the class attribute.
      The rel attribute is used to set a gallery, read the installation for updates.
    
    * Fixed a bug with preloading on mouseover.
    
    * Fixed bug during resizing where incorrect rounding resulted in a 1px jump.
    
    * Allow Rails asset tagging [antimatter]
    
    * Improved the CSS the avoid backgroundColor/borders when your CSS clashes with lightview.
    
    
    *1.0.4*
    
    * Fixed slideshow, it played just one time when pressing p, because of 1.0.3 changes.
    
    
    *1.0.3*
    
    * No more jittering resize effect in Firefox.
      Safari, IE7+ and Opera also benefit from this update.
    
    * Effect on hide. [kriona]
    
    * Home goes to the first image of a set, End to the last
    
    * Side buttons are now clickable. [natrium, JD]
    
    
    *1.0.2*
    
    * Added custom events lightview:opened and lightview:hidden
    
    * Added resizeDuration to options
    
    * Fixed a bug where going from a resized image to the next, data width would stay the same.
    
    
    *1.0.1*
    
    * Valid XHTML markup. No longer using the caption attribute but splitting
      the title attribute using :: or a custom character combination. [Daniel Skinner]
    
    * Improved CSS, list items will no longer show as squares, noticeable in Wordpress themes.

    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, thickbox, lytebox, lightwindow, light, box, lightbox, slimbox, lytebox, lytebox, litebox window, web2.0, Creative Commons by-nc-nd License

    -- lightbox alternative, prototype, thickbox, slimbox, overlay, photos, web2.0, quicktime, image lightbox, scriptaculous, litebox, modal, nick, stakenburg, include the lightbox, slideshow, reference lightbox, gallery, add rel lightbox, lightbox.js, lightwindow, script lightbox, css lightbox, language javascript lightbox, scriptaculous lightbox, lightbox is, set lightbox, lytebox, gallery lightbox, effects, javascript lightbox.