웹디자인 2: 그림책을 JQ Touch 를 이용하여 슬라이드 방식으로 구현하기

사파리 브라우저는 깔고 기본설정의 고급의 제일하단에 개발자용으로 보기에 체크박스를 선택한 후 브라우저의 개발자용에서 사용자에이전트를 safari 4.1 iPhone으로 설정한다.


참고 : http://wkimin.tistory.com/15
샘플 데모

http://www.inheart.kr/html5/jqtouch-r148/sample/index.html

샘플 코드

http://www.inheart.kr/html5/jqtouch_sample.zip

테마 변경 

themes/apple 또는 jpt 를 복사해서 새로운 자기 많은 테마를 만든다.

<style type="text/css" media="screen">@import "../jqtouch-r148/jqtouch/jqtouch.css";</style>

<style type="text/css" media="screen">@import "../jqtouch-r148/themes/apple/theme.css";</style>

<style type="text/css" media="screen">@import "../jqtouch-r148/extensions/jqt.photo.css";</style>

디자인 변경이 필요한곳 (이미지 변경 필요)

sample/jqt_startup.png (320 * 480)

sample/jqtouch.png (57 * 57)

ABOUT 변경 

            <div id="about" class="selectable">

                    <p><img src="jqtouch.png" /></p>

                    <p><strong>이야기 책</strong><br />Version 1.0 beta<br />

                        <a href="http://www.davidkaneda.com">By David Kaneda</a></p>

                    <p><em>Create powerful mobile apps with<br /> just HTML, CSS, and jQuery.</em></p>

                    <p>

                        <a href="http://twitter.com/jqtouch" target="_blank">@jQTouch on Twitter</a>

                    </p>

                    <p><br /><br /><a href="#" class="grayButton goback">Close</a></p>

            </div> 

이미지 삽입 

2가지 방법이 있는데, 첫번째는 다른곳에 올려 놓은 이미지를 URL을 통해서 가지고 오는 방법과

자신의 폴더에 같이 이미지를 놀리는 방법입니다.

jQT.generateGallery("photo", [{  src:"http://www.nasa.gov/images/content/450090main_image_1653_946-710.jpg",

 width: 946,

 height: 710},

{src:"/jqtouch/test-image-1.jpg",caption:"A test caption for the generator"},

{src:"/jqtouch/test-image-4.jpg"}, 

{src:"http://www.thinkgeek.com/images/products/front/zombie_repellent_crayon.jpg"},

{src:"http://imgs.xkcd.com/store/imgs/sudo_square_0.png"},

{src:"http://antwrp.gsfc.nasa.gov/apod/image/1005/ic443_franke900.jpg?2"}, ],{defaultIndex:5});

jQT.generateGallery("photo2",[

{src:"http://www.nasa.gov/images/content/450090main_image_1653_946-710.jpg"},

{src:"/jqtouch/test-image-1.jpg",caption:"Test Image 1"},

{src:"/jqtouch/test-image-2.jpg",caption:"Test Image 2"},

{src:"http://rlv.zcache.com/css_is_awesome_mug-p1687164350719819282objs_210.jpg",caption:"CSS is Awesome"}, 

{src:"/jqtouch/test-image-4.jpg"} ]);

Posted by 겨울의남자