Bootstrap Image Gallery - Display Image According to Album

Question

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.

I had created the layout.

enter image description here

This is my layout.

enter image description here

When user click on the Album, It will open Bootstrap Modal and display those images belongs to that Article. enter image description here

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?

By the way, I am using Bootstrap Image Gallery.

Thank you so much.

cjnahine05 · Accepted Answer

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('');
    $('#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






  

  Image Gallery - CodePen

  

  

    





  Image Gallery
(click on the box to expand)


   
    
      
      
    
  
    
      
      
   
    
      
      
  
    
      
      
  
   
      
      



    
     
    


      « collapse

thats all.. hope it helps you a lot /hoooo :o

Bootstrap Image Gallery - Display Image According to Album

Answers (1)

Related Questions