Page 1 of 5 123 ... LastLast
Results 1 to 10 of 49

Thread: Lightbox onload problem - conflict with js

  1. #1
    Join Date
    Dec 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Lightbox onload problem - conflict with js

    hello.

    I have a problem, when i put the
    Code:
     <BODY onload="initLightbox()">
    on http://www.robertcazan.ro/test/portf...ithonload.html, the tabs from the left are being messed up.

    with the
    Code:
     <BODY>
    , without the onload="initlightbox()" everything works fine, but only for the first image set (all saints video).
    you can see it here:
    http://www.robertcazan.ro/test/portf...outonload.html

    I think the conflict in between library.js, from the js folder with lightbox.js.

    in library.js i have
    Code:
    function gWPFEV() 
    { return 0; }
    
    var isLibraryLoaded = true; var isDebug = false; 
    window.onload = loadPage;
    var useCdn = false; 
    var cdnServer = ''; 
    var KPF=null; function KP(o){ var k = GKBH(o); if(k==13||k==32) { eval(KPF); return false; } return k; }
    and in lightbox.js
    Code:
    function initLightbox() { myLightbox = new Lightbox(); }
    Event.observe(window, 'load', initLightbox, false);
    i've searched and i think this is the conflict. I found out on http://haacked.com/archive/2006/04/0...adMadness.aspx something to replace body onload but i didn't understand.

    Can you help please?


    ======
    the main thing, maybe it's easier...i just want when i click on those little images, to be loaded in the same section as the image "PORTFOLIO".
    So when i click a small image, it loads in the same page, instead of portfolio.jpg(the image from the left column) the big photo.
    Last edited by robertoo; 12-26-2007 at 05:04 PM. Reason: better understanding

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.


    Please post a link to the page on your site that contains the problematic code so we can check it out.


    There shouldn't be any problem to begin with, so I suspect that there is another type of problem going on. In any case, even if your assessment is right, this doesn't look like a simple case of combining onload events. It might be though. If so, removing both:

    Code:
    Event.observe(window, 'load', initLightbox, false);
    and:

    Code:
    window.onload = loadPage;
    then doing this in the body tag:

    Code:
     <body onload="initLightbox();loadPage();">
    should work. As I say, I think there might be other issues though.
    Last edited by jscheuer1; 12-26-2007 at 07:49 PM. Reason: correct the instructions as to what to remove
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post thanks for answering

    Ok, for the tabs from the left i'm using a CSS combined with a JS

    tabs.css which looks like this:
    Code:
    #page {
    	MARGIN-LEFT: auto; WIDTH: 500px; MARGIN-RIGHT: auto; POSITION: relative; TOP: 0px; height:360px
    }
    .pg_content_top {
    	BACKGROUND-COLOR: #0C0C0C; TEXT-ALIGN: left; COLOR:#ffffff
    }
    #main {
    	MARGIN-LEFT: 2px; WIDTH: 500px; POSITION: relative; MIN-HEIGHT: 300px
    }
    .tabPanel {
    	WIDTH: 335px; POSITION: relative
    }
    .tabHiddenPanel {
    	DISPLAY: none
    }
    .tbc {
    	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; TOP: 0px
    }
    .tabContentPanel {
    	DISPLAY: inline; HEIGHT: 305px; FLOAT: left; WIDTH: 335px; LINE-HEIGHT: 1.4em; color: #C0C0C0; background-color: #0c0c0c; padding-left:10px
    }
    .dl {
    	HEIGHT: auto
    }
    .tabContentPanel DIV {
    	FONT-FAMILY: Verdana
    }
    .dlTabSpacer {
    	CLEAR: both; MARGIN-BOTTOM: 5px; BORDER-BOTTOM: #c6d7ef 1px solid
    }
    .tabContentPanel .d1 {
    	LEFT: 0px; WIDTH: 335px; POSITION: absolute; TOP: 0px
    }
    .tabContentPanel LI.desc {
    	MARGIN-BOTTOM: 5px
    }
    .tabContentPanel LI.desc A {
    	FONT-WEIGHT: bold
    }
    .tabContentPanel .headline .imgBorder {
    	DISPLAY: inline; FLOAT: left; MARGIN-RIGHT: 8px
    }
    .linklist LI {
    	MARGIN-BOTTOM: 7px; LINE-HEIGHT: 127%
    }
    .tabContentPanel .image A {
    	FONT-WEIGHT: bold
    }
    .tabContentPanel .headline .imgBorder {
    	DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 0px
    }
    .tabContentPanel .heading {
    	FONT-SIZE: 145%; MARGIN-BOTTOM: 8px; COLOR: #a7abad; FONT-FAMILY: Arial
    }
    .tabContentPanel .vrt_layfull .headline {
    	MARGIN-BOTTOM: 5px
    }
    .tabs {
    	DISPLAY: inline; FLOAT: left; POSITION: relative; TEXT-ALIGN: right
    }
    .bulletedlist {
    	CLEAR: both
    }
    .ulTabs {
    	DISPLAY: none; WIDTH: 155px; text-align: left; font-family: tahoma
    }
    .dlTabs {
    	MARGIN-LEFT: 0px; WIDTH: 155px; TEXT-ALIGN: left
    }
    .dlTabs P {
    	MARGIN: 0px 0px 0px 0px
    }
    .dlTabs H5 {
    	MARGIN: 0px 0px 0px 0px
    }
    .dlTabP {
    	POSITION: relative
    }
    .tabs UL {
    	PADDING-LEFT: 0px; WIDTH: 100%; background-color: #212020
    }
    .tabs LI {
    	PADDING-RIGHT: 0px; PADDING-LEFT: 10px; FONT-SIZE: 1em; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 5px; CURSOR: default; COLOR: #96b521; PADDING-TOP: 5px; LIST-STYLE-TYPE: none; font-size: 11px; text-align: left
    }
    .tabs LI.tabActive {
    	BACKGROUND-POSITION: right top; FONT-WEIGHT: bold; COLOR: #BBE51F; BACKGROUND-REPEAT: no-repeat; ZOOM: 1; background-color: #0c0c0c
    }
    .tabs LI.tabHover {
    	BACKGROUND-POSITION: right top; FONT-WEIGHT: bold; COLOR: #BBE51F; BACKGROUND-REPEAT: no-repeat; ZOOM: 1; background-color: #212020
    }
    .verticalAlignBottom {
    	VERTICAL-ALIGN: bottom
    }
    .verticalTabs {
    	WIDTH: 500px; PADDING-TOP: 20px; PADDING-BOTTOM: 0px
    }
    .verticalTabs A {
    	POSITION: relative
    }
    .vrt_layfull {
    	CLEAR: both; FLOAT: none
    }
    .vrt_col_cntnr {
    	CLEAR: both; HEIGHT: 1%
    }
    .vrt_lay60 {
    	CLEAR: left; DISPLAY: inline; FLOAT: left; MARGIN-LEFT: 0px; WIDTH: 335px
    }

  4. #4
    Join Date
    Dec 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default me again

    and library.js (i think this is problematic, because i've extracted from it to maintain my tabs functional)

    Code:
     function getObject(elementId) 
     { if (document.getElementById) { return document.getElementById(elementId); } 
     else if (document.all) { return document.all[elementId]; } 
     else if (document.layers) { return document.layers[elementId]; } 
     }
     function getObjectsByTagAndClass(tag, cls) 
     { var array = document.getElementsByTagName(tag); 
     var output = new Array(); 
     var matches = 0; 
     for(var i=0;i<array.length;i++) { var parts = array[i].className.split(' '); 
     for(var j=0;j<parts.length;j++) { if(parts[j]==cls) { output[matches++]=array[i]; } } } return output; 
      } 
      
     function getObjectsOfElementByTagAndClass(object, tag, cls, id) 
     { var output = new Array(); 
     if(object) { var array = object.getElementsByTagName(tag); var matches = 0; 
     if (array != undefined && array != null) { for(var i=0;i<array.length;i++) { var parts = array[i].className.split(' '); 
     for(var j=0;j<parts.length;j++) { if(parts[j]==cls) { if(id) { if (array[i].id.indexOf(id) == 0) { output[matches++]=array[i]; } } 
     else { output[matches++]=array[i]; } } } } } } return output; }
     
     
     function getBrowserWidth() 
     { if(window.innerWidth) return window.innerWidth; 
     else if(document.body.clientWidth) return document.body.clientWidth; 
     else return -1; } 
    
     function getBrowserHeight() 
     { return (window.innerHeight?window.innerHeight:document.documentElement.clientHeight); } 
    
     function getBodyHeight() 
     { if(document.body.clientHeight) return document.body.clientHeight; else return -1; } 
     
     function getObjectHeight(i) 
     { return i.offsetHeight; } function uLS() { document.write("<!"+"--"); } 
     
     
    
    function gWPFEV() 
    { return 0; }
    
    var isLibraryLoaded = true; var isDebug = false; 
    window.onload = loadPage;
    var useCdn = false; 
    var cdnServer = ''; 
    var KPF=null; function KP(o){ var k = GKBH(o); if(k==13||k==32) { eval(KPF); return false; } return k; } 
    
    
    
    function MNFocus(which) { 
    	if(null==which)which='q'; var o=getObject(which); if(null!=o)o.focus(); } var currentTabGroup = 0; var currentTabIndex = 0; var activeTabIndeces = new Array(); var activeTabTimers = new Array(); 
    
    function activateTab(tabGroup,index){ clearTimeout(activeTabTimers[tabGroup]); currentTabGroup = tabGroup; currentTabIndex = index; if(activeTabIndeces.length <= tabGroup){ activeTabIndeces[tabGroup] = 0; 
    } 
    
    var activeTabIndex = activeTabIndeces[tabGroup]; if(index != activeTabIndex) { activeTabTimers[tabGroup] = setTimeout("activateTabTimer()",250); } 
    
    } 
    
    function mouseOutTab(tabGroup,index){ 
    	clearTimeout(activeTabTimers[tabGroup]); } var isMouseOver = false; function activateTabTimer() { var activeTabIndex = activeTabIndeces[currentTabGroup]; if(currentTabIndex != activeTabIndex) { var h = 'tbh' + currentTabGroup + '_'; var c = 'tbc' + currentTabGroup + '_'; 
    	var activeTab = getObject(h + activeTabIndex); 
    	var activeTabPanel = getObject(c + activeTabIndex); 
    	var newTab = getObject(h + currentTabIndex); 
    	var newTabPanel = getObject(c + currentTabIndex); 
    	var activeTabDiv = getObjectsByTagAndClass('div','activetabdiv'); 
    	if(activeTabDiv.length >0){ activeTabDiv[0].className = 'activetabdiv '+(newTabPanel.getAttribute('layout')!='null'?newTabPanel.getAttribute('layout'):"")+' cf'; activeTabDiv[0].innerHTML = newTabPanel.innerHTML; isMouseOver = true; } 
    	activeTab.className = 'tab'; newTab.className = 'tab tabActive'; activeTabIndeces[currentTabGroup] = currentTabIndex; clearTimeout(impT); impT = setTimeout("swtI("+currentTabIndex+")", 1000); } } 
    	var TVIEWHEIGHT = 0; 
    	
    function collapseTabs() { var ih=0; var i=0; var objects = getObjectsByTagAndClass("h3","dlh"); for(i=0;i<objects.length;i++) { objects[i].style.display = 'none'; } objects = getObjectsByTagAndClass("div","tbc"); 
    for(i=0;i<objects.length;i++) { ih= getObjectHeight(objects[i]); 
    if(ih>TVIEWHEIGHT)TVIEWHEIGHT=ih; } 
    var objects = getObjectsByTagAndClass("div","dlTabs"); 
    for(i=0;i<objects.length;i++) { objects[i].style.display = 'none'; } objects = getObjectsByTagAndClass("div","ulTabs"); 
    for(i=0;i<objects.length;i++) { objects[i].style.display = 'block'; } objects = getObjectsByTagAndClass("h3","dlh"); 
    for(i=0;i<objects.length;i++) { objects[i].style.display = 'none'; } objects = getObjectsByTagAndClass("div","dlTabSpacer"); 
    for(i=0;i<objects.length;i++) { objects[i].style.display = 'none'; } objects = getObjectsByTagAndClass("div","tabContentPanel"); 
    for(i=0;i<objects.length;i++) { objects[i].className = 'tabContentPanel'; } objects = getObjectsByTagAndClass("div","tabPanel"); 
    for(i=0;i<objects.length;i++) { if(i==0) { if(!isMouseOver){ var activeTabDiv = getObjectsByTagAndClass("div","activetabdiv"); 
    if(activeTabDiv.length > 0) { activeTabDiv[0].className = 'activetabdiv ' + (objects[i].getAttribute('layout')!='null'?objects[i].getAttribute('layout'):"")+' cf'; activeTabDiv[0].innerHTML = objects[i].innerHTML; } } } objects[i].className = 'tabPanel '+(objects[i].getAttribute('layout')!="null"?objects[i].getAttribute('layout'):"")+' tabHiddenPanel cf'; } }
    var mnl; 
    var mnl_h; 
    var mnl_oh; 
    var isE=true; 
    var timer; 
    var closeWhileCollapse=false; 
    function navH1Click(e){
    	if(timer){ clearInterval(timer); timer = null; } var target=getTargetFromEvent(e); mnl = getObject('masterNavLinks'); 
    	if(target && mnl){ if(target.nodeName != 'H1') { target = target.parentNode; } mnl_h = mnl.offsetHeight; 
    	if(!mnl_oh){ mnl_oh = mnl_h; } isE = !isE; 
    	if(isE) { target.className = 'active'; } else { target.className = 'inactive'; } navH1Interval(); timer = setInterval(navH1Interval, 1); } 
    	} 
    	
    function navH1Interval(){ 
    	var isFinishedExpanding=false; 
    	if(mnl_h <= 0 && isE) { var o =getObject('masterNavLinks'); 
    	if(null!=o){o.style.display='block';} } 
    	if(!isE){ mnl_h -= 20; } else{ mnl_h += 20; } 
    	if(mnl_h < 0){ mnl_h = 0; } else if(mnl_h > mnl_oh){ mnl_h = mnl_oh; mnl.style.height="auto"; isFinishedExpanding=true; } 
    	if(!isFinishedExpanding) mnl.style.height = mnl_h+'px'; 
    	if(mnl_h <= 0 || mnl_h >= mnl_oh) 
    	{ if(mnl_h <= 0 && !isE) { var o =getObject('masterNavLinks'); o.style.display='none'; } clearInterval(timer); timer = null; var masterNavLinks = getObject('masterNavLinks'); 
    	if(closeWhileCollapse && isE && masterNavLinks && masterNavLinks.childNodes){ closeWhileCollapse = false; resetNavToFirst(masterNavLinks); } } } 
    	
    function resetNavToFirst(masterNavLinks) 
    { for(var i=0;i<masterNavLinks.childNodes.length;i++){ var node = masterNavLinks.childNodes[i]; 
    if(node && node.className == 'container' && node.childNodes) { var firstIndex = 0; for(var j=0;j<node.childNodes.length;j++){ var link = node.childNodes[j]; 
    if(link && link.nodeName == 'A'){ if(j==firstIndex) { link.className='activeNav'; } else { link.className=''; } } else if(j == 0) { firstIndex = 1; } } } } } 
    
    
    
    function loadPage() { 
    	resizePage(); 
    	try{ if(eval('nP')) { var masterNavLinks = getObject('masterNavLinks'); 
    	if(masterNavLinks && masterNavLinks.childNodes){ for(var i=0;i<masterNavLinks.childNodes.length;i++){ var node = masterNavLinks.childNodes[i]; 
    	if(node && node.className == 'container' && node.childNodes) { for(var j=0;j<node.childNodes.length;j++){ var link = node.childNodes[j]; 
    	if(link && link.nodeName == 'A' && link.className.indexOf('link') == -1){ link.onclick=navClick; } } } } } 
    	var masterNavBody = getObject('masterNavBody'); if(masterNavBody && masterNavBody.childNodes){ for(var i=0;i<masterNavBody.childNodes.length;i++){ 
    		var node = masterNavBody.childNodes[i]; if(node && node.nodeName == 'H1'){ node.onclick=navH1Click; } } } } }
    		catch(e){;} loadImages(); collapseTabs(); } var checkHeight; function setNavScreenHeight() { var navScreen = getObject('masterNavScreen'); 
    		var page = getObject('pageC'); var ag=navigator.userAgent.toLowerCase(); checkHeight = setInterval(
    		function () { if(navScreen.clientHeight != page.clientHeight ) { if(ag.indexOf("msie") !=-1) { navScreen.style.height = document.body.clientHeight - 70 +'px'; } 
    		else { navScreen.style.height= page.clientHeight + 'px'; } } },1); } 
    		
    function resizePage(){ var width = getBrowserWidth(); 
     } 
    
    function loadImages() { if(document.images) { 
    	var a = new Array(); 
    	
    	var image; var prefix = ''; if(useCdn) { prefix = "http:/" + "/" + cdnServer; } prefix = prefix + "/shared/core/1/images/"; 
    	for(var i=0;i<a.length;i++){ image=new Image(); image.src=prefix+a[i]; } } } function enc(s){ return encodeURI(s).replace("&","%26"); }
    	
    	
    
    /*@end @*/

    there are many things that i want to remove from this JS script, but if i do, the tabs don't work anymore.

    An archive with the files necessary for this page to run "correctly" is at this address: http://www.robertcazan.ro/test/problem.zip

    I want to achieve something like this: http://www.robertcazan.ro/test/example/portfolio.html, so when i click on the small image the LIGHTBOX loads the picture in that part.

    I used SPRY from Adobe(at the example), but i don't want to use this in the future because it's pretty big as filesize, and it's not so customizable.

    Hope you can help,
    thank you,
    Robert

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I made an error in my previous post, which I will correct after posting this. I should have said only to remove:

    Code:
    Event.observe(window, 'load', initLightbox, false);
    and:

    Code:
    window.onload = loadPage;
    then use the:

    Code:
    <body onload="initLightbox();loadPage();">
    At least try that.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok, thank you, i made that change.

    now it shows the tabs, and works the LIGHTBOX v.2 too...but unfortunately only for the first set (all saints).



    http://www.robertcazan.ro/test/portf...ithonload.html - the html with the change

    the source of the portfolio_withonload.html:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head>
    <LINK href="css/tabs.css" type=text/css rel=stylesheet>
    <LINK href="css/core.css" type=text/css rel=stylesheet>
    <SCRIPT src="js/library.js" type=text/javascript></SCRIPT>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    
    </HEAD>
    <BODY onload="initLightbox();loadPage();">
    <center>
    <table align="center" width=850 class="tabel" cellspacing=0 cellpadding=0>
    	<tr>
    		<td width=350 valign="top" class="borderright">
    		<img src="portfolio.jpg" alt="Robert Cazan"></td>
    		<td width=500 valign="top">
    				<table width=500 cellspacing=0 cellpadding=0 class="noborder">
    					<tr>
    						<td align="right" bgcolor="#0C0C0C">
    							<img src="robertcazan_header.jpg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    					<tr>
    						<td width=500>
    							<!-- MENU ------------------------------------------------------------------------------------------------------------------------------->
    
    							<table width=500 cellspacing=0 cellpadding=0 align="center" bgcolor="#4a4a4a">
    								<tr>
    									<td width=99 height=40 align="center"><a href="home.html"><img src="buttons/homeoff.jpg" height="40" border="0"></a></td>
    									<td width=99 height=40 align="center"><a href="biography.html"><img src="buttons/biographyoff.jpg" height="40" border=0></a></td>
    									<td width=99 height=40 align="center"><a href="resume.html"><img src="buttons/resumeoff.jpg" height="40" border="0"></a></td>
    									<td width=99 height=40 align="center"><a href="portfolio.html"><img src="buttons/portfolioon.jpg" height="40" border="0"></a></td>
    									<td width=99 height=40 align="center"><a href="contact.html"><img src="buttons/contactoff.jpg" height="40" border="0"></a></td>
    									</tr>
    							</table>
    							<!-- END MENU ------------------------------------------------------------------------------------------------------------------------------->
    
    						</td>
    					</tr>
    					<tr>
    						<td valign="top" bgcolor="#0C0C0C" width=500>
    
    
    						<!-- TABS --------------------------------------------------------------------------------------------------------------------------------->
    						<DIV class=pg_content_top id=page>
    
    
    							<DIV class=verticalTabs>
    							<DIV class="tabs ulTabs">
    								<UL>
    								  <LI class="tab tabActive" id=tbh0_0 onkeydown="return KP(event);" 
    								  onmouseover=activateTab(0,0) onfocus="KPF='activateTab(0,0)';" tabIndex=0 
    								  onmouseout=mouseOutTab(0,0)>All Saints
    								  <LI class=tab id=tbh0_1 onkeydown="return KP(event);" 
    								  onmouseover=activateTab(0,1) onfocus="KPF='activateTab(0,1)';" tabIndex=0 
    								  onmouseout=mouseOutTab(0,1)>Globus Image
    							    </UL>
    					    </DIV>
    
    						<DIV class="tabContentPanel dl">
    						<DIV class=activetabdiv></DIV>
    
    
    							<DIV class=tbc>
    								<DIV class="tabPanel vrt_lay_60_40 dlTabP" id=tbc0_0>
    									<DIV class=vrt_col_cntnr>
    										<DIV class=vrt_lay60>
    										<H3><A name="All saints rock steady movie clip"></a>All Saints - Rock Steady, Music Video</H3>
    											<DIV class=mic>September 2006<br><br>
    												<table width="100%" align="center">
    													<tr>
    														<td align="center"><a href="images/allsaints1_2.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints1_2_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/allsaints3_2.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints3_2_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/allsaints4_2.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints4_2_mic.jpg" border=0></a></td>
    													</tr>
    													<tr>
    														<td colspan=3>&nbsp;</td>
    													</tr>
    													<tr>
    														<td align="center"><a href="images/allsaints5_2.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints5_2_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/allsaints1.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints1_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/allsaints3.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints3_mic.jpg" border=0></a></td>
    													</tr>
    													<tr>
    														<td colspan=3>&nbsp;</td>
    													</tr>
    													<tr>
    														<td align="center"><a href="images/allsaints4.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints4_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/allsaints5.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints5_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/allsaints6.jpg" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints6_mic.jpg" border=0></a></td>
    													</tr>
    
    												</table>
    											</DIV>
    										</DIV>
    									</DIV>
    								</DIV>
    							</DIV>
    		
    
    
    							<DIV class=tbc>
    								<DIV class="tabPanel vrt_lay_60_40 dlTabP" id=tbc0_1>
    									<DIV class=vrt_col_cntnr>
    										<DIV class=vrt_lay60>
    										<H3><A name="Globus Image, Stock Photography"></a>Globus Image, Stock Photography</H3>
    											<DIV class=mic>July 2007<br><br>
    												<table width="100%" align="center">
    													<tr>
    														<td align="center"><a href="images/globusimage1.jpg" rel="lightbox[globus]" title="image1"><img src="images/globusimage1_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/globusimage2.jpg" rel="lightbox[globus]" title="image1"><img src="images/globusimage2_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/globusimage3.jpg" rel="lightbox[globus]" title="image1"><img src="images/globusimage3_mic.jpg" border=0></a></td>
    														<td align="center"><a href="images/globusimage4.jpg" rel="lightbox[globus]" title="image1"><img src="images/globusimage4_mic.jpg" border=0></a></td>
    													</tr>
    												</table>
    											</DIV>
    										</DIV>
    									</DIV>
    								</DIV>
    							</DIV>
    
    
    
    
    						</DIV>
    						<!-- END TABS --------------------------------------------------------------------------------------------------------------------------------->
    						</td>
    					</tr>
    					<tr>
    					<td align="center" height=35 valign="middle"><a href="home.html">Home</a> | <a href="biography.html">Biography</a> | <a href="resume.html">Resume</a> | <a href="portfolio.html">Portfolio</a> | <a href="contact.html">Contact</a></td>
    					</tr>
    				</table>
    
    		</td>
    
    </tr>
    </table>
    </center>
    </BODY></HTML>

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You are importing external content for use with lightbox, see:

    http://www.dynamicdrive.com/forums/s...ad.php?t=25671
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default thanks

    i did as you said

    but it's the same problem, only the first set works

    Code:
    <td align="center"><a href="images/allsaints4.jpg" onclick="myLightbox.start(this); return false;" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints4_mic.jpg" border=0></a></td>
    <td align="center"><a href="images/allsaints5.jpg" onclick="myLightbox.start(this); return false;" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints5_mic.jpg" border=0></a></td>
    <td align="center"><a href="images/allsaints6.jpg" onclick="myLightbox.start(this); return false;" rel="lightbox[allsaints]" title="All saints - rock steady"><img src="images/allsaints6_mic.jpg" border=0></a></td>
    i did the same with "myLightbox.start(this); return false;" rel" for the globus image tab.

    But on the seccond set, not even a chance
    i have putten the script outside the many DIV parts that delimitates my TABS CONTENT and it works. any ideea why it works only for the first tab?

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This has always worked in the past. How are you importing the new lightbox content? If it is to an iframe, lightbox will never work. If it is via Ajax, this method is tried and true.

    I downloaded your demo archive, but nothing happens when I click the tabs in either version. A live demo of the problem would be much easier to trouble shoot.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Dec 2007
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    http://www.robertcazan.ro

    at the portfolio section

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •