Gallery for my website

Question

Gallery for my website

338 views Asked by Predrag At 10 June 2015 at 02:01

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:

a line (slider) of thumbnails of photos on whom i can click
and when i click on them they zoom into bigger resolution (like a bit slow fade in)
everything behind the image becomes darker and also
the left and right arrows which can be used with mouse click and
arrow buttons on keyboard as previous and next and
when i click anywhere beside the image it fades out (it can just fade out, if possible (i like that effect more), without changing resolution, or it can just zoom out).

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

Original Q&A

There are 1 answers

**Roko C. Buljan** · Accepted Answer · 2015-06-10 02:05:58

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>

TechQA.

Gallery for my website

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in GALLERY

Related Questions in IMAGE-GALLERY

Popular Questions

Popular Tags

Trending Questions