Question

I want to modify my current script so that when you click on the an image a new (lightbox) pop-up appears and within it a specific animation plays. Currently I have this feature working, however the animation needs to be seperated into different parts and and have it’s own link to the animation.

Once you click on the triangle on the left hand side, I want to load a different page with a different animation but no sure how.

See Code blow (Sorry for the large chunk of code)

// ------------------------------------------------------------------------------------------------------------------------------
// 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...
    });
});

plus… you are using a lot of unnecessary code; example: the lightbox, you can find a lots of lightbox plugins build for jQuery, then you are using get_page_size() that you can just avoid by using $(window).width()