Galeria de fotos com JQuery
Código JQuery
$(document).ready(function(){
//select all the a tag with name equal to modal
$('#left_boxes img').click(function(e) {
//Cancel the link behavior
e.preventDefault();
var imgID = $(this).attr('id');
//Get the A tag
var id = $(this).attr('src');
//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('<img src="'+id+'" id="'+imgID+'" width="500" height="340" />');
});
// 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('<img src="'+id+'.jpg" id="'+id+'" width="500" height="340" />').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('<img src="'+id+'.jpg" id="'+id+'" width="500" height="340" />').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();
});
});Código HTML
<div style="height:750px;">
<div id="left_bar">
<div id="left_boxes">
<!-- copy large image name in id of image without extension . We will get this id and show big image -->
<div class="box"><img src="1.jpg" width="120" height="100" id="1" /></div>
<div class="box"><img src="2.jpg" width="120" height="100" id="2" /></div>
<div class="box"><img src="3.jpg" width="120" height="100" id="3" /></div>
<div class="box"><img src="4.jpg" width="120" height="100" id="4" /></div>
<div class="box"><img src="5.jpg" width="120" height="100" id="5" /></div>
<div class="box"><img src="6.jpg" width="120" height="100" id="6" /></div>
<div class="box"><img src="7.jpg" width="120" height="100" id="7" /></div>
<div class="box"><img src="8.jpg" width="120" height="100" id="8" /></div>
<div class="box"><img src="9.jpg" width="120" height="100" id="9" /></div>
<div class="box"><img src="10.jpg" width="120" height="100" id="10" /></div>
<div class="box"><img src="11.jpg" width="120" height="100" id="11" /></div>
<div class="box"><img src="12.jpg" width="120" height="100" id="12" /></div>
</div>
</div>
<!-- Image Holder Main -->
<div id="dialog2" class="window">
<img src="prev.png" id="prev" height="40" title="Previous" />
<img src="next.png" id="next" height="40" title="Next" />
<span id="showImage"></span>
<img src="close.png" id="hide" height="40" title="Close" />
</div>
<div id="mask"></div>
<br clear="all" /><br clear="all" />
</div>Código CSS
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;
}
a.link{
bottom:10; left:804px;position:fixed;
z-index:999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px
}
Download do código usado neste tutorial > Como Criar Uma Super Galeria Com jQuery e CSS3
