™Galery™

#infout{
 margin:0;
 padding:0;
 position:absolute;top:250px;
 left:0;width:320px;
 height:350px;z-index:100;
 overflow:hidden;
 }
#infout a,#infout a img{
 text-decoration:none;border:0;outline:0
 }
#infout a span{
 display:none
 }
#infout #judul{
 width:20px;
 height:350px;
 position:relative;left:0;z-index:102
 }
#infout a#tutup{
 position:absolute;
 background:transparent url(http://lh3.ggpht.com/_6-JIvzw7Lbs/TO6BMNhIrXI/AAAAAAAAABQ/r4s_MBsv5GM/s800/trans_pixel.gif);
 top:0;left:230px;
 height:25px;
 width:65px;
 cursor:pointer
 }
#infout a#buka{
 cursor:pointer
 }
#infout #wadah{
 position:absolute;
 top:10px;left:20px;
 margin-left:-300px;z-index:101
 }

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script language='javascript' src='http://plugins.jquery.com/files/jquery.cookie.js.txt'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
 var infoOut = "#infout";
 var infoBox = "#wadah";
 var infoLebar = $(infoBox).width() + $("#judul").width();
 var infoCookie = "infokuki";
 function bukaInfo() {
  $(infoOut).width(infoLebar+"px");
  $(infoBox).animate({marginLeft: "0"},1200)
  $.cookie(infoCookie, null);
 }
 function tutupInfo() {
  $(infoBox).animate({marginLeft: "-"+infoLebar+"px"},1200,"linear",
   function(){ $(infoOut).width($("#judul").width() + "px"); }
  );
  $.cookie(infoCookie,'closed',{expires: 28});
 }
 $("#buka").click(function() {
  if(!$.cookie(infoCookie)) {
   tutupInfo();
  } else {      
   bukaInfo();
  }
  return false;
 });
 $("#tutup").click(function() {
  tutupInfo();
  return false;
 }); 
 if(!$.cookie(infoCookie)) {
  $(infoOut).animate({opacity: 1.0}, 1500, "linear", bukaInfo);
 }
});
//]]></script>