JQuery 하나의 JS 파일에서 여러 페이지로 연결

Question

이미지를 클릭하면 새로운 (라이트 박스) 팝업이 나타나고 특정 애니메이션이 재생되도록 현재 스크립트를 수정하고 싶습니다. 현재이 기능이 작동하지만 애니메이션을 다른 부분으로 분리하여 애니메이션에 연결해야합니다.

왼쪽의 삼각형을 클릭하면 다른 애니메이션으로 다른 페이지를로드하려고하지만 확실하지 않습니다.

참조 코드 타격 (코드의 큰 덩어리 죄송합니다)

// ------------------------------------------------------------------------------------------------------------------------------ 
// getobjbyId() 
function getobjbyId(id){var ns4 = (document.layers)?true:false; var ns6 = (document.getElementById)?true:false; var ie4 = (document.all)?true:false;if (ns4){return document.layers[id];}else if(ie4){return document.all[id];}else{return document.getElementById(id);}} 

// pushin() 
function pushin(the_array, the_data){var len_array=the_array.length;the_array[len_array]=the_data;return the_array.length;} 

// JavaScript function to display flash movie format video on web page 
function open_window_centered(the_url, the_width, the_height, the_scrollbar){ 
    if(window.screen){ 
     var w = parseInt(the_width) + 20; var h = parseInt(the_height) + 20; var x0 = (screen.availWidth - 10 - w)/2; var y0 = (screen.availHeight - 30 - h)/2; 
     var str_scrollbar=""; if(the_scrollbar) str_scrollbar=", scrollbars=1"; 
     window.open(escape(the_url),'', 'width='+w+', height='+h+', innerWidth='+w+', innerHeight='+h+', screenX='+x0+', screenY='+y0+', left='+x0+', top='+y0+str_scrollbar); 
    } 
    return false; 
} 

// ------------------------------------------------------------------------------------------------------------------------------ 

function display_video(the_video_name, the_width, the_height, the_caption){ 
    if (window.screen){ 
     var w = parseInt(the_width) + 20; 
     var h = parseInt(the_height) + 20; 
     var x0 = (screen.availWidth - 10 - w)/2; 
     var y0 = (screen.availHeight - 30 - h)/2; 
     window.open('../_include/_play_video/play_video.html?'+escape(the_video_name)+'&'+the_width+'&'+the_height+'&'+escape(the_caption),'', 'width='+w+', height='+h+', innerWidth='+w+', innerHeight='+h+', screenX='+x0+', screenY='+y0+', left='+x0+', top='+y0); 
    } 
} 


MM_preloadImages("../_images/background_top_dropdown_menu_left.gif", "../_images/background_top_dropdown_menu_right.gif"); 


// top dropdown menu 
$(function(){ 
    var _top_menu_items = $("ul#top_menu>li"); 
    _top_menu_items.hover(
     function(){ 
      $(this).children("a").addClass("over"); 
      $(this).children("ul").addClass("over"); 
     }, 
     function(){ 
      $(this).children("a").removeClass("over"); 
      $(this).children("ul").removeClass("over"); 
     } 
    ); 
}); 




// email protector 
$(function(){ 

    var $emails = $(".email"); 
    var real_address; 

    $emails.each(function(){ 
     real_address = $(this).text().replace(/\[\-at\-\]/, '@').replace(/\[\-dot\-\]/g, '.'); 
     $(this).html("<a href='mailto:" + real_address + "' target='_blank'>" + real_address +"</a>");    
    }); 

}); 




// lightbox script 
// 2010-09-08 

$(window).load(function(){ 

    if($(".link_how_we_work").length>0){ 

     $("body").append(get_html_lightbox()); 

     var _lightbox = $("#lightbox"), 
      _shadow = $("#lightbox #lightbox_shadow"), 
      _stage = $("#lightbox #lightbox_stage"); 


     var _interval_DEFAULT = 3000, 
      _duration_DEFAULT = 300; 

     var _total, 
      _frames = null, 
      _index = -1, 
      _go = true, 
      _direction = 1, 
      _timer = null, 
      _interval = _interval_DEFAULT, 
      _duration = _duration_DEFAULT; 

     $.get("../_include/how_we_work.html", function(data){ 

      _stage.prepend($("<div/>").append(data).find("ul#images_how_we_work")); 
      _stage.append($("<div/>").append(data).find("div#nav_how_we_work")); 

      _frames = $("ul#images_how_we_work li"); 
      _total = _frames.length; 

      $(".link_how_we_work").click(function(){_show();return false;}); 
      $("#lightbox #lightbox_button_close").click(function(){_hide();return false;}); 

      $("#nav_how_we_work #button_how_we_work_prev").click(function(){ 
       if(!$(this).hasClass("disabled")) _prev(); 
       return false; 
      }); 
      $("#nav_how_we_work #button_how_we_work_next").click(function(){ 
       if(!$(this).hasClass("disabled")) _next(); 
       return false; 
      }); 

     }); 

    } 

    function _start(){ 
     _index = -1; 
     for(var i=0;i<_total;i++) _frames.eq(i).css({'display':'none', 'opacity':0}); 

     _go= true; 
     _play(); 
    } 

    function _end(){ 
     _go= false; 
     if(_timer){ 
      window.clearTimeout(_timer); 
      _timer = null; 
     } 

     _index = -1; 
     for(var i=0;i<_total;i++) _frames.eq(i).css({'display':'none', 'opacity':0}); 
    } 


    function _move(){ 
     var _index_0 = _index; 

     if(_direction>0){ 
      _index = _index_0 + 1; 
      if(_index==_total) _index = 0; 
     }else{ 
      if(_index_0>0) _index = _index_0 - 1; 
     } 

     if(_index !== -1) _interval = parseInt(_frames.eq(_index).attr("id").split(":")[1]); 
     if(isNaN(_interval)) _interval = _interval_DEFAULT; 
    } 


    function _play(){ 

     var _index_0 = _index; 
     _move(); 
     if(_index == -1) return false; 

     if(_index>_index_0) 
      _frames.eq(_index) 
       .css({'display':'block', 'opacity':0}) 
       .animate(
        {opacity:1}, 
        _duration, 
        "linear", 
        function(){ 
         if(_index_0 !== -1) _frames.eq(_index_0).css({'display':'none', 'opacity':0}); 
        } 
       ); 

     if(_index<_index_0) 
      _frames.eq(_index).css({'display':'block', 'opacity':1}); 
      _frames.eq(_index_0) 
       .css({'display':'block', 'opacity':1}) 
       .animate(
        {opacity:0}, 
        _duration, 
        "linear", 
        function(){ 
         $(this).css({'display':'none', 'opacity':0}); 
        } 
       ); 

     if(_total>1 && _go){ 
      if(_timer) window.clearTimeout(_timer); 
      _timer = setTimeout(_play, _interval); 
     } 

     if(_index == 0){ 
      $("#nav_how_we_work #button_how_we_work_prev").addClass("disabled"); 
     }else{ 
      $("#nav_how_we_work #button_how_we_work_prev").removeClass("disabled"); 
     } 

     if(_index == _total-1){ 
      $("#nav_how_we_work #button_how_we_work_next").addClass("disabled"); 
     }else{ 
      $("#nav_how_we_work #button_how_we_work_next").removeClass("disabled"); 
     } 


    } 


    function _pause(){ 
     _go= false; 
     if(_timer){ 
      window.clearTimeout(_timer); 
      _timer = null; 
     } 
    } 

    function _prev(){ 
     _direction = -1; 
     _pause(); 
     _play(); 
    } 

    function _next(){ 
     _direction = 1; 
     _pause(); 
     _play(); 
    } 



    function _show(){ 
     _resize(); 
     _lightbox.css({'visibility':'visible'}); 

     _shadow.animate(
      {opacity:0.5}, 200, "linear", 
      function(){ 
       _stage.css({'visibility':'visible'}); 
       _start(); 
      } 
     ); 
    } 


    function _hide(){ 
     _end(); 

     _lightbox.css({'visibility':'hidden'}); 
     _stage.css({'visibility':'hidden'}); 
     _shadow.css({opacity:0}); 
    } 


    $(window).resize(function() { 
     if(_lightbox.css('visibility') == 'visible'){_resize();} 
    }); 

    function _resize(){ 
     var _page_sizes = get_page_size(), 
      _page_scrolls = get_page_scroll(), 
      _top = ((_page_sizes[3] - _stage.height())/3>20?(_page_sizes[3] - _stage.height())/3:20) + _page_scrolls[1]; 
     _lightbox.css({width:_page_sizes[0], height:_page_sizes[1]}); 
     _shadow.css({width:_page_sizes[0], height:_page_sizes[1]}); 
     _stage.css({top:_top}); 
    } 


}); 



function get_html_lightbox(){ 

    var s=""; 

    s += "<div id='lightbox'>"; 

    s += " <div id='lightbox_shadow'><!-- --></div>"; 
    s += " <div id='lightbox_stage'>"; 
    s += "  <a id='lightbox_button_close' href='' onclick='return false;'>Close</a>"; 
    s += " </div>"; 

    s += "</div>"; 

    return s; 

} 


/** 
* getPageSize() by quirksmode.com 
* 
* @return Array Return an array with page width, height and window width, height 
*/ 
function get_page_size() { 

    var xScroll, yScroll; 
    if (window.innerHeight && window.scrollMaxY) { 
     xScroll = window.innerWidth + window.scrollMaxX; 
     yScroll = window.innerHeight + window.scrollMaxY; 
    } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac 
     xScroll = document.body.scrollWidth; 
     yScroll = document.body.scrollHeight; 
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari 
     xScroll = document.body.offsetWidth; 
     yScroll = document.body.offsetHeight; 
    } 
    var windowWidth, windowHeight; 
    if (self.innerHeight) { // all except Explorer 
     if(document.documentElement.clientWidth){ 
      windowWidth = document.documentElement.clientWidth; 
     } else { 
      windowWidth = self.innerWidth; 
     } 
     windowHeight = self.innerHeight; 
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode 
     windowWidth = document.documentElement.clientWidth; 
     windowHeight = document.documentElement.clientHeight; 
    } else if (document.body) { // other Explorers 
     windowWidth = document.body.clientWidth; 
     windowHeight = document.body.clientHeight; 
    } 
    // for small pages with total height less then height of the viewport 
    if(yScroll < windowHeight){ 
     pageHeight = windowHeight; 
    } else { 
     pageHeight = yScroll; 
    } 
    // for small pages with total width less then width of the viewport 
    if(xScroll < windowWidth){ 
     pageWidth = xScroll;   
    } else { 
     pageWidth = windowWidth; 
    } 
    arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight, yScroll); 
    return arrayPageSize; 
}; 

/** 
* getPageScroll() by quirksmode.com 
* 
* @return Array Return an array with x,y page scroll values. 
*/ 
function get_page_scroll() { 
    var xScroll, yScroll; 
    if (self.pageYOffset) { 
     yScroll = self.pageYOffset; 
     xScroll = self.pageXOffset; 
    } else if (document.documentElement && document.documentElement.scrollTop) {  // Explorer 6 Strict 
     yScroll = document.documentElement.scrollTop; 
     xScroll = document.documentElement.scrollLeft; 
    } else if (document.body) {// all other Explorers 
     yScroll = document.body.scrollTop; 
     xScroll = document.body.scrollLeft; 
    } 
    arrayPageScroll = new Array(xScroll,yScroll); 
    return arrayPageScroll; 
}; 









// ======================================================================================================================== 
// swap images 
function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { 
    ImgRestore_buttons(); 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 

function MM_openBrWindow(theURL,winName,features) { //v2.0 
    window.open(theURL,winName,features); 
} 

function ImgRestore_buttons() { 
    var i,j,x,b,a=document.MM_sr; 
    for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc&&(a[i].id!="image_exterior")&&(a[i].id!="image_floor_plan");i++){x.src=x.oSrc;} 
} 

// ======================================================================================================================== 
//v1.0 
//Copyright 2006 Adobe Systems, Inc. All rights reserved. 
function AC_AddExtension(src, ext) 
{ 
    if (src.indexOf('?') != -1) 
    return src.replace(/\?/, ext+'?'); 
    else 
    return src + ext; 
} 

function AC_Generateobj(objAttrs, params, embedAttrs) 
{ 
    var str = '<object '; 
    for (var i in objAttrs) 
    str += i + '="' + objAttrs[i] + '" '; 
    str += '>'; 
    for (var i in params) 
    str += '<param name="' + i + '" value="' + params[i] + '" /> '; 
    str += '<embed '; 
    for (var i in embedAttrs) 
    str += i + '="' + embedAttrs[i] + '" '; 
    str += ' ></embed></object>'; 

    document.write(str); 
} 

function AC_FL_RunContent(){ 
    var ret = 
    AC_GetArgs 
    ( arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
    , "application/x-shockwave-flash" 
    ); 
    AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs); 
} 

function AC_SW_RunContent(){ 
    var ret = 
    AC_GetArgs 
    ( arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000" 
    , null 
    ); 
    AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs); 
} 

function AC_GetArgs(args, ext, srcParamName, classid, mimeType){ 
    var ret = new Object(); 
    ret.embedAttrs = new Object(); 
    ret.params = new Object(); 
    ret.objAttrs = new Object(); 
    for (var i=0; i < args.length; i=i+2){ 
    var currArg = args[i].toLowerCase();  

    switch (currArg){ 
     case "classid": 
     break; 
     case "pluginspage": 
     ret.embedAttrs[args[i]] = args[i+1]; 
     break; 
     case "src": 
     case "movie": 
     args[i+1] = AC_AddExtension(args[i+1], ext); 
     ret.embedAttrs["src"] = args[i+1]; 
     ret.params[srcParamName] = args[i+1]; 
     break; 
     case "onafterupdate": 
     case "onbeforeupdate": 
     case "onblur": 
     case "oncellchange": 
     case "onclick": 
     case "ondblClick": 
     case "ondrag": 
     case "ondragend": 
     case "ondragenter": 
     case "ondragleave": 
     case "ondragover": 
     case "ondrop": 
     case "onfinish": 
     case "onfocus": 
     case "onhelp": 
     case "onmousedown": 
     case "onmouseup": 
     case "onmouseover": 
     case "onmousemove": 
     case "onmouseout": 
     case "onkeypress": 
     case "onkeydown": 
     case "onkeyup": 
     case "onload": 
     case "onlosecapture": 
     case "onpropertychange": 
     case "onreadystatechange": 
     case "onrowsdelete": 
     case "onrowenter": 
     case "onrowexit": 
     case "onrowsinserted": 
     case "onstart": 
     case "onscroll": 
     case "onbeforeeditfocus": 
     case "onactivate": 
     case "onbeforedeactivate": 
     case "ondeactivate": 
     case "type": 
     case "codebase": 
     ret.objAttrs[args[i]] = args[i+1]; 
     break; 
     case "width": 
     case "height": 
     case "align": 
     case "vspace": 
     case "hspace": 
     case "class": 
     case "title": 
     case "accesskey": 
     case "name": 
     case "id": 
     case "tabindex": 
     ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1]; 
     break; 
     default: 
     ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1]; 
    } 
    } 
    ret.objAttrs["classid"] = classid; 
    if (mimeType) ret.embedAttrs["type"] = mimeType; 
    return ret; 
} 




function MM_CheckFlashVersion(reqVerStr,msg){ 
    with(navigator){ 
    var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1); 
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1); 
    if (!isIE || !isWin){ 
     var flashVer = -1; 
     if (plugins && plugins.length > 0){ 
     var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : ""; 
     desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc; 
     if (desc == "") flashVer = -1; 
     else{ 
      var descArr = desc.split(" "); 
      var tempArrMajor = descArr[2].split("."); 
      var verMajor = tempArrMajor[0]; 
      var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r"); 
      var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0; 
      flashVer = parseFloat(verMajor + "." + verMinor); 
     } 
     } 
     // WebTV has Flash Player 4 or lower -- too low for video 
     else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0; 

     var verArr = reqVerStr.split(","); 
     var reqVer = parseFloat(verArr[0] + "." + verArr[2]); 

     if (flashVer < reqVer){ 
     if (confirm(msg)) 
      window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"; 
     } 
    } 
    } 
} 

Answer 1

$(function(){ 
    $('#body_left a').click(function() { // observe the triangle <a> 
     var page = this.id.split('_')[1] + ".html"; // prepare page step2.html 
     $('#something').load(page,function() { //load the page into your place 
      get_html_lightbox(); //open the lightbox 
     }); 
     return false; //prevent <a> tag jumping around... 
    }); 
}); 

플러스 ... 불필요한 코드를 많이 사용하는; 예 : 라이트 박스, jQuery 용으로 lightbox plugins 빌드를 많이 찾을 수 있습니다. $(window).width()