jquery - Bootstrap Image Gallery - 根据相册显示图片

Question

我现在正在开发一个与 Facebook 相册非常相似的相册。

我将显示所有包含特定相册的大量特定图像的相册。

我已经创建了布局。

这是我的布局。

当用户点击相册时，它会打开 Bootstrap Modal 并显示属于该文章的那些图像。

但是现在我面临一个问题，打开Modal后，它显示了属于其他相册的所有图像。有什么方法可以限制吗？

顺便说一下，我正在使用 Bootstrap Image Gallery .

非常感谢。

Answer 1

只需更改所有路径和变量，如图像等。

索引.js

var i, expand = false;

function reset() {
  $('.deck').css({
    'transform': 'rotate(0deg)',
    'top'      : '0px'
  });
}

//expands and contracts deck on click
$('.deck').click(function (a) {
  if (expand) {
    a.preventDefault();
    var imgSource = $(this).children().attr('href');
    $('#lightwrap').append('<img src="' + imgSource + '" id="lb-pic">');
    $('#lightbox, #lightwrap').fadeIn('slow');
  } else {
    var boxWidth = $('.deck').width();
    $('.deck').each(function (e) {
      $(this).css({
        'left': boxWidth * e * 1.1 + 'px'
      });
      expand = true;
      $('#close').show();
    });
  }
});

//close lightbox
$('#x, #lightbox').click(function(){
  $('#lightbox').fadeOut('slow');
  $('#lightwrap').hide();
  $('#lb-pic').remove();
  $('.deck').css({'left': '0px'});
  expand = false;
});

//prevent event bubbling on lightbox child
$('#lightwrap').click(function(b) {
  b.stopPropagation();
});

$('#close').click(function(){
  $(this).hide();
  $('.deck').css({'left': '0px'});
  expand = false;
});

$('.deck:last-child').hover(
  //random image rotation 
  function() {
    if (expand === false) {    
      $('.deck').each(function () {
        i++;
        if (i < $('.deck').length) {
          var min = -30,
              max = 30,
              random = ~~(Math.random() * (max - min + 1)) + min;
          $(this).css({
            'transform' : 'rotate(' + random + 'deg)',
            'top'       : random + 15 + 'px'
          });
        }
      });
    }
  //straightens out deck images when clicked
  $('.deck').click(
    function (a) {
      a.preventDefault();
      reset();
    }); 
  },
  //undo image rotation when not hovered
  function () {
    i = 0;
    reset();
  }
);

style.css 如果你想要什么设计，你可以编辑你的 css。

*, *::before, *::after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGElEQVQIW2NkwAIYCQn+ByoAKyKoEm4SADSgAQYZyK9gAAAAAElFTkSuQmCC);
}

h1, p {
  text-align: center;
}

h1 {
  font-family: 'Lobster';
  font-size: 90px;
  margin: 20px 0 0;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 #000;
}

p {
  font-family: arial, helvetica, sans-serif;
  font-size: 24px;
  color: #6CBDEB;
  text-shadow: 1px 1px 1px #000;
}

.wrap {
  position: relative;
  width: 1125px;
  height: 200px;
  margin: 0 auto;
}

.deck {
  margin: 20px;
  border: 1px solid black;
  height: 202px;
  width: 202px;
  position: absolute;
  top: 0;
  left: 0;
  transition: .3s;
  cursor: pointer;
  font-size: 50px;
  line-height:200px;
  text-align: center;
  font-family: 'Londrina Shadow';
}

.deck a {
  color: black;
}

.deck img {
  height: 200px;
  width: 200px;
}

.album {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  float: left;
  transition: .3s;
  position: relative;
}

#close {
 position: relative;
  display: none;  
  width: 1125px;
  margin: 30px auto 0;
}

#close p {
  cursor: pointer;
  text-align: right;
  margin: 0 20px 0;
}

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 999;
}

#lightwrap {
  position: relative;
  margin: 0 auto;
  border: 5px solid black;
  top: 15%;
  display: table;
}

#lightwrap img {
  display: table-cell;
  max-width: 600px;
}

#x {
  position: absolute;
  top: 2px;
  right: 2px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAMAAAC6CgRnAAAAPFBMVEX///8AAAD9/f2CgoKAgIAAAAAAAAAAAABLS0sAAAAAAACqqqqqqqq6urpKSkpISEgAAAC7u7u5ubn////zbsMcAAAAE3RSTlMASv6rqwAWS5YMC7/AyZWVFcrJCYaKfAAAAHhJREFUeF590kkOgCAQRFEaFVGc+/53FYmbz6JqBbyQMFSYuoQuV+iTflnstI7ssLXRvMWRaEMs84e2uVckuZe6knL0hiSPObXhj6ChzoEkIolIIpKIO4joICAIeDd7QGIfCCjOKe9HEk8mnxpIAup/F31RPZP9fAG3IAyBSJe0igAAAABJRU5ErkJggg==);
  width: 27px;
  height: 27px;
  cursor: pointer;
}

规范化.css

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

最后是 index.html

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Image Gallery - CodePen</title>

  <link href='http://fonts.googleapis.com/css?family=Londrina+Shadow|Lobster' rel='stylesheet'     type='text/css'>

  <link rel="stylesheet" href="css/normalize.css">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

  <h1>Image Gallery</h1>
<p>(click on the box to expand)</p>

<div class="wrap">
  <div id="picture1" class="deck"> 
    <a href="http://distilleryimage3.ak.instagram.com/a1319688e68e11e29dc322000a1f9c8f_7.jpg">
      <img src="http://distilleryimage3.ak.instagram.com/a1319688e68e11e29dc322000a1f9c8f_7.jpg">
      </a>
    </div>
  <div id="picture2" class="deck">
    <a href="http://distilleryimage0.ak.instagram.com/5d2bfa90e77511e289a722000a9e28d6_7.jpg">
      <img src="http://distilleryimage0.ak.instagram.com/5d2bfa90e77511e289a722000a9e28d6_7.jpg">
      </a></div>
  <div id="picture3" class="deck"> 
    <a href="http://distilleryimage9.ak.instagram.com/83588b86ce2811e2bb5822000a9e060e_7.jpg">
      <img src="http://distilleryimage9.ak.instagram.com/83588b86ce2811e2bb5822000a9e060e_7.jpg">
      </a></div>
  <div id="picture4" class="deck">
    <a href="http://distilleryimage3.ak.instagram.com/f6838f7ef21911e2b61322000a1f9358_7.jpg">
      <img src="http://distilleryimage3.ak.instagram.com/f6838f7ef21911e2b61322000a1f9358_7.jpg">
      </a></div>
  <div id="picture5" class="deck">
   <a href="http://distilleryimage7.ak.instagram.com/89d4b8b4f70811e2b2fd22000a9e0875_7.jpg">
      <img src="http://distilleryimage7.ak.instagram.com/89d4b8b4f70811e2b2fd22000a9e0875_7.jpg">
      </a></div>
</div>

<div id="lightbox">
    <div id="lightwrap">
     <div id="x"></div>
    </div>
</div>

      <div id="close"><p>&laquo; collapse</p></div>

  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>

  <script src="js/index.js"></script>

</body>

</html>

就这些了..希望对你有很大帮助/hoooo :o