Blogger templates

Comunidade java aberto - Participe da nossa comunidade no facebook (clique aqui)

Visitas

quinta-feira, 26 de julho de 2012

Galeria de fotos com JQuery

,

Galeria de fotos com JQuery
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('<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

0 comentários to “Galeria de fotos com JQuery”

Postar um comentário

Insira seu comentário

 

Java Aberto Copyright © 2011 -- Template created by O Pregador -- Powered by Blogger