코딩 스쿨에 오신것을 환영합니다~~

포토 카드 갤러리(Photo Card Gallery)

1. 데모

Image Alt
Image Alt
Image Alt
Image Alt
Image Alt

2. 데모 소스

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function () {
  $(".portfolio").each(function (index) {
      $(this).attr("id","img" + (index + 1));
  });

  $(".portfolio").each(function () {
      $("#navi").append('<div class="circle"></div>');
  });

  $(".circle").each(function (index) {
      $(this).attr("id","circle" + (index + 1));
  });

  $(".portfolio").click(function () {
    if ($(this).hasClass("opened")) {
      $(this).removeClass("opened");
      $(".portfolio").fadeIn("fast");
      $(this).find(".ombra").fadeOut();
      $("#navi div").removeClass("activenav");
    } else {
      var indexi = $("#maincontent .portfolio").index(this) + 1;
      $(this).addClass("opened");
      $(".portfolio").not(this).fadeOut("fast");
      $(this).find(".ombra").fadeIn();
      $("#circle" + indexi).addClass("activenav");
    }
  });
//navi buttons
  $("#navi div").click(function () {
    if ($(this).hasClass("activenav")) {
      return false;
    }

    $("#navi div").removeClass("activenav");
    $(".portfolio").removeClass("opened");
    $(".portfolio").show();
    $(".ombra").hide();
    var index = $("#navi div").index(this) + 1;
    $("#img" + index).addClass("opened");
    $(".portfolio")
      .not("#img" + index)
      .fadeOut("fast");
    $("#img" + index)
      .find(".ombra")
      .fadeIn();
    $(this).addClass("activenav");
  });
});
</script>
<style>
body {
  background-color: #c1274c;
}
img {
  width:100%;
}
#allcontent {
  margin:60px auto 0 auto;
  width:100%;
  max-width:1140px;
  height:700px;
  position:relative;
  animation: comein1.5s ease-in-out;
  background-color: #c1274c;
}
.portfolio {
  width:100%;
  max-width:1000px;
  position:absolute;
  right:0;
  top:0;
  transition:0.2s;
  cursor:pointer;
  box-shadow:-2px 0 3px rgba(0,0,0,0.3);
}
.portfolio:nth-child(1) {
  left:10px;
}
.portfolio:nth-child(1):hover {
  left:0px;
  transform: rotate(-2deg);
}
.portfolio:nth-child(2) {
  left:10%;
}
.portfolio:nth-child(2):hover {
  left:5%;
  transform: rotate(-2deg);
}
.portfolio:nth-child(3) {
  left:20%;
}
.portfolio:nth-child(3):hover {
  left:15%;
  transform: rotate(-2deg);
}
.portfolio:nth-child(4) {
  left:30%;
}
.portfolio:nth-child(4):hover {
  left:25%;
  transform: rotate(-2deg);
}
.portfolio:nth-child(5) {
  left:40%;
}
.portfolio:nth-child(5):hover {
  left:35%;
  transform: rotate(-2deg);
}
.opened {
  z-index:1000;
  left:0 !important;
  transform: rotate(0deg);
  box-shadow:0 0 3px rgba(0,0,0,0.3);
  width:100%;
  max-width:1140px;
}
.opened img {
  z-index:5;
}
.ombra {
  position:absolute;
  bottom:20px;
  left:10px;
  width:90%;
  height:20px;
  box-shadow:0 15px 10px rgba(0,0,0,0.7);
  transform: rotate(-2deg);
  display:none;
  z-index:-1;
}
.ombra:after {
  display:block;
  content:"";
  position:absolute;
  bottom:-8px;
  right:-93px;
  width:90%;
  height:20px;
  box-shadow:0 15px 10px rgba(0,0,0,0.7);
  transform: rotate(4deg);
}
/* Style the navigation bullets. */
#navi {
  position:absolute;
  bottom:50px;
  left:50%;
  margin:0 0 0 -62px;
  background:#000;
  opacity:0.8;
  color:white;
  height:24px;
  border-radius:20px;
  padding:7px 10px 0 10px;
}
.circle {
  display: inline-block;
  width:15px;
  height:15px;
  border-radius:10px;
  background:#efefef;
  border:1px solid #000;
  margin-right:6px;
  cursor:pointer;
}
.circle:hover {
  background:white;
  border:1px solid #ccc;
}
.circle:active,
.activenav,
.activenav:hover {
  background:#666;
  border:1px solid #333;
}
.activenav {
  cursor:default;
}
.circle:last-child {
  margin-right:0;
}
</style>
</head>    
<body>
  <div id="allcontent">
      <div id="maincontent">
        <div class="portfolio">
          <img src="img/image1.jpg" alt="Image Alt"><br>
          <div class="ombra"></div>
        </div>
        <div class="portfolio">
          <img src="img/image2.jpg" alt="Image Alt"><br>
          <div class="ombra"></div>
        </div>
        <div class="portfolio">
          <img src="img/image3.jpg" alt="Image Alt"><br>
          <div class="ombra"></div>
        </div>
        <div class="portfolio">
          <img src="img/image4.jpg" alt="Image Alt"><br>
          <div class="ombra"></div>
        </div>
        <div class="portfolio">
          <img src="img/image5.jpg" alt="Image Alt"><br>
          <div class="ombra"></div>
        </div>
      </div>
      <div id="navi"></div>
  </div>
    
</body>  
</html>

3. 플로그인 URL(파일 다운로드)

https://www.jqueryscript.net/slider/stacked-photo-card-gallery.html
포토 카드 갤러리에서는 별도의 js 파일을 사용하지 않습니다.

1. 제이쿼리를 불러옵니다.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

2. 데모 소스를 참고하여 HTML과 CSS를 작성합니다.

3. 제이쿼리 ready() 메소드 내에서 플러그인의 제이쿼리 코드를 사용합니다. 데모 소스를 참고.^^