묻고답하기
jquery 플러그인 사용 문제
2013.02.01 11:59
안녕하세요.
XE 사용할때마다 jQuery Plugin때문에 애를 먹습니다.
어떤 plugin은 제대로 작동이 되는 반면, 어떤 것은 어디서부터 해결을 봐야할지 모르겠네요.
워낙 답답해서, 코드이그나이터 쪽이나 워드프레스쪽을 알아보려고 합니다.
xe가 이제 손에 익을만 한데.. 이런 경우는 참 답답하고 시간을 너무 잡아먹네요.
마지막으로 이쪽에 한 번 질문글 드립니다.
supersized란 jquery plugin을 사용해보려 했는 기존에 작성한 HTML 페이지에서는 출력이 제대로 되지만,
xe layout에 적용하려고 하니, 제대로 안됩니다.
해결을 하기 위해 ...
1)
xe에서 기본 제공되는 jquery.min.cs를 이용해봤습니다.
제가 사용하고 싶은 jquery plugin에서 제공하는 버젼으로 위의 파일을 대체해보았습니다.
모두 소용이 없었구요.
2)
혹시나 싶어, 경로 문제도 확인해봤지만 문제가 없었습니다.
3)
firebug에서는 jquery warning을 보여주긴 하는데.. 너무 많고 해결 방법이 안서드라구요.
아래는 작성한 layout.html입니다.
js는 xe에서 기본 제공하기 때문에 따로 삽입하지 않았구요.
나머지는 삽입된 파일은 plugin에서 필요로 하는 파일들입니다.
<load target="ilmiri_index.css" />
<load target="css/supersized.css" />
<load target="css/supersized.shutter.css" />
<load target="js/jquery.easing.min.js" />
<load target="js/supersized.3.2.7.min.js" />
<load target="js/supersized.shutter.min.js" />
<script type="text/javascript">
jQuery.noConflict();
jQuery(function ($) {
$.supersized({
// Functionality
slideshow: 1, // Slideshow on/off
autoplay: 1, // Slideshow starts playing automatically
start_slide: 1, // Start slide (0 is random)
stop_loop: 0, // Pauses slideshow on last slide
random: 1, // Randomize slide order (Ignores start slide)
slide_interval: 4000, // Length between transitions
transition: 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed: 1000, // Speed of transition
new_window: 1, // Image links open in new window/tab
pause_hover: 0, // Pause slideshow on hover
keyboard_nav: 1, // Keyboard navigation on/off
performance: 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect: 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width: 0, // Min width allowed (in pixels)
min_height: 0, // Min height allowed (in pixels)
vertical_center: 1, // Vertically center background
horizontal_center: 1, // Horizontally center background
fit_always: 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait: 0, // Portrait images will not exceed browser height
fit_landscape: 0, // Landscape images will not exceed browser width
// Components
slide_links: 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links: 1, // Individual thumb links for each slide
thumbnail_navigation: 0, // Thumbnail navigation
slides: [ // Slideshow Images
{ image: 'bg/ad1.jpg', title: '' },
{ image: 'c:/APM_setup/htdocs/bg/01.jpg', title: '' },
],
// Theme Options
progress_bar: 0, // Timer for each slide
mouse_scrub: 0
});
});
</script>
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>그리고, 아래는 실제적인 작동이 잘 되는 파일 소스 입니다 .
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>타이틀</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.1/build/cssreset-context/cssreset-context-min.css" />
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/supersized.shutter.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="js/supersized.shutter.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$.supersized({
// Functionality
slideshow: 1, // Slideshow on/off
autoplay: 1, // Slideshow starts playing automatically
start_slide: 1, // Start slide (0 is random)
stop_loop: 0, // Pauses slideshow on last slide
random: 1, // Randomize slide order (Ignores start slide)
slide_interval: 4000, // Length between transitions
transition: 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed: 1000, // Speed of transition
new_window: 1, // Image links open in new window/tab
pause_hover: 0, // Pause slideshow on hover
keyboard_nav: 1, // Keyboard navigation on/off
performance: 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect: 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width: 0, // Min width allowed (in pixels)
min_height: 0, // Min height allowed (in pixels)
vertical_center: 1, // Vertically center background
horizontal_center: 1, // Horizontally center background
fit_always: 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait: 0, // Portrait images will not exceed browser height
fit_landscape: 0, // Landscape images will not exceed browser width
// Components
slide_links: 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links: 1, // Individual thumb links for each slide
thumbnail_navigation: 0, // Thumbnail navigation
slides: [ // Slideshow Images
{ image: 'bg/ad1.jpg', title: '' },
{ image: 'bg/01.jpg', title: '' },
{ image: 'bg/02.jpg', title: '' },
{ image: 'bg/01.jpg', title: '' },
{ image: 'bg/03.jpg', title: '' },
{ image: 'bg/04.jpg', title: '' },
{ image: 'bg/05.jpg', title: '' },
{ image: 'bg/06.jpg', title: '' },
{ image: 'bg/07.jpg', title: '' },
{ image: 'bg/08.jpg', title: '' }
],
// Theme Options
progress_bar: 0, // Timer for each slide
mouse_scrub: 0
});
})(jQuery);
</script>
<style> <!-- 생략 --> </style>
</head>
<body>
<div id="wrapper">
<div id="title">
<img src="img/logo.png" width="200px" />
</div>
<div id="submenu">
<ul>
<li><a href="#" class="menu_part">메뉴1</a></li>
<li class="menu_part"><a href="#">메뉴2</a></li>
<li class="menu_part"><a href="#">메뉴3</a></li>
<li class="menu_part"><a href="#">메뉴4</a></li>
<li class="menu_part"><a href="#">메뉴5</a></li>
</ul>
</div>
<div id="focus">
<img src="img/slogan1.png" />
</div>
<div id="footer">
<div class="title">footer title</div>
<div class="info">
footer_detail
</div>
</div>
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
</body>
</html>두서 없지만, 어떻게 하면 해결을 할 수 있을지 궁금해서 질문드립니다.
애초에 jquery 지식이 얕아서 어디서 부터 시작을 해야할지 모르겠네요.
조언부탁드립니다.
감사합니다.
댓글 0
| 글쓴이 | 제목 | 최종 글 |
|---|---|---|
| XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
| 천국： | 로그인이 안되요 | |
| fldfkero | 제로보드로 흠페이지를 마들라고 합니다 [1] | 2008.02.02 by 준이사랑 |
| 지니111 | 제로보드 xe 아이프레임삽입관련질문입니다 [1] | 2008.02.02 by 준이사랑 |
| 녹차향기 | 궁금합니다. 답변부탁합니다. [1] | 2008.02.02 by RulruRalra |
| 나경한 | 카테고리 선택을 라디오버튼으로? | |
| 까칠닷컴 | 링크 페이지가 연결이 잘 안되네요. [4] | 2008.02.02 by 임동희587 |
| 임동희587 | 스크랩한 글은 어디에서 확인할 수 있나요? [2] | 2008.02.02 by 임동희587 |
| MC 바리반디 | 0.2.9 분류에서 특정 그룹만 분류 표시 [7] | 2008.02.02 by 백성찬 |
| 루브 |
첨부파일에러..
 | |
| 감뿌리 |
음력 DB를 UTF8로 셋팅된 DB에 넣는 방법을 알고싶습니다.
| |
| 학생a | 위젯에서 가입폼 확장 변수 값을 사용하려면? | |
| 간절히 | 신문사이트 스킨제작 부탁드립니다 [1] | 2008.02.03 by LeagueON |
| 한미남 | 회원마다 마이페이지 게시판연동스킨이요....ㅡ.ㅡ'''' 급!! 원해요~^^* [1] | 2008.02.03 by LeagueON |
| shinix | 스킨제작 질문입니다. 요청글 포함. | |
| 임동희587 | 라이프팟 제로xe에서는 안써지나요? [2] | 2008.02.03 by 가클 |
| 황성경245 | 설치시 이런 오류가 다발로..^^;; [4] | 2008.02.03 |
| sbshs77 | 다운로드권한이 없다고나옴 | |
| 슈퍼인 | 레이아웃 직접 수정은 어디서 하는지요? [3] | 2008.02.03 by 까마구 |
| 메티스a |
RSS가 안되요
[1]
| 2008.02.03 by 메티스a |
| 멋진자룡 | 게시판에 1차메뉴 2차메뉴 경로위치가 자기마음대로에요 |