WebAppers

/ best free open source web resources /

Shopify

Lightview Overlay Your Images with Style

Posted · Category: Gallery, MIT License

Lightview was designed from the ground up to make the overlaying experience as nice as possible. The idea was to have the image be the most important thing while the box is there to present it without interfering with it. That is why the author has created the animated side buttons to make sure the image is always 100% visible. Button around the image will change in opacity, having lighter buttons by default and darker buttons on hover keeps the focus on the image.

Lightview is very easy to style as well, even someone who doesn’t know CSS can be able to customize it. The javascript options and the images are basically all you need to change to get the look and feel you want within seconds. One of the best things is that Lightview uses Canvas an VML to draw a those images for you. This way it’s possible to change the corner radius very fast. It also works on every screen resolution, all images are automatically resized to fit within the viewport when you open them. Even the close button will adjust as you go smaller.

lightview.png

Requirements: Prototype, Scriptaculous with Javascript Enabled
Demo: http://www.nickstakenburg.com/projects/lightview/
License: License Free

7 Comments
  • http://moviepresslive.com kuldeep

    This tool is awesome!! thanks for sharing

  • Chema Roldan

    Hi from Spain!!!

    I love this space!!!

    Go on!!! Bye, and thanks!!!

  • http://free-iphone-apple.blogspot.com mark

    Very nice. Great animation b/w images too.

  • http://www.XGhozt.com/ XGhozt

    That’s probably one of the most creative ones I’ve seen yet!

  • http://www.fedmich.com fedmich

    Thanks for sharing.
    Im using jQuery using the $, so I might need to switch to jQuery using JQ to be able to use this.

  • JbJigar

    This one is really Helpful.
    Thanks

  • elaine

    hi! I have been trying to use this tool. I am not a coding wizard and find it really complicated. Do you know where I can go to read more about how to use this tool?
    —- please see my attempt
    http://www.doubletake-london.co.uk/testgalleries/Do you have any pointers?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons