조회 수 13307 추천 수 0 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

prettyPhoto는 웹페이지를 구성할때 그림의 섬네일를 확대시켜 보여줄 때 매우 유용한 jQuery용 라이브러리입니다.

이 홈페이지의 Photo메뉴에서 구성된 허세화면을 위해서는 도저히 없으면 안되는 중요한 역할을 하고있습니다. 이걸 이용했기에 구원받았다고 할 수 있죠.


jQuery용 prettyPhoto는 현재 v3.1.3까지 나와있으며, 아래의 링크에서 사용방법을 익히며 다운받으실 수 있습니다.


그런데, 이미지의 경우엔 각 이미지와 해상도에 맞는 '풀사이즈' 출력이 기본설정이지만

유투브와 같은 동영상의 링크를 걸었을 경우 720p이상의 HD지원이 가능한 소스임에도

큰 모니터에선 쥐꼬리만한 화면으로 구동되는 모습을 보실 수 있습니다.


제 홈페이지에서는 이러한 문제해결을 위해

호촐하는 jquery.prettyPhoto.js 파일의 디폴트 사이즈 출력부분을

HD사이즈로 수정하여 구동하는 방식으로 해결을 하였습니다.



구현과정 >


호출하려는 jquery.prettyPhoto.js 파일을 뜯어서 default_width:500,default_height:344를 검색해봅시다.

버전마다 다르겠지만 대체적으로 8번째 줄에서 다음과 비슷한 길다란 소스를 에서 발견하실 수 있습니다.


(function($){$.prettyPhoto={version:'3.1.3'};$.fn.prettyPhoto=function(pp_settings){pp_settings=jQuery.extend({animation_speed:'fast',slideshow:5000,autoplay_slideshow:false,opacity:0.80,show_title:true,allow_resize:true,

default_width:500,default_height:344,counter_separator_label:'/',theme:'pp_default',horizontal_padding:20,hideflash:false,wmode:'opaque',

autoplay:true,modal:false,deeplinking:true,overlay_gallery:true,keyboard_shortcuts:true,changepicturecallback:function(){},callback:function(){},ie6_fallback:true,markup:'<div class="pp_pic_holder">


이곳에서 발견되는

default_width:500,default_height:344 속성 부분을, 제 경우엔 720p 해상도 출력 사이즈인 default_width:1280,default_height:720 으로 수정하였습니다.

적용 후 큰 모니터에서 체감할 수 있는 화면의 느낌은 다음과 같습니다.


디폴트 360p사이즈 화면360p.jpg

(prettyPhoto 공식 사이트의 예제. 근데 저거 720p출력도 가능한 영상입니다!)



수정 후 720p 영상출력 화면720p.jpg


(여기 Movie페이지 - xe 컨텐츠 이미지 슬라이더 연동)
오오 크고 아름답다...


저렇게 수정만 해주시면, 1280 x 720 이 안되는 해상도의 (HD로 불러올 수 없는)모니터에서 가동하더라도

어쨌거나 큰화면으로 출력하여 480p나 360p로 조절되어 나타나게 됩니다.

오오... 꼼수쓸걸 예견까지 했다니 너무 위대한 소스다...


이렇게 고쳤을시에 주의할 점, 페이지에서 타 위젯이나 애드온을 사용할때 나도 모르게

jquery.prettyPhoto.js 혹은 jquery.prettyPhoto.min.js의 중복호출이 되는 현상은 반드시 피해주셔야 하겠습니다.

사실 이건 근본적인 해결은 아니라 꼼수니까요.


이미지의 출력 사이즈를 조정하고 싶으시다면,

pp_dimensions=_fitToViewport(imgPreloader.width,imgPreloader.height);를 검색하여 

pp_dimensions=_fitToViewport('가로넓이','세로높이')로 지정해주시면 됩니다.


추가기재 >

뭘해도 꼼수만 쓰는 저를 위해 '배워서남준다'님께서 중복 js로딩에 대한 해결책을 제시해 주셨습니다.

다음은 위젯이나 레이아웃에서 로딩된 js의 중복 체크를 위한 구문입니다. (예: jquery.prettyPhoto.js)


<!--// 위젯이나 레이아웃에서 로딩된 js 중복 체크 -->

<!--@foreach(Context::getJsFile() as $key => $jsfile)-->

<!--@if(preg_match('/jquery.prettyPhoto.js/i',$jsfile['file']))-->{@$ptyptojs='Y'}<!--@end-->

<!--@end-->

<load cond="$ptyptojs != 'Y'" target="jquery.prettyPhoto.js" />


만약 이전에 로딩한 js파일을 삭제하고 새로운 js파일을 로딩하려면

{@$ptyptojs='Y'} 을

{@Context::unloadJsFile($jsfile['file'])} 

으로 수정하고

<load cond="$ptyptojs != 'Y'" target="jquery.prettyPhoto.js" /> 을

<load target="jquery.prettyPhoto.js" />

으로 수정하면 됩니다.


xe를 사용하다보면 원하지 않게 js파일이 중복로딩되는 경우가 많은데, 해결을 위해 매우 유용하게 활용할 수 있을 소스입니다. 고맙습니다.



이 소스를 뜯어보기 위해 컨텐츠슬라이더 위젯의 제작자이신 '배워서남준다' 님의 하늘과 같은 도움이 있었습니다. 다시 한번 감사드립니다.

Comment '2'
  • ?
    Seung-Ho Lee 2011.12.01 12:24
    꼼수네
  • profile
    JONG 2011.12.04 04:46
    홈에 들어있던 동영상 출력 위젯은 메뉴 수정후 Photo -> Movie로 옮겨졌습니다.

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
21 Utility 안드로이드 개발환경 구축을 위한 프로그램 설치순서 file JONG 2011.12.20 14472
20 Utility PuTTY(한글) - SSH, Telnet 등 터미널 환경 접속 프로그램 file JONG 2011.12.19 11663
19 Database xe 서버이전시 xe_documnets의 content 수정 때 사용한 쿼리문 7 file JONG 2011.12.19 8826
18 XpressEngine XE 사이트 DB 복원하기 (올리기) file JONG 2011.12.18 16454
17 XpressEngine XE 사이트 DB 백업하기 (내려받기) file JONG 2011.12.18 17968
16 Utility Imagemapic - 이미지 맵태그 & 부분 링크 만들기 file JONG 2011.12.18 12736
15 Utility Rainmeter - 데스크톱 배경 꾸미기 & 활용하기 file JONG 2011.12.14 9434
14 Web Google Analytics 사용하기 - 사이트 방문자 통계, 분석 보고서 file JONG 2011.12.09 13472
13 XpressEngine 네이버 검색엔진과 연동하기 (XE Syndication모듈) 4 file JONG 2011.12.06 16574
12 XpressEngine iPhone에서 XE게시판에 이미지를 업로드하자! XE Writer 2 file JONG 2011.12.05 19343
11 Web 소셜북마킹 - AddThis 버튼 추가하기 file JONG 2011.12.05 10275
10 Utility IETester - 웹표준 지원을 위한 인터넷 익스플로러 버전별 브라우저 체커 file JONG 2011.12.05 8605
9 XpressEngine Textyle 모듈(xe기반 설치형 블로그)을 처음 사용해본 느낌 & 인터넷 잡상 file JONG 2011.12.02 11660
8 XpressEngine 이미 로딩된 js파일의 중복 체크를 위한 소스 2 JONG 2011.12.01 13675
» Web prettyPhoto에서 Youtube HD화질 동영상 출력하게 수정하기 2 file JONG 2011.12.01 13307
6 Web Facebook의 좋아요 버튼을 페이지에 붙이기 4 JONG 2011.12.01 14079
5 XpressEngine Facebook의 '좋아요' 버튼을 추가하였습니다 & 소스 11 JONG 2011.11.30 14457
4 Utility 이클립스(Eclipse)에서 SVN 사용하기 (예: XE core) file JONG 2011.11.30 10877
3 Utility Sakura Editor - 유니코드 대응의 일본어기반 메모장 file JONG 2011.11.29 10208
2 XpressEngine XpressEngine관련 사이트 링크 JONG 2011.11.29 26797
Board Pagination Prev 1 2 3 4 Next
/ 4