The Basic of JQuery Lightbox

by Taufik Nurrohman

HTML

<a href="http://4.bp.blogspot.com/-W-w1TnmRGlY/T4OxvBNIfVI/AAAAAAAACd8/duI1nZNauxI/s1600/1.jpg">Link1</a><br />
<a href="http://2.bp.blogspot.com/-RzuXxRrdnxM/T4Ox0FhVM9I/AAAAAAAACeE/XCynwt5_eUM/s1600/2.jpg">Link2</a><br />
<a href="http://4.bp.blogspot.com/--9dxP0aMbjo/T4Ox4SITu2I/AAAAAAAACeM/Hiq7d1UJTJE/s1600/3.png">Link3</a><br />
<a href="http://4.bp.blogspot.com/-vWczQ0NqRfs/T4Ox-kTsR-I/AAAAAAAACeU/dNXDw-KdZDU/s1600/4.jpg">Link4</a><br />
<a href="http://2.bp.blogspot.com/-smECiqiMvx0/T4OxshPX5hI/AAAAAAAACd0/Owe19Q4rw_k/s1600/5.png">Link5</a><br />
<a href="http://4.bp.blogspot.com/-Zl0j-nKQkV8/T4OyBOJiq-I/AAAAAAAACec/57xp2BUMAXg/s1600/6.jpg">Link6</a><br />

<img alt="" />

CSS

body {padding:10px;}

img {
  position:absolute;
  top:20px;
  left:55px;
  width:85px;
  height:85px;
  border:1px solid black;
}

JavaScript

$('a').click(function() {
    $('img').attr('src', this.href);
    return false;
});