Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
<div id="loading_box_container">  
  <div id="loading_box">
    <div id="close" style="display:none;">
      <img id="close_unselected"  src="http://www.klossal.com/klossviolins/elements/close_notselected.png">
      <img id="close_selected" style="display:none;" src="http://www.klossal.com/klossviolins/elements/close_selected.png">
    </div>
      
    <div id="top">
      <div id="prev_container">
        <div id="prev">
          <img id="prev_unselected"  src="http://www.klossal.com/klossviolins/elements/prev_unselected.png">
          <img id="prev_selected" style="display:none;" src="http://www.klossal.com/klossviolins/elements/prev_selected.png">
        </div>
      </div>    
      <div id="next_container">
        <div id="next">
          <img id="next_unselected"  src="http://www.klossal.com/klossviolins/elements/next_unselected.png">
          <img id="next_selected" style="display:none;" src="http://www.klossal.com/klossviolins/elements/next_selected.png">
        </div>
      </div>
    </div>
​
    <div id="bottom">
      <div id="gallery_img">
        <img id="preload" onload="fadeIn(this)" src="#" style="display:none;"/>
      </div>
    </div>
  </div>
</div>  
  
  
<ul class="UNH_album">
  <li id="a" class="photo first">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/a.jpg">
  </li>
  <li id="b" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/b.jpg">
  </li>
  <li id="c" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/c.jpg">
  </li>
  <li id="d" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/d.jpg">
  </li>
  <li id="e" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/e.jpg">
  </li>
  <li id="f" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/f.jpg">
  </li>
  <li id="g" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/g.jpg">
  </li>
  <li id="h" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/h.jpg">
  </li>
  <li id="i" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/i.jpg">
  </li>
  <li id="j" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/j.jpg">
  </li>
  <li id="k" class="photo">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/k.jpg">
  </li>
  <li id="l" class="photo last">
    <img src="http://www.klossal.com/klossviolins/gallery/thumbs/l.jpg">
  </li>
  <br style="clear:both;">
</ul>  
  
​
</body>
</html>
​
 
body {
  background:#1d1d1d;
}
#loading_box_container {
  position:fixed;
  left:00px;
  top:0px;
  width:100%;
  height:0;
  z-index:10000;                
  background:#141414;           
  overflow:hidden;
  background-image: url(http://www.klossal.com/klossviolins/elements/loader.gif); 
  background-repeat: no-repeat;
  background-position: center center;
}
#close {
  right:0px;
  padding-top:10px;
  padding-right:10px;
  position:fixed;
  cursor:pointer;
  z-index:14000;
}
#top {
  position:absolute;
  width:100%;
  height:100%;
  z-index:13000;
}
#prev_container {
  height:100%;
  width:50%;
  float:left;
}
#prev {
  position:relative;
  top:50%;
  margin-top:-50px;
  width:29px;
  height:50px;
  cursor:pointer;
}
#next_container {
  height:100%;
  width:50%;
  float:left;
}
#next {
  position:relative;
  top:50%;
  margin-top:-50px;
  width:29px;
  height:50px;
  cursor:pointer;
  float:right;
  padding-right:10px;
}
​
​
#bottom {
  position:absolute;
  width:100%;
  height:100%;
  z-index:12000;
}
#gallery_img {
  height:100%;
  width:100%;
  float:left;
}
​
​
ul {
  list-style-type: none;
  position:relative;
  width:950px;
  padding-left:50px;
  margin-left:-500px;
  left:50%;
}
.UNH_album li {
  -webkit-box-shadow: #111 0px 8px 1px;
  -moz-box-shadow: #111111 0px 0px 8px 1px;
  box-shadow: #111111 0px 0px 8px 1px;
  behavior: url(PIE.htc);
  float:left;
  margin:10px;
  cursor:pointer;
  height:157 px;
  width:200px;
}
​
​
 
​
$(window).resize(function() {
  $("#preload").css({
    "margin-left": (($(window).width()) / 2) - ($("#preload").width() / 2),      
      marginTop: ($(window).height() / 2) - ($("#preload").height() / 2)
    });
});
​
function fadeIn(obj) {
  $("#preload").css({
    "margin-left": (($(window).width()) / 2) - ($("#preload").width() / 2),      
    marginTop: ($(window).height() / 2) - ($("#preload").height() / 2)
  });
  $(obj).fadeIn(500);
}
​
​
​
​
var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
​
if(agentID) {   
}
else {
  $("#close").hover( 
    function () {
      $("#close_unselected").css({
        display: "none"
      });
      $("#close_selected").css({
        display: "block"
      });          
    }, 
    function () {
      $("#close_unselected").css({
        display: "block"
      });
      $("#close_selected").css({
        display: "none"
      }); 
    }
  );
  
  $("#next").hover( 
    function () {
      $("#next_unselected").css({
        display: "none"
      });
      $("#next_selected").css({
        display: "block"
      });          
    }, 
    function () {
      $("#next_unselected").css({
        display: "block"
      });
      $("#next_selected").css({
        display: "none"
      }); 
    }
  );
  
  $("#prev").hover( 
    function () {
      $("#prev_unselected").css({
        display: "none"
      });
      $("#prev_selected").css({
        display: "block"
      });          
    }, 
    function () {
      $("#prev_unselected").css({
        display: "block"
      });
      $("#prev_selected").css({
        display: "none"
      }); 
    }
  );
}
​
​
​
​
$(".photo").click(function() {
  $("#loading_box_container").animate({
    height: "100%"
  }, 300, function() {
      $("#close").css({
        display: "block"
      });        
  });
  
  id = $(this).attr('id');
  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg');
​
  fadeIn('#' + id);
  
   
  $("#next").click(function() {  
    if (!$('#' + id).hasClass("last")) {
      $("#preload").fadeOut(500, function() {
      var id_a = $('#' + id).next().attr('id');
      id = id_a;
​
      $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id_a + '.jpg');
​
      fadeIn('#' + id_a);
      });
    }
  });
  
  $("#prev").click(function() {
    if (!$('#' + id).hasClass("first")) {
      $("#preload").fadeOut(500, function() {
      var id_b = $('#' + id).prev().attr('id');
      id = id_b;  
  
      $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg');
​
      fadeIn('#' + id); 
      });
    }
  }); 
});
​
​
$("#close").click(function() {
  $("#close").css({
    display: "none"
  }); 
  $("#loading_box_container").animate({
    height: 0
  }, 300 );
  setTimeOut(function(){
    $("#preload").fadeOut(1);
  }, 300);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers