CODEWITHSUNDEEP
javascripthtmlcssgalleryimage-gallery
Predrag
Predrag

Reputation: 3

Gallery for my website

Sorry for my not so perfect english in advance.

I've been making a site for my music band as a school project and i've done pretty much everything, but i don't get it how to take a finished gallery and add my photos and stuff?

(My teacher told me that i don't need to make gallery if i don't know how and that i can find a finished one on web). I was looking for finished galleries but i couldn't get to put them in my code, i also looked for tutorials, but after all, none of the galleries couldn't fulfill what i needed and those whom i tried to put in my website couldn't work. So i want a gallery to be like this:

I would learn if i could, because deadline is tomorrow, so please if anyone can help me, i'm sure that there're finished galleries like the one i want, but i just couldn't find one... and ofcourse if you could explain to me how to add my images and everything. Sorry again for my english...

Upvotes: 0

Views: 368

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206007

jsBin demo

Put this inside a gallery.html document

<!DOCTYPE html>
<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>

    <!-- HERE GOES YOUR DOCUMENT HTML -->

    <h1>Darkbox</h1>
    <p>You can also use arrow keys and ESC to close Darkbox</p>

    <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">

    <!-- end/HERE GOES YOUR DOCUMENT HTML -->



    <!-- KEEP SCRIPTS BEFORE THE CLOSING /BODY TAG -->
    <script>
      // 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>

Upvotes: 3

Related Questions