PhotoSwipe로 gallery 만들기!!

photoswipe

 

 

PhotoSwipe를 이용하면 간단하고도 깔끔한 갤러리를 만들 수 있습니다.

 

단계별로 알아 볼 께용.ㅋ

 

First step - 먼저 파일준비하기

 

phothswipe site 요기서 다운로드한다음에 자신의 프로젝트 폴더에 압축을 풀어 주세용.

 

저 같은 경우엔 C:/Program Files (x86)/Apache Group/Apache2/htdocs/photoswipe/  요기로~

Second step - 이제 라이브러리를 적용해보죠~

 

기존의 j-query는 못씁니다. photoswipe에서 제공해 주는걸로 대체해야 해용

 

헤더부분에 아래의 코드를 추가합니당.

 

<!--photoswipe css-->
<link rel="stylesheet" href="photoswipe/lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet"/>
<style type="text/css">
        div.gallery-row:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
        div.gallery-item { float: left; width: 33.333333%; }
        div.gallery-item a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
        div.gallery-item img { display: block; width: 100%; height: auto; }
        #Gallery1 .ui-content, #Gallery2 .ui-content { overflow: hidden; }
</style>
 
<!--photoswipe js-->
<script type="text/javascript" src="photoswipe/lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="photoswipe/lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
 
<script src="photoswipe/lib/simple-inheritance.min.js" type="text/javascript"></script>
<script src="photoswipe/lib/jquery.animate-enhanced.min.js" type="text/javascript"></script>
<script src="photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
       $('div.gallery-page').live('pageshow',function(e){
           $("div.gallery a", e.target).photoSwipe();
           return true;
       })
    });
</script>

Third step - body에서 갤러리 구현하기

 

<div data-role="page" id="equip-image" class="gallery-page">
    <div data-role="header" data-position="fixed" >
            <h1>Equipment Image</h1>
            <a href="#page" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right" data-iconshadow="false">
            </a>
        </div>
    <div data-role="content">  
            <div class="gallery">
            <div class="gallery-row">
                    <div class="gallery-item">
                    <a href="http://jme21.co.kr/004/images/eqip_01_01.jpg" rel="external">
                        <img   src="http://jme21.co.kr/004/images/eqip_01_01.jpg" alt="TSA-J"/>
                    </a>
                    </div>
                    <div class="gallery-item">
                    .....
                </div>
           
           </div>
        </div>
   
    <div data-role="footer" align="center" data-position="fixed">
        <img width="100%" src="http://jme21.co.kr/images/copyright_05.jpg" />
    </div>
</div>

위에서 보면 아시겠지만 페이지 태그쪽에 gallery-page라는 클래스를 넣어주고요~

 

컨텐츠 태그안에서 아래와 같은 형식으로 추가해 줍니다.

 

<div class="gallery">
    <div class="gallery-row">
        <div class="gallery-item>
            <a href="img src"><img src=thumb nail img alt=image name/>
       </div>
   </div>
</div>

처음 라이브러리 적용할때 썸네일 이미지를 33.3%로 잡았는데 가로로 3장씩 추가하려고 그리했어요

 

이제 구현된 코드를 실행해보면 아래와 같이 나옵니다.

 

 

이미지를 클릭해보면~갤러리가 나타납니다^^