我的网站图库

Question

提前抱歉我的英语不太好。

作为一个学校项目，我一直在为我的乐队制作一个网站，我已经完成了几乎所有的工作，但我不明白 如何制作完成的画廊并添加我的照片和资料?

（我的老师告诉我，如果我不知道怎么做，我就不需要制作画廊，而且我可以在网上找到一个完成的画廊）。我一直在寻找完成的画廊，但我无法将它们放入我的代码中，我也寻找教程，但毕竟 none 的画廊无法满足我的需求和我尝试的那些放在我的网站上是行不通的。所以我想要一个像这样的画廊：

一行（滑块）我可以点击的照片缩略图
当我点击它们时，它们会放大到更大的分辨率（有点像缓慢淡入）
图像后面的一切都变得更暗，而且
可通过鼠标单击和
键盘上的箭头按钮作为上一个和下一个
当我点击图片旁边的任何地方时，它会淡出（如果可能的话，它可以淡出（我更喜欢这种效果），而不改变分辨率，或者它可以缩小）。

如果可以我会学习，因为截止日期是明天，所以请如果有人能帮助我，我相信有像我想要的那样完成画廊，但我找不到一个...当然如果你能向我解释如何添加我的图片和所有。再次抱歉我的英语...

Answer 1

jsBin demo

将其放入 gallery.html 文档中

<!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:"A2F";
        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>

我的网站图库

Gallery for my website

javascript

html

css

gallery

image-gallery