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>
<meta>
<html>
  <head>
​
    <meta charset="utf-8">
    <title>Darkbox by Roko C. Buljan</title>
​
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style >
      *{margin:0;}
      html,body{height:100%;}
      /* *********************** */
      /* DARKBOX STYLES */
      img[data-darkbox]{
        height:130px;
      }
      #darkbox{
        position:fixed;
        z-index:9999;
        background:rgba(0,0,0,0.8) no-repeat none 50% / contain;
        box-shadow:0 0 0 3000px rgba(0,0,0,0.8);
        opacity:0; visibility:hidden;
      }
      #darkbox.on{ 
        opacity:1; visibility:visible;
        height:90% !important; width:90% !important;
        left:5% !important; top:5% !important;
      }
      #darkbox:after{
        position:absolute;
        right:0; top:0;
        font-size:2em;
        content:"\2A2F";
        color:#fff;
        cursor:pointer;
      }
      /*prev next buttons*/
      #prev,
      #next{
        cursor:pointer;
        user-select:none;
        -webkit-user-select:none;
        position:absolute;
        top:50%;
        margin-top:-25px;
        height:50px;
        width:50px;
        transition: 0.3s;
        background: rgba(255,255,255,0.3);
      }
      #prev:hover,
      #next:hover{
        background: rgba(255,255,255,0.8);
      }
      #prev{left: -2px;}
      #next{right: -2px;} 
    </style>
  </head>
  <body>
​
    <h1>Darkbox</h1>
​
    You can also use arrow keys and ESC to close Darkbox<br><br>
​
    <img data-darkbox src="http://placehold.it/400x300/8ac?text=a">
    <img data-darkbox src="http://placehold.it/800x600/ca7?text=b">
    <img data-darkbox src="http://placehold.it/600x900/88c?text=c">
    <img data-darkbox src="http://placehold.it/900x500/a88?text=d">
    <img data-darkbox src="http://placehold.it/860x550/c8c?text=e">
​
    <script id="jsbin-javascript">
      // Darkbox // by Roko C.B.
      var $images = $('img[data-darkbox]');
      var n = $images.length;
      var c = 0; // counter
      var $prevNext = $("<div id='prev'/><div id='next'/>").on("click", function(e){
        e.stopPropagation();
        var isNext = this.id==="next";
        c = (isNext ? c++ : --c) < 0  ? n-1 : c%n;
        $images.eq( c ).click();
      });
      var $darkbox = $("<div/>",{
        id: "darkbox",
        html: $prevNext
      }).on("click", function(){
        $(this).removeClass("on");
      }).appendTo("body");
​
      $images.css({cursor:"pointer"}).on("click",function(){
        var o=this.getBoundingClientRect();
        c = $images.index( this );
        $darkbox.css({
          transition: "0s",
          backgroundImage: "url("+this.src+")",
          left: o.left,
          top: o.top,
          height: this.height,
          width: this.width
        });
        setTimeout(function(){
          $darkbox.css({transition:"0.8s"}).addClass("on"); 
        },5);
      });
​
      $(document).on("keyup", function(e){
        var k = e.which;
        if(k==27) /*ESC */  $("#darkbox").click(); // close Darkbox
        if(k==37) /*LEFT*/  $("#prev").click();
        if(k==39) /*RIGHT*/ $("#next").click();
      });
​
    </script>
  </body>
</html>
Output

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

Dismiss x
public
Bin info
roXonpro
0viewers