결과보기

       <!-- fotorama.css & fotorama.js. -->
        <link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->    

html

<div data-role="page" id="gallery_img">
        <div data-role="header">
            <a href="#main"  data-direction="reverse" class="ui-btn ui-btn-icon-left ui-icon-home ui-btn-icon-notext">Home</a>
            <h1>갤러리 보기</h1>
        </div>
        <div data-role="content" id="content">
            <div class="about">
                <h3>갤러리 소개</h3>
                <p>이 페이지는 갤러리에 대한 소개입니다.<br>
                fotorama 플러그인은 모바일앱에 적용하기 쉬운 플러그인입니다.<br>
                <a href="http://fotorama.io">http://fotorama.io</a>
                </p>
            </div>
            <div class="fotorama" data-nav="thumbs" data-allowfullscreen="true">
                <img src="http://s.fotorama.io/1.jpg">
                <img src="http://s.fotorama.io/2.jpg">
                <a href="http://youtube.com/watch?v=C3lWwBslWqg">Desert Rose</a>
                <video width="120%" controls data-img="img/bus_thumb.jpg" >
                    <source src="media/bus.mp4" type="video/mp4">
                    <img src="img/bus_thumb.jpg">
                </video>
            </div>
        
        </div>
        <div data-role="footer" data-theme="a" id="footer" data-position="fixed">
            <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="gear" class="ui-btn-active">설정</a></li>
                <li><a href="#" data-icon="grid" >그리드</a></li>
                <li><a href="#" data-icon="search" >검색</a></li>
                <li><a href="#" data-icon="info" >정보</a></li>
            </ul>
        </div>
        </div>
    </div>

css

#gallery_img>#footer{height:auto;}