묻고답하기
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 지식이 얕아서 어디서 부터 시작을 해야할지 모르겠네요.
조언부탁드립니다.
감사합니다.
