Bootstrap圖片庫 - 顯示圖像根據專輯

Question

我正在開發一個相冊，現在它與Facebook相冊非常相似。

我將顯示包含特定相冊的大量特定圖像的所有相冊。

我已經創建了佈局。

這是我的佈局。

當在相冊的用戶點擊，它就會打開引導模態並顯示這些圖像屬於該條款。

但現在我面臨一個問題，當模式打開時，它會顯示屬於其他相冊的所有圖像。有沒有限制它的方法？我正在使用Bootstrap Image Gallery。

非常感謝。

Answer 1

只是改變所有的路徑和像圖像變量或等

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; 
} 

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} 

最後的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：○