Here is a super jquery based image gallery with next and previous navigation. It is very simple and easy to use. I use jquery and CSS3 to add some pretty look. Check out the demo and source files to get the full script.
Veja a DEMO deste tutorial > Como Criar Uma SUPER Galeria Com jQuery E CSS3
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('');
});
// 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();
});
});
Código HTML
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
