FancyBox 라이브러리를 이용한 갤러리 만들기

기존에 갤러리스킨이 많이 공개되어 있는데 조금 더 기능을 추가한 갤러리 스킨을 만들어 보겠습니다.

데모1 : 그누보드5 배포판용 스킨

데모2 : 부트스트랩4용 스킨

스킨을 만드는 가장 쉬운 방법은 기존의 있는 것을 이용하는 것입니다.

그누보드5 최근 배포판에 포함되어 있는 스킨이 가장 좋은 재료가 됩니다.

갤러리 스킨 역시 배포판에 포함되어 있는 스킨을 이용하여 원하는 기능을 추가하고 최종 스킨을 완성할 수 있습니다.

기능

라이트박스 슬라이드 기능

전체화면 기능

자동 슬라이드 기능

SNS 공유 기능 등

HTML

<div class="da-card box-shadow">

              <div class="da-card-photo">

                <?php if ($is_checkbox) { ?>

                <label for="chk_wr_id_<?php echo $i ?>" class="sound_only"><?php echo $list[$i]['subject'] ?></label>

                <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">

                <?php } ?>

                <?php echo $img_content;?>

                <div class="da-overlay">

                  <div class="da-social">

                  <h5 class="mb-10 color-white pd-20"><?php echo $list[$i]['subject'] ?></h5>

                    <ul class="clearfix">

                      <li><a href="<?php echo $thumb['ori'] ?>" data-fancybox="images"><i class="fa fa-picture-o"></i></a></li>

                      <li><a href="<?php echo $list[$i]['href'];?>"><i class="fa fa-link"></i></a></li>

                    </ul>

                  </div>

                    </div>

                </div>

            </div>

CSS 

/* fencybox skin */

.gallery-wrap{

  margin:50px 0;

}

.gallery-wrap > ul > li {

  margin-bottom: 30px; }

  .da-card {

    position: relative; }

  .da-card .da-card-content {

    padding: 20px;

    background: #ffffff; }

  .da-card .da-card-photo {

    position: relative;

    overflow: hidden; }

  .da-card .da-card-photo img {

    position: relative;

    display: block;

    width: 100%;

    -webkit-transition: all 0.4s linear;

    transition: all 0.4s linear; }

  .da-card .da-overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    opacity: 0;

    overflow: hidden;

    background: rgba(19, 30, 34, 0.7);

    -webkit-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out; }

  .da-card .da-overlay.da-slide-left {

    left: -100%;

    -webkit-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out; }

  .da-card .da-card-photo:hover .da-overlay.da-slide-left {

    left: 0; }

  .da-card .da-overlay.da-slide-right {

    right: -100%;

    left: inherit;

    -webkit-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out; }

  .da-card .da-card-photo:hover .da-overlay.da-slide-right {

    right: 0; }

  .da-card .da-overlay.da-slide-top {

    top: -100%;

    -webkit-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out; }

  .da-card .da-card-photo:hover .da-overlay.da-slide-top {

    top: 0; }

  .da-card .da-overlay.da-slide-bottom {

    top: 100%;

    -webkit-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out; }

  .da-card .da-card-photo:hover .da-overlay.da-slide-bottom {

    top: 0; }

  .da-card .da-card-photo:hover img {

    -webkit-transform: scale(1.2) translateZ(0);

    transform: scale(1.2) translateZ(0); }

  .da-card .da-card-photo:hover .da-overlay {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: translateZ(0);

    transform: translateZ(0); }

  .da-card .da-card-photo:hover .da-social {

    opacity: 1; }

  .da-card .da-social {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    width: 100%;

    height: 100%;

    padding: 20px;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    color: #ffffff;

    opacity: 0;

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out; }

  .da-card .da-social h5 {

    position: absolute;

    top: 0;

    white-space: nowrap;

    overflow: hidden;

    width: 100%;

    text-overflow: ellipsis; }

  .da-card .da-social ul li {

    float: left; }

  .da-card .da-social ul li a {

    display: block;

    width: 45px;

    height: 45px;

    border: 1px solid #ffffff;

    line-height: 43px;

    font-size: 20px;

    text-align: center;

    color: #ffffff;

    -webkit-box-shadow: 0px 0px 0px 1px #ffffff;

    box-shadow: 0px 0px 0px 1px #ffffff;

    -webkit-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out; }

  .da-card .da-social ul li a:hover {

    background: #ffffff;

    color: #0099ff; }