/** * 메인 네비게이션 * @author * @param * @return string */ $.fn.navigation = function(options) { var $this = this; var config = $.extend( { header : $this //헤더영역 ,depth1 : $(".navtop > ul > li") //첫번째뎁스 ,depth1_item : $(".m_unfold") //첫번째뎁스 ,depth2 : $this.find(".m_unfold > li") //두번째뎁스 ,depth2_item : $this.find(".m_unfold > li > a > img") ,speed : 200 //모션스피드 },options); config.depth1.on("focusin mouseover", function(e){ var target = $(e.currentTarget); var idx = target.index(); var height = config.depth1_item.eq(idx).height(); config.depth1_item.eq(idx).slideDown('fast'); }); config.depth1.on("focusout mouseleave", function(e){ var target = $(e.currentTarget); var idx = target.index(); config.depth1_item.eq(idx).stop().slideUp('fast'); }); config.depth2.on("focusin mouseover", function(){ $(this).find('img').attr('src',$(this).find('img').attr('src').replace('_off', '_on')); }); config.depth2.on("focusout mouseleave", function(){ $(this).find('img').attr('src',$(this).find('img').attr('src').replace('_on', '_off')); }); }; /** * 메인비주얼 * @author * @param * @return string */ $.fn.opacityRolling = function(options) { var $obj = this; // 자기자신 객체 var config = $.extend( // 기본설정 { wrapper : $obj.find("ul") // bg_wrapper ,bg : $obj.find(".main_visual > li") // bg ,length : $obj.find(".main_visual > li").length // bg 갯수 ,speed : 1000 // 애니메이션 속도 ,loop : true // 자동롤링 여부 ,duration : 5000 // 자동롤링 속도 ,prevBtn : $("#prev_btn") // 이전버튼 ,nextBtn : $("#next_btn") // 다음버튼 },options); var current_idx; // 현재롤링idx var next_idx; // 다음롤링idx var timer; // 타이머 var current_idx = 0; // 초기실행 _init(); // 초기실행 function _init() { config.bg.each(function(){ $(this).attr("style","opacity:0"); // 익스플로러 6,7,8 의 경우 추가 if($.browser.version == "6.0" || $.browser.version == "7.0" || $.browser.version == "8.0") { $(this).attr("style","filter:alpha(opacity=0)"); } }); config.bg.eq(current_idx).attr("style","opacity:1"); } return this.each(function(){ // loop == true 이면 자동 롤링 if(config.loop) { rollingPlay(); } // 이전버튼 클릭 config.prevBtn.bind('click', function(){ // 자동롤링 멈춤 rollingStop(); if(current_idx > 0) { button_idx = current_idx - 1; } else { button_idx = config.length -1; } // 이미지 변경 changeBg(current_idx, button_idx); // loop == true 이면 자동 롤링 if(config.loop) { rollingPlay(); } }); // 다음버튼 클릭 config.nextBtn.bind('click', function(){ // 자동롤링 멈춤 rollingStop(); if(current_idx < config.length -1) { button_idx = current_idx + 1; } else { button_idx = 0; } // 이미지 변경 changeBg(current_idx, button_idx); // loop == true 이면 자동 롤링 if(config.loop) { rollingPlay(); } }); // 자동롤링 function rollingPlay() { timer = setInterval(loop, config.duration); } // 자동롤링 시간간격 function rollingStop() { clearInterval(timer); } function loop(){ // next_idx 설정 next_idx = current_idx + 1; if(next_idx >= config.length) { next_idx = 0; } // 이미지 변경 changeBg(current_idx, next_idx); }; function changeBg(tmp_idx1, tmp_idx2){ // 현재 이미지 == 변경할 이미지 이면 리턴 if(tmp_idx1 == tmp_idx2) { return; } // 이미지 변경 config.bg.eq(tmp_idx1).stop().animate({"filter": "alpha(opacity=0)", "opacity":0}, config.speed); config.bg.eq(tmp_idx2).stop().animate({"filter": "alpha(opacity=100)","opacity":1}, config.speed); current_idx = tmp_idx2; } }); }; /** * 둘러보기 * @author * @param * @return string */ $.fn.arround = function(options){ var $obj = this; var config = $.extend( { control_wrap:$obj.find('.around_img ul'), // control_wrap control :$obj.find('.around_img ul li'), // control content :$obj.find('.around_img > p'), // content prev :$obj.find('.narrow_left'), // left arrow next :$obj.find('.narrow_right'), // right arrow control_loc : 0, // control location view_cnt : 5 // thumbnail view image count },options); return this.each(function(){ var current_idx = 0; // 현재idx var change_idx; // 변경idx // left arrow click config.prev.click(function(){ if(current_idx == 0) return false; set_on_list(current_idx - 1); change_content(current_idx - 1, current_idx); if(config.control.length > config.view_cnt) set_control_position('left'); current_idx = current_idx - 1; return false; }); // right arrow click config.next.click(function(){ if(current_idx == config.control.length - 1) return false; set_on_list(current_idx + 1); change_content(current_idx + 1, current_idx); if(config.control.length > config.view_cnt) set_control_position('right'); current_idx = current_idx + 1; return false; }); // control click config.control.click(function(){ var _idx = $(this).index(); if(_idx == current_idx) return false; set_on_list(_idx); change_content(_idx, current_idx); current_idx = _idx; return false; }); // content 이미지 변경 function change_content(idx, pre_idx){ config.content.eq(idx).fadeIn(500); config.content.eq(pre_idx).fadeOut(500); } // direction:움직인 방향 function set_control_position(direction){ var val = current_idx - config.control_loc; if(val == config.view_cnt-1 && direction == 'right') { config.control_wrap.stop(true, true); config.control_wrap.animate({left:'-=155px'}); config.control_loc = config.control_loc + 1; return false; } else if(val == 0 && direction == 'left') { config.control_wrap.stop(true, true); config.control_wrap.animate({left:'+=155px'}); config.control_loc = config.control_loc - 1; } } // small image focus function set_on_list(idx){ config.control.each(function(){ $(this).attr("class", "off"); $(this).find("img").attr("src", $(this).find("img").attr("src").replace("_on", "_off")); }); config.control.eq(idx).attr("class", "on"); config.control.eq(idx).find("img").attr("src", config.control.eq(idx).find("img").attr("src").replace("_off", "_on")); } }); // return end } // arround end // 지점별 갤러리 호출 $(document).ready(function(){ $(".around_images").arround(); });