jQuery แกลลอรี่ภาพวางเรียงๆกันพอกดซูมก็ขยายใหญ่และเบียดรูปอื่น

Posted by kkool | Filed under Web Design & Web Develope

เป็นการใช้ CSS ร่วมกับ jQuery ในการใส่รายละเอียดให้กับรูปภาพ
สามารถย่อ ขยาย ปรับขนาดได้ตามที่ต้องการเอาไปใช้งาน

CSS:
.photo-area {
width: 100px;
height: 130px;
padding: 10px;
border: 1px solid #666;
overflow: hidden;
position: relative;
margin: 10px;
background: white;
}
#photo {
width: 100px;
height: 100px;
background: url(images/mthood.jpg) center center;
margin-bottom: 5px;
}
.info-area {
opacity: 0.0;
}
a.more-info {
  display: block;
  width: 89px;
  height: 26px;
  background: url(images/moreinfo.jpg);
  text-indent: -9999px;
}
a.close {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: block;
  width: 20px;
  height: 21px;
  background: url(images/close_button.jpg);
  text-indent: -9999px;
}

jQuery Javascript:
<script type=”text/javascript” src=”js/jquery.js”></script>

  $(”.more-info”).click(function(){
   $(this).parents(”.photo-area”).animate({
     width: “500px”,
     height: “470px”,
           borderWidth: “10px”
         }, 600 );

$(this).fadeOut();

   $(”#photo”).animate({
          width: “500px”,
    height: “375px”
         }, 600 );
   $(”.info-area”).animate({
          opacity: 1.0,
         }, 600 );
   });

  $(”.photo-area .close”).click(function(){
   $(this).parents(”.photo-area-1″).animate({
     width: “100px”,
     height: “130px”,
           borderWidth: “1px”
         }, 600 );

$(”.more-info”).fadeIn();

   $(”#photo”).animate({
          width: “100px”,
    height: “100px”
         }, 600 );
   $(”.info-area”).animate({
          opacity: 0.0,
         }, 600 );
   });

});
</script>

Download Zip: RevealingPhotoSlider.zip

Link: jQuery Revealing Photo Slider

Tags: jQuery, revealing