Blackie Blackie - 6 months ago 13
HTML Question

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.

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.

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('<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>&laquo; 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 a lot /hoooo :o

Comments