Bootstrap Image Gallery - Display Image According to Album
I am developing a photo album right now which is quite similar like Facebook Album.
I will display all the album that contains a lot of specific images for specific albums.
This is my layout.
When user click on the Album, It will open Bootstrap Modal and display those images belongs to that Article. 
But now I am facing a problem, When the Modal is open, it displays all the images that belongs to other albums. Is there any method to restrict it?
CSS
html
jQuery
twitter-bootstrap
- asked 8 years ago
- B Butts
1Answer
just change all the paths and the variables like image or etc.
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 you can edit your css if what design you want.
*, *::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;
}
normalize.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}
finally the 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>
thats all.. hope it helps you
- answered 8 years ago
- Sandy Hook
Your Answer