Overview

Visual LightBox is a free wizard app that helps you easily generate popup image galleries with a terrific lightbox overlay effect, in a few clicks without writing a single line of code. Just drag&drop your photos into online website builder window, press "Publish" and your own picture slideshow with beautiful lightbox effects will open in the browser instantly! No javascript,css,html coding, no image editing, just a click to get your linkin bio ready.
Responsive, mobile-ready, unobtrusive, search engine friendly, translated to 31 languages!

Main Features

  • Cross-browser - works perfectly on all browsers (including IE6)
  • GUI wizard - no coding, just point-&-click
  • Responsive - smoothly adapts to any browser resolutions and device screens
  • Mobile-ready - optimized for Android and iOS devices
  • Search engine friendly and semantically valid
  • Unobtrusive - even without Javascript, the images are still accessible
  • Huge collection of fancy Lightbox themes - see website builder app
  • Easy export to Joomla module or Wordpress lightbox plugin
  • Keyboard navigation - use left/right arrow key to navigate
  • Floating and smooth cross-fade transition
  • Lightweight jQuery Lightbox code (12Kb only)
  • Flickr, Photobucket, Picasa support
  • Built-in FTP client - upload directly to your server
  • Visual insert-to-page
  • 31 language interface

What's New

Visual Lightbox v6.1 (Aug 7, 2021)

  • New Neoteric template
  • New thumbnail theme - Overlay Long
  • Some improvements for mobile screens
  • Fixed problem with pre-loading images in lightbox bootstrap carousel

Visual Lightbox v5.9 (Jan 8, 2021)

Visual Lightbox v5.7 (August 21, 2020)

Visual Lightbox v5.6 (July 04, 2020)

Visual Lightbox v5.4 (Jan 16, 2019)

  • New Dominion and Catalyst templates :
    Dominion Template Catalyst Template
  • Updated "Insert to Page" wizard. Now you can insert galleries with different styles into the same page
  • Updated Vista template
  • Updated Rotate thumbnail theme
  • Bug Fixes

Visual Lightbox v5.3 (Nov 16, 2014)

  • Responsive - smoothly adapts to any browser resolutions and device screens
  • Mobile-ready - support for iOS and Android devices
  • New Prime Time template:
    Prime Time Template
  • New thumbnail themes - Zoom, Overlay, Caption Slide, Rotate
  • Updated Noble, Chrome, Crystal, Noir, Pinboard templates:
    Noble Template Chrome Template Crystal Template Noir Template Pinboard Template
  • "Zoom on mouseover" option - opens popup on mouseover, not a click
  • jQuery updated to latest version
  • Multiline description
  • Byelorussian language added
  • Bug Fixes

Visual Lightbox v5.0 (Jan 5, 2013)

  • Close the pop up box on "Esc" hit
  • New interface languages: Hebrew and Finnish
  • Updated Android and Dark Glass themes
    • Android Template  Dark Glass template

  • Support for multiple galleries in Joomla module
  • Fixed import from Photobucket and Flickr
  • Interface languages added to Mac version
  • Bug Fixes

Visual Lightbox v4.8 (Oct 12, 2011)

Visual Lightbox v4.7 (Jan 27, 2011)

Visual Lightbox v4.4 (Dec 20, 2010)

  • Description support for Photobucket and Flickr
  • Major and minor bug fixes.

Visual Lightbox v4.3 (Sep 15, 2010)

  • New templates are added - iPhone, Android and Aero;
    • IPhone Template    Vista Aero Template

  • Improvements in 'Insert to Page' wizard:
        - Now you can add several galleries to one page;
        - Multilevel undo/redo;
        - Faster page loading;

    Insert to Page

  • Bug fixes.

Visual Lightbox v4.0 (Aug 13, 2010)

  • "Insert to Page" option. Inserting a gallery to page becomes easier. "Insert to Page" wizard opens a page in a browser view and you simply click inside the page to select where you want the gallery to appear and press "Insert After". No more HTML editing required!
    Insert to Page

Visual Lightbox v3.3 (Aug 3, 2010)

  • Picassa support. Add Picassa album or a single photo to your lightbox gallery!
    Picassa
  • New Picassa thumbnail is added.
    Picassa
  • Slideshow Delay and Resize Speed parameters are added.
  • 'Enable right click on image' option is added.
  • Changing captions of all selected images at once.

Visual Lightbox v3.2 (Apr 20, 2010)

  • Add images from Flickr tags to your gallery!
  • 'Image description sliding' option is added. Uncheck it if you don't want to hide/show the description panel each time the picture is changed.
    • Image Sliding

Visual Lightbox v3.1 (Feb 8, 2010)

Visual Lightbox v3.0 (January 28, 2010)

  • Flickr support. Add flickr photostream, photoset or a single photo to your gallery!
    See the example with images from flickr.com.
    • Add Images From Flickr
  • New Dark Glass template.
  • The option to specify the number of columns in your photo gallery.
    • Number of Columns
  • Overlay shadow color and page background color.
    • Overlay Shadow Color
  • You can save thumbnails in PNG or JPG format and specify the quality of the generated images now.
    • PNG JPG Format

  • New Thai language is added.

Visual Lightbox v2.4 (December 21, 2009)

Visual Lightbox v2.3 (November 25, 2009)

  • VisualLightBox script ported to jQuery, the most popular JavaScript framework. Now you can choose which engine to use with your image gallery - jQuery or old Prototype JS.
    • jQuery plugin
  • Floating. Overlay image floats on scroll staying always visible.
  • New smooth cross-fade transition.
  • You can fit image inside the thumbnail and set background color for the thumbnails.
  • Option to set watermark image, position, font, color, and transparency.
    • Watermark options
  • Minor bug fixes.

Visual Lightbox v2.1 (November 13, 2009)

  • The setup file didn't run on some of the PC with Win XP. This bug is fixed.
  • Several fixes with FTP publishing.

Visual jQuery Lightbox2 v2.0 (October 27, 2009)

Visual Lightbox v1.9 (June 25, 2009)

  • Thumbnails in the Preview window were not refreshed after the pictures had been added. Bug was fixed.
  • "Background Color" option is added. Set the background color for transparent images.
    • Back color options

Visual Lightbox v1.8 (May 6, 2009)

  • New template is added - Mac and Facebook;
    • Mac template        Facebook Template
  • New thumbnail templates are added - Mac, No Frame, No Frame Rounded;
    • Mac thumbnail No frame rounded thumbnail No frame thumbnail
  • "Add Images from folder..." button is added on the toolbar and into the main menu.
  • Enable SlideShow and AutoPlay options are added.
  • "Number of thumbnail colums" option is added.
  • Image captions for thumbnails are added.
  • Bug with setting image's caption is fixed.

Visual Lightbox v1.6 (Apr 17, 2009)

  • New thumbnail templates are added - Polaroid, Round Frame, Round Window, Simple HTML Frame, Sticky Notes;
    • Polaroid     Round Frame
    Round Window Sticky Notes Thumbnail Simple HTML Frame
  • Now you can set custom size for thumbnails and select thumbnail themes!
    • Thumbnail Size   Thumbnail options
  • Sorting the images by date, caption, file name, and file size.
    • Sorting options
  • By default, the caption is set as a file name of image.
  • Multiple renaming. Select several images and change the caption for them at once.
  • Now you can place HTML links into caption.
    • Add links
  • Large images dynamically fit to browser window.

Visual jQuery Lightbox v1.5 (Feb 25, 2009)

  • Slideshow feature is added;
  • New templates are added - Slideshow Glossy, Slideshow Grey;
    • Glossy Template   Grey Template
  • Fix for Custom Size setting (for example: specify '480   0' or '0   500' to set max width/height);
    • Custom size option
  • The ability to change the order of your images using "Move Up Selected Images"/"Move Down Selected Images" buttons is added;
    • Move Items
  • New languages are added (Deutsch, Português, Spanish, Polski, Ελληνικά).
  • Fixed bugs with an appearance in IE.

Visual Lightbox JS v1.2 (Jan 15, 2009) - First Release!

How to Use



Click here for online help.

Download Visual LightBox

Visual LightBox is free for non-commercial use. If you want to use Visual LightBox on a school site, your non-commercial blog or non-profit organisation website, just download Visual LightBox and use it for free.

A license fee is required for business use. Visual LightBox Business Edition additionally provides an option to remove the Visual LightBox.com credit line as well as a feature to put your own logo to images. After you complete the payment via the secure form, you will receive a license information instantly by email. You can select the most suitable payment method: credit card, bank transfer, check, PayPal etc.

Download Visual LightBoxDownload Visual LightBox Free Download
for Windows & Mac
 
Download Visual LightBox Download Visual LightBox Download Commercial Edition
for Windows & Mac - $49

Support

For troubleshooting, feature requests, and general help, contact Customer Support at Mail Make sure to include details on your browser, operating system, Visual LightBox version, and a link to your page.

FAQ

Q: How do I embed the lightbox image gallery into an existing page?

A: To install VisualLightBox gallery on your page you should:

1. Create your gallery in VisualLightBox and publish it on a local drive in any test folder.
2. Open index.html file from the saved folder in any text editor.
3. Copy code for the HEAD section and paste it inside the HEAD/BODY section of you own webpage, for example:

<head>
...
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css">
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen">
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->
...
</head>

4. Copy code for the BODY section and paste it inside the Body section of you own webpage in the place where you want to have a gallery, for example:

<body>
...
<!-- Start VisualLightBox.com BODY section -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/image1.jpg" title="Image1"><img src="data/thumbnails1/image1.png" alt="Image1"></a>
<a class="vlightbox1" href="data/images1/image2.jpg" title="Image2"><img src="data/thumbnails1/image2.png" alt="Image2"></a>
<a class="vlightbox1" href="data/images1/image3.jpg" title="Image3"><img src="data/thumbnails1/image3.png" alt="Image3"></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.1</a>
</div>
<script src="engine/js/vlbdata1.js" type="text/javascript"></script>
<!-- End VisualLightBox.com BODY section -->
...
</body>

5. Copy 'data' folder with images and thumbnails and 'engine' folder with .css and .js files into the same folder with your own webpage.

Q: I purchased your business license today but I don't see any way to update so the watermark is either missing or replace with mine. What do I do?

A: Free edition of Visual Lightbox doesn't allow you to remove our watermark.

Register your Visual Lightbox application at first. Use reg. key from the license message you received after the purchase. After the registration you can remove watermarks.

Open Gallery->Properties->Templates: Watermark. Click to disable this option or use your own watermark.

Q: In previewing some of my own slides on the browser, I find the background (thumb nails visible) too busy and distracting. Is there a way to darken the background?

A: You may set the following parameter in engine\js\visuallightbox.js file in a such way:

overlayOpacity: 1, // controls transparency of shadow overlay

Q: How do I control the jQuery SlideShow speed?

A: Open Gallery->Properties->General and find "Slideshow delay" parameter.
Set the time you need.

Q:How can I add html code into the caption of dispayed images?

A: You can use any html code inside your caption to highlight some text or add links.
In VisualLightBox app select image and add html code in the caption for selected image.
For example:

Add html code in Caption

Q: Is it possible to load a gallery from within image? So the gallery loads externally?

A: You should start the gallery onClick:

1) Add the following function into the <head> tag:

<script type="text/javascript">
function showLightBox()
{ Lightbox.start(document.getElementById('firstImage'));}
</script>

2) Specify the onClick event for the image (or link):

<a href="javascript:showLightBox()">Click to show VisuallightBox gallery</a>

3) Set the ID for any image in your gallery (id="firstImage"), for example add it to the first image:

<a class="vlightbox1" href="data/images1/image1.jpg" title="Image1" id="firstImage"><img src="data/thumbnails1/image1.png" alt="Image1"></a>

4) Use 'display: none;' property for your gallery in engine\css\vlightbox1.css. Just change the following code:

#vlightbox1 .vlightbox1 {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:3px;
width:160px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
}

to:

#vlightbox1 .vlightbox1 {
display:-moz-inline-stack;
display:none;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:3px;
width:160px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
}

Q: Can this be adapted so only one image is shown and then the gallery opens to flick through the rest of the images...

A:
1) Use 'display: none;' property for your gallery in engine\css\vlightbox1.css to hide all thumbnails. Please see the previous question (step 4).

2) Add the following parameter to show thumbnail that you want to display on the page:

style="display: inline-block;"

for example:

<!-- Start VisualLightBox.com BODY section -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/image1.jpg" title="Image1"><img src="data/thumbnails1/image1.png" alt="Image1"></a>
<a class="vlightbox1" href="data/images1/image2.jpg" title="Image2" style="display: inline-block;"><img src="data/thumbnails1/image2.png" alt="Image2"></a>
<a class="vlightbox1" href="data/images1/image3.jpg" title="Image3"><img src="data/thumbnails1/image3.png" alt="Image3"></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com">Lightbox Images by VisualLightBox.com v5.1</a>
</div>
<script src="engine/js/vlbdata1.js" type="text/javascript"></script>
<!-- End VisualLightBox.com BODY section -->

Q: How can I set the number of thumbnails columns?

A: Open Gallery->Properties->Thumbnails and find "Number of columns" parameter.
Select required value from the list.

Q: I would like to center all the thumbnails and I cannot figure out how. Can you please help?

A: You can align VisualLightBox thumbnails in the same way as any other element of your page.
Try add VisualLightbox BODY section into DIV container or into TABLE, set container's sizes and use the alignment that you need.

Q: I want to change color of the overlay shadow? How can I do this?

A: Open engine\css\visuallightbox.css file in any text editor, find the following code:

#overlay{
position:absolute;
top:0;
left:0;
z-index:190;
width:100%;
height:auto;
background-color:#d7d7d7;
}

and change the value of "background-color" parameter, for example:

#overlay{
position:absolute;
top:0;
left:0;
z-index:190;
width:100%;
height:auto;
background-color:#000000;
}

Also, you can set overlay color you need at Gallery->Properties->Templates tab.

Q: Is it possible to make 2 or more pages instead of making one page with 40 photos...

A: Each VisualLightBox gallery should have an unique ID.
To add separate galleries on different pages, go Gallery->Properties->Publish and specify unique ID for the gallery: Gallery ID. Insert a gallery in the usual way.

Q: I would like to reposition the Previous and Next buttons. Where do I have to go to make these changes in the code?

A: Open engine\css\visuallightbox.css file in any text editor, find the following code:

#prevLinkImg { left: 0; }
#nextLinkImg { right: 0; }

and set position you need.