我现在正在开发一个与 Facebook 相册非常相似的相册。
我将显示包含特定相册的大量特定图像的所有相册。
我已经创建了布局。
这是我的布局。
当用户点击相册时，它将打开 Bootstrap Modal 并显示那些属于该文章的图像。
但现在我面临一个问题，当 Modal 打开时，它会显示属于其他相册的所有图像。有什么方法可以限制吗？
顺便说一句，我用的是Bootstrap Image Gallery。
非常感谢。
【问题讨论】：
标签： jquery html css twitter-bootstrap-3
只需更改所有路径和变量，如图像等。
index.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>« collapse</p></div>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
仅此而已..希望对您有很大帮助/hoooo :o
【讨论】：