Como Criar Uma SUPER Galeria Com jQuery E CSS3

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect
$('#mask').fadeIn(200);
$('#mask').fadeTo("slow",0.8);

//Get the window height and width

var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$("#dialog2").css('top', winH/5-$("#dialog2").height()/5);
$("#dialog2").css('left', winW/2-$("#dialog2").width()/2);

//transition effect
$("#dialog2").fadeIn(500);
$("#showImage").html('');

});

// next
$('#next').click(function(e) {

var id = $('#showImage img').attr('id');

if($("#left_boxes").find('img').length == id)
id = 1;
else
id = parseInt(id)+parseInt(1);

$("#showImage").html('');
$("#showImage").html('').fadeIn(700);

});

// prev
$('#prev').click(function(e) {

var id = $('#showImage img').attr('id');

if(id == 1)
id = 12;
else
id = parseInt(id)-parseInt(1);

$("#showImage").html('');
$("#showImage").html('').fadeIn(700);

});

//if close button is clicked
$('.window #hide').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
//$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

html, body{
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
background: url(bg.png) repeat;
font-size:100%;
font-family:inherit;
}
#border
{
cursor:pointer;
position:fixed;
bottom:0px;
left:160px;
z-index:999;display:none;
}

#controls {display:none;}

#controls #hide
{
cursor:pointer;
position:fixed;
bottom:472px;
left:861px;
z-index:999;
}

#controls #pause
{
cursor:pointer;
position:fixed;
bottom:472px;
left:794px;
z-index:999;
}

#prev{ float:left;}
#next{ float:right;}

#click
{
cursor:pointer;
position:fixed;
bottom:0;
left:0px;
z-index:999;
}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#fff;
display:none;
}

#left_bar
{
top:80px;
left:25%;
height:340px;
width:545px;
padding:10px;

position: relative;
overflow: auto;

-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
border: 15px solid rgba(0,0,0,0.3);
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}

#left_bar .box{
height:110px;
float:left;
margin-bottom:3px;
margin-left:5px;
width:130px;
}
#imagePlacer{
width:608px;
height:413px;
position:fixed;
bottom:12px;
background: url(load.gif) center center no-repeat #000000;
padding:5px;
left:160px;
display:none;
z-index:999;
}

#captions span{ display:none; }

.box img{-webkit-border-radius: 12px;;border-radius: 12px; -moz-border-radius: 12px; margin:4px 0 0 4px; cursor:pointer}

.box img:hover {filter:alpha(opacity=50);
opacity: 0.8; /*width:94px; margin-left:7px;margin-top:7px;}*/
}

#dialog2 {
/* background:url(images/notice.png) no-repeat 0 0 transparent; */
width:500px;
height:360px;
padding:50px 0 20px 25px;
}

.window img{ cursor:pointer;}

.window {
position:absolute;
left:0;
top:0;
width:500px;
height:360px;
display:none;
z-index:9999;
padding:20px;
}

#right_bar .box{
background: #000;
height:110px;
margin-bottom:3px;
width:110px;
}

#content {
width: 750px;
margin: 0 auto;
background:#D1DFF3;
margin-bottom: 25px;font-family:Arial,Helvetica,sans-serif;
font-size:11px;
padding: 10px;
text-align:justify;
}