Showing posts with label Dialog. Show all posts
Showing posts with label Dialog. Show all posts

Wednesday 29 September 2010

Using jQuery Dialog as a lightbox

Your first thought may be "Why?".
I main reason I have for doing this is size. jQuery UI has often been loaded for other reasons within my applications and Dialog is a part of jQuery UI. The result, it's lightweight.

Also, like many of my examples, the code is now easily transferable.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lightbox</title>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" />
<style type="text/css">
html, body
{
font-family:sans-serif;
}
.imageDiv
{
display:none;
}
.ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-titlebar
{
background:#FFFFFF;
border-color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
function openDialog(imageId, titleVal)
{
$("#"+imageId).dialog(
{
show:'blind',
width:'auto',
modal:true,
title:titleVal,
resizable:false
});
}
</script>
</head>
<body>
<div id="img1" class="imageDiv"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" /></div>
<a href="#" onclick="openDialog('img1', 'Church');"><img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b_t.jpg" alt="Church" /></a>
<div id="img2" class="imageDiv"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f.jpg" /></div>
<a href="#" onclick="openDialog('img2', 'Avenue');"><img src="http://farm3.static.flickr.com/2019/2214360020_34ea1a622f_t.jpg" alt="Avenue" /></a>
</body>
</html>