jQuery Lightview 2.0

My jQuery LightView i an advanced plugin for jQuery. It can be implementet on any website in minutes with it’s default settings. If you don’t like the default settings everything can be changed to meet your own needs. Below I have made a series of demonstrations in the uses of this jQuery plugin.

Standard setup

This is how my jQuery LightView looks like in it’s raw form. No settings is passed to the plugin and my imagetags holds an absolute minimum of information: imagehref, type and showinfo.

Standard settings

My jQuery LightView have a lot of settings that can be overwritten. Read about them all on this page:
LightView settings

Javascript

jQuery(document).ready(function() {
  jQuery("#ImageGalleryStandard img").CreateGallery();
});

Html

<div id="ImageGalleryStandard">
  <img src="[Link til thumbnail]" imagehref="[Link til stort billede]" />
</div>

Example

The Full monty

In this example no horses are held back. It shows many of the things the gallery can do… all in one go.

Javascript

jQuery(document).ready(function() {
  var settings = {
    blockOpacity: 0.25,
    blockBgColor: "white",
    showImageList: true,
    imageInformationHeight: 95,
    imageInformationTemplate: '<h5>[header]</h5>[description]<br />size: [width] x [height] og [imagesize] KB<br />Image [imagenumber] of [numberofimages]<br /><a href="[href]">Download the image</a>'
  };
  jQuery("#ImageGalleryFullMonty img").CreateGallery(settings);
});

Html

<div id="ImageGalleryFullMonty">
  <img src="[Link til thumbnail]" imagehref="[Link to a large image]" href="[Link to download]"
    type="image" header="Lutea" description="White Lutea with a yellow center"
    showinfo="true" />
</div>

Example

The scraped version

You can offcourse, create a setup stripping the jQuery LightView of all unnecessary visual stuff. In this example some custom graphics is used for the forward, backwards and close buttons.

Javascript

jQuery(document).ready(function() {
  settings = {
    Corner_TR: 'http://jscripts.s3.co3.dk/Co3Gallery/x.gif',
    Corner_BL: 'http://jscripts.s3.co3.dk/Co3Gallery/x.gif',
    Corner_BR: 'http://jscripts.s3.co3.dk/Co3Gallery/x.gif',
    Corner_TL: 'http://jscripts.s3.co3.dk/Co3Gallery/x.gif',
    ArrowPrev: 'http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/arrow-left.png',
    ArrowNext: 'http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/arrow-right.png',
    Close: 'http://rune.gronkjaer.dk/blog/wp-content/BlogPages/javascript_rgLightview/btn-close.png',
    Play: '',
    SideMargin: 10,
    PaddingTop: 0,
    PaddingRight: 0,
    PaddingBottom: 0,
    PaddingLeft: 0,
  };
  jQuery("#ImageGallerySkrabet img").CreateGallery(settings);
});

Html

<div id="ImageGalleryStandard">
  <img src="[Link to thumbnail]" imagehref="[Link to large image]" />
</div>

Example

One single button to open a gallery

Sometimes you don’t want to show thumbnails and just want to let the user open and skip through the images. This example shows hao to do it.

Javascript

jQuery(document).ready(function() {
  jQuery("#ClickToOpen").click(function(){
    jQuery("#ImageGalleryHidden img").CreateGallery(settings);
  });
});

Html

<div id="ImageGalleryStandard">
  <img src="[Link to thumbnail]" imagehref="[Link to large image]" />
</div>

Example

Click me to open the jQuery LightView Gallery

Cases

The jquery LightView has allready been used on countless sites. Below I have listed some great examples on real life usage.

MCH Messecenter Herning

Updated: 6. May 2010
MCH uses jQuery LightView to show images of their meeting, congresses and parties. They use the information area for writing out the name of the image file
The solution uses the Dynamicweb imagegallery module for listing the images.
MCH’s “Meetings” page
MCH

Alux

Updated: 6. May 2010
Alux shows their products in jQuery Lightview. they use both small thumbnails and the information area. To Alux the jQuery LightView means more information in less space.
The solution uses the Dynamicweb imagegallery module for listing the images.
Alux product page (Page in danish) (Push “Se flere billeder af Rullegitter” to the right of the large image)
Alux

Alfred Priess A/S

Updated: 6. May 2010
Alfred Priess A/S have an extensice casearea in wich jQuery Lightview makes it possible to show large versions of their images. In this case the looks of jQuery LightView has been changed dramatically. The corners are sharply edged and all buttons have been customized.
The solutions uses the regular paragraphs of Dynamicweb to write the information of the images.
Alfred Priess case pages
Alfred Priess

Sport college Ikast

Updated: 6. May 2010
Sport college Ikast have a large photoarchive for their school. The jQuery LightView informationarea is used to offer a downloadable version of the images and small thumbnails to let the user see the previous and next images.
The solution uses the Dynamicweb imagegallery module for listing the images.
The frontpage of the Sport college Ikast imagearchive (Page in danish)
Sport college Ikast

Danish fitness

Updated: 6. May 2010
Danish fitness use the jQuery Lightview to a number of teaser images.
The solution uses the Dynamicweb imagegallery module for listing the images.
Danish fitness imagegallery (Page in danish)
Dansk fitness


As the above sites changes their content the jQuery LightView may have been remove. If this is the case please write me, and let me know: my email.

Would you like to use it?

You are free to use my plugin. If you link back here I will be happy.
Download the minified version here: