Gallery page using photoswipe

한글 블로그로 보기


photoswipe

PhotoSwipe is very easy & powerful library for gallery.

First step - prepare file.

You get library phothswipe site & unzip. and copy to your project folder.

My case, I copy to C:/Program Files (x86)/Apache Group/Apache2/htdocs/photoswipe/

Second step - add library.

Change to photswipe's jquery library.

Add this code.

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

Third step - Implement gallery.

1. <div data-role="page" id="equip-image" class="gallery-page">
2.     <div data-role="header" data-position="fixed" >
3.             <h1>Equipment Image</h1>
4.             <a href="#page" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right" data-iconshadow="false">
5.             </a>
6.         </div>
7.     <div data-role="content">  
8.             <div class="gallery">
9.             <div class="gallery-row">
10.                     <div class="gallery-item">
11.                     <a href="http://jme21.co.kr/004/images/eqip_01_01.jpg" rel="external">
12.                         <img   src="http://jme21.co.kr/004/images/eqip_01_01.jpg" alt="TSA-J"/>
13.                     </a>
14.                     </div>
15.                     <div class="gallery-item">
16.                     .....
17.                 </div>
18.            
19.            </div>
20.         </div>
21.    
22.     <div data-role="footer" align="center" data-position="fixed">
23.         <img width="100%" src="http://jme21.co.kr/images/copyright_05.jpg" />
24.     </div>
25. </div>

You add class "gallery-page" page tag.

In content tag you consist

<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> 

You can see this...

If you click image..

You can see gallery.