The widgets in Widget Browser were old & outdated. You will find many better jQuery plugins online. Fancybox2 is a good lightbox alternative & it's simple to implement.
fancyBox - Fancy jQuery Lightbox Alternative
Just copy & paste this code into a new, blank HTML document. SaveAs test.html and preview in browser.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5, with Fancybox2 Viewer</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--LATEST JQUERY CORE LIBRARY-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--FANCYBOX plugins-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<style>
html {
height:102%;
}
body {
background: silver;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
#wrapper {
width: 90%;
padding:2%;
margin:0 auto;
background:#FFF;
overflow:hidden;
}
/**this styles image container**/
#thumbs {margin:0; padding:0;}
#thumbs li {
list-style:none;
float: left;
width: 180px;
margin: 10px 22px 0 22px; /**space between containers**/
}
/**recommend using same size images**/
#thumbs img {
width: 160px; /**adjust width to thumbnail**/
height: 120px; /**adjust height to thumbnail**/
opacity: 0.75;
}
#thumbs img:hover { opacity: 1.0 }
/**float clearing**/
#thumbs:after {
content: ".";
clear: left;
font-size: 0px;
line-height: 0;
display: block;
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrapper">
<h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Image Viewer</h1>
<!--insert your thumbnails with links to full sized images below-->
<ul id="thumbs">
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
<li><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail" /></a></li>
</ul><!--end thumbs-->
</div><!--end wrapper-->
<!--FancyBox function code-->
<script>
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
</body>
</html>
Nancy O.