Question

对不起，我事先没有那么完美的英语。

我一直在为我的音乐乐队创建一个网站作为一个学校项目，我已经做了很多事情，但我不明白如何拍摄完成的画廊并添加我的照片和内容< /强>

（我的老师告诉我，如果我不知道如何以及我可以在网上找到完成的那个，我不需要画廊。我正在寻找完成的画廊，但我无法将它们放在我的代码中，我也寻找教程，但毕竟，没有一个画廊无法满足我需要的和我试图放入我的网站的人无法工作。所以我希望画廊是这样的：

我可以点击的照片缩略图的一行（滑块）

当我点击它们时，它们会变焦到更大的分辨率（就像一点点慢慢淡入）

图像背后的一切都变暗了

左箭头和右箭头，可以用鼠标点击和

键盘上的箭头按钮为上一页和下一页

当我点击图像旁边的任何地方时，它会淡出（如果可能的话，它可以淡出（我更喜欢这种效果），而不会改变分辨率，或者它可以缩小）。

如果可以，我会学习，因为截止日期是明天，所以，如果有人能帮助我，我肯定有完成了我想要的画廊，但我找不到一个...当然，如果你能向我解释如何添加我的图像和所有。对不起我的英文...

Answer 1

<强> jsBin demo

将其放在gallery.html文档

中

＆＃13;

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

＆＃13;

我的网站的图库

1 个答案: