我的网站画廊答案

【问题标题】：Gallery for my website我的网站画廊
【发布时间】：2015-06-10 02:01:23
【问题描述】：

对不起，我的英语不是那么完美。

我一直在为我的乐队创建一个网站作为学校项目，我已经做了几乎所有事情，但我不明白如何制作完成的画廊并添加我的照片和东西？

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

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

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

【问题讨论】：

你能在你的网站上发布一些代码吗？你试图整合一个画廊，但没有成功？
我已经删除了所有内容：/ 我真的很生气，只是删除了它......

标签： javascript html css gallery image-gallery

【解决方案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:"\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>

【讨论】：

Roko，你成功了。根据 OP 对 Javascript 和 jQuery 的熟悉程度，您可能希望为他添加一个指向 jQuery 的链接。至少托管在 CDN 上。
Gallery

这是一个 div 应该是画廊的地方，我试过了，但没有不是很好。网站和 css offcourse 上还有其他东西，但这是画廊应该在的部分（它应该从
标签开始）
@SamuelLJackson（顺便说一句，我喜欢你的电影 hhh ;）我知道，我已经放了 jQuery，但由于缩进错误，它被 SO 的编辑器在答案预览中吃掉了。固定的。 Predrag，在jsBin里面找到下载链接。
@Predrag 打开 jsBin 链接，看看我把图片放在哪里了，好吧，你不需要把它们放在 BODY 里面，你把它们放在你的 <hr> 标签之后。似乎很明显......因为你需要把它们放在某个地方:) 不管怎样，点击 jsBin 中的下载，打开那个 .html 文件并玩得开心。
它在视觉上可以工作，但是当我点击它时它没有反应，抱歉回复慢，我的电脑非常慢:(是的，如果你能做到，我将非常感激