PDA

View Full Version : Lightbox onload problem - conflict with js



robertoo
12-26-2007, 01:47 PM
hello.

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

with the
<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/portfolio_withoutonload.html

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

in library.js i have

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

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/06/StopTheWindow.OnloadMadness.aspx something to replace body onload but i didn't understand.

Can you help please? :confused:


======
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.

jscheuer1
12-26-2007, 05:24 PM
Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) 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:


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

and:


window.onload = loadPage;

then doing this in the body tag:


<body onload="initLightbox();loadPage();">

should work. As I say, I think there might be other issues though.

robertoo
12-26-2007, 07:27 PM
Ok, for the tabs from the left i'm using a CSS combined with a JS

tabs.css which looks like this:


#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
}

robertoo
12-26-2007, 07:28 PM
and library.js (i think this is problematic, because i've extracted from it to maintain my tabs functional)



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

jscheuer1
12-26-2007, 07:47 PM
I made an error in my previous post, which I will correct after posting this. I should have said only to remove:


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

and:


window.onload = loadPage;

then use the:


<body onload="initLightbox();loadPage();">

At least try that.

robertoo
12-26-2007, 07:57 PM
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/portfolio_withonload.html - the html with the change

the source of the portfolio_withonload.html:



<!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>

jscheuer1
12-26-2007, 08:02 PM
You are importing external content for use with lightbox, see:

http://www.dynamicdrive.com/forums/showthread.php?t=25671

robertoo
12-26-2007, 08:18 PM
i did as you said

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


<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? :confused:

jscheuer1
12-26-2007, 08:28 PM
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.

robertoo
12-26-2007, 08:59 PM
http://www.robertcazan.ro

at the portfolio section

jscheuer1
12-26-2007, 10:44 PM
OK, first of all you haven't removed either:


window.onload = loadPage;

from library.js or:


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

from lightbox.js - This part:


<BODY onload="initLightbox();loadPage();">

looks right.

Now, your multiple content from your tabs appears as though it is already on the page when it loads, so no other measures should need to be taken, and in fact all is well already on your demo page in Opera. In FF, the dual initialization of lightbox is making the lightbox display look screwy, but other than that, it's working fine. In IE, it is doing exactly what you describe, working only for the first set of images.

This is a complicated mixture of scripts. Do me a favor, and work with me on this. The first thing we should try is getting rid of the parts indicated at the beginning of this post. That may actually make things worse, but we have to try it to find out, and I would like to see it that way - to help me figure out the next step.

robertoo
12-26-2007, 10:48 PM
i have removed almost half of unnecesary code.

there is no

window.onload = loadPage;
in library.js

and the function loadPage() does not contain any good variables.

function loadPage() {
try{ { if(masterNavBody && masterNavBody.childNodes){ for(var i=0;i<masterNavBody.childNodes.length;i++){
} } } }
catch(e){;} collapseTabs();
}


although, if i don't put the

<BODY onload="initLightbox();loadPage();">


it does not show my tabs.

So the question is, how can i remove this function and still show my tabs?

You can see it yourself what i'm talking about at the end of the code
library.js


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 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 getObjectHeight(i)
{ return i.offsetHeight; }

function uLS() {
document.write("<!"+"--");
}

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","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 loadPage() {
try{ { if(masterNavBody && masterNavBody.childNodes){ for(var i=0;i<masterNavBody.childNodes.length;i++){
} } } }
catch(e){;} collapseTabs();
}
/*@end @*/

jscheuer1
12-26-2007, 10:53 PM
You still need to get rid of the code I flagged for removal in my previous post, at least for now, but:

Ah, the light goes on! This will help for sure. In library.js where it has:


clearTimeout(impT);

Change that to:


if(typeof impT!='undefined'){clearTimeout(impT)};

There could still be other problems.

robertoo
12-26-2007, 10:56 PM
done :)

jscheuer1
12-26-2007, 11:17 PM
OK, that got rid of one error and revealed another - progress. I've got to go on to other (non-forum related) things at the moment. So I will get back to you later on this.

jscheuer1
12-27-2007, 02:13 AM
There is another onload conflict, and another error.

The other onload conflict first - The fade.js file associated with this page has:


window.onload = photoShufflerLaunch;

This looks like something that isn't really needed. If so, just remove the script tag for it:


<SCRIPT src="js/fade.js" type="text/javascript"></script>

from the page. If it is required, then the line:


window.onload = photoShufflerLaunch;

should be removed from it and included in the body onload:


<body onload="initLightbox();loadPage();photoShufflerLaunch();">

Now, the other error - By fixing what we did before with impT it becomes apparent that there is no
swtI function as called later on that line. This should be able to be fixed by removing it. To remove it would be to get rid of all of this (from library.js):


if(typeof impT!='undefined'){clearTimeout(impT)}; impT = setTimeout("swtI("+currentTabIndex+")", 1000);

Since I can find no reference to a swtI function in any of the scripts associated with the page (including library.js) or anywhere on the page itself, let's try just getting rid of it. This might create problems on other pages (if any) that use library.js and other scripts not used on this page. There is also the possibility that swtI must be run under certain circumstances due to something I'm not seeing and/or that it is something previously removed before you asked me to look at this.

robertoo
12-27-2007, 10:59 AM
the fade.js was being used only for the home.html, which made a slideshow of the home pictures.

I have removed this

<SCRIPT src="js/fade.js" type="text/javascript"></script>
, since i'm not using that on portfolio page.

removed also :

if(typeof impT!='undefined'){clearTimeout(impT)}; impT = setTimeout("swtI("+currentTabIndex+")", 1000);


also, library.js is used only on this page(portfolio.html), since without it the tabs don't work.


i will post something new after 20 minutes. I'm trying to get things organised.

robertoo
12-27-2007, 11:32 AM
Ok, so these are the class elements that html code is using to show those tabs

They are from css/tabs.css

class=pg_content_top id=page
class=verticalTabs
class="tabs ulTabs"
class="tab tabActive"
class="tabContentPanel dl"
class=activetabdiv
class=tbc
class="tabPanel vrt_lay_60_40 dlTabP"
class=vrt_col_cntnr
class=vrt_lay60
class=tab



and these are the functions and variables that html is calling from js/library.js


id=tbc0_0, tbc0_1, etc
id=tbh0_0, tbh0_1, etc
tabIndex=0
onkeydown="return KP(event);"
onmouseover=activateTab(0,0)
onfocus="KPF='activateTab(0,0)';"
onmouseout=mouseOutTab(0,0)



I have putten the an archive with the site at this address:
http://www.robertcazan.ro/site.zip

i thought about what you said, maybe i cutted the wrong parts from the original library.js file. the original library.js is located here:
http://www.robertcazan.ro/js/library_orig.js (it's also in the site archive.

the library_orig.js it's a little bit longer, please don't hate me :)
i think you know better what to remove from there than me.
I gave you the archive with the site in case you edit the library_orig.js file so you can refresh "portfolio.html" and see if the changes affect the TABS.

ps: don't forget to change

<SCRIPT src="js/library.js" type=text/javascript></SCRIPT>

into


<SCRIPT src="js/library_orig.js" type=text/javascript></SCRIPT>
:D

only if you want to help me...:rolleyes:

let's forget about LIGHTBOX now and concentrate on this, i think this is a bigger problem than lightbox ..hihihi

jscheuer1
12-27-2007, 03:56 PM
I'm a little confused what the problem is you are focusing on. I will have to go back over your recent posts to see if I can figure that out.

Anyways, the good news is that the page now works in Opera and FF. If you change:


<BODY onload="initLightbox();loadPage();">

to:


<BODY onload="loadPage();initLightbox();">

And in library.js (the one currently being used) change:


function mouseOutTab(tabGroup,index)
{
clearTimeout(activeTabTimers[tabGroup]); }

to:


function mouseOutTab(tabGroup,index)
{ if(document.documentElement.filters)
initLightbox();
clearTimeout(activeTabTimers[tabGroup]); }

IE should be happy too.

robertoo
12-27-2007, 08:06 PM
wowwww....it's working.... :D:D

you are the man! thank you so much John. :cool: you're the best.
i can't believe it, it's workinggg...yupppyyy :D

In my previous post i was thinking that maybe i removed something from the original library.js that i shoud have not removed, and i was trying to get organised.

i got out the variables and the functions from the library.js and the classes from tabs.css that HTML was calling, maybe if you could look up to the library_orig.js and remove what was unnecesary from there, and then post the code so i can update the library.js file.

anyways, now it's working just fine, and i really appreciate all your help.
Thank you so much.

ps: if you don't want to remove from the library_orig.js it's ok, since it's working. But i was saying that to keep the code simplier and smaller, that's why i said only if you have a little time so you could remove the unnecesary code from the library_orig.js which is in the archive and at the address: http://www.robertcazan.ro/js/library_orig.js

jscheuer1
12-27-2007, 09:01 PM
You've just witnessed my best side - bringing Chaos to its knees. It's what I do well. I can also go over code with a fine toothed comb to see what can be removed, but that's not my forté. I pretty much assumed that you, being the ultimate user of library.js for your particular purposes, had already axed as much of it as you could possibly imagine could go. I just cleaned up after you a bit, and then once that was out of the way, got the scripts working together.

If I have more time later and am not hot on the trail of another issue for someone else, I will look into cutting down on library.js a bit more for you. But it may already be at bare bones, certainly it is close.

robertoo
12-27-2007, 10:38 PM
yes, i understand that you are very busy, and you need to answer to a lot of people.

that's why i said, when you have some free time, and if you want.
i realise that it's easier just to fix some little errors and not to go all the way in the code.

i thank you again for your all effort to help me, effort which made everything work ok :)

my website administrator said that my error log is the biggest from all his sites. he deleted the logs and we'll just have to wait a bit and see how it goes.

that's why i said that in library_orig.js are many variables and stuff i'm not using in my CSS or HTML, but if i try to remove them, the script doesn't work anymore. Because it's easier for a professional like you to know what function can be deleted and which variables you don't need anymore, that were in those functions.

thank you John for all your understanding, and hope you will help me (when you have some spare time) to destroy Chaos for good, with all his error logs :D

jscheuer1
12-28-2007, 06:34 AM
Turns out it was a slow night around here. Now, keep a backup copy of the working library.js - just in case.

Since it is also linked to this page, I used one of the functions from prototype.js to cut down on the code, and got rid of everything that looked unnecessary, including the loadPage() function. This means that the body tag:


<BODY onload="loadPage();initLightbox();">

should now be like so:


<BODY onload="collapseTabs();initLightbox();">

Here's what's left of library.js:


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 getObjectHeight(i)
{ return i.offsetHeight; }
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)
{ if(document.documentElement.filters)
initLightbox();
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 = $(h + activeTabIndex);
var activeTabPanel = $(c + activeTabIndex);
var newTab = $(h + currentTabIndex);
var newTabPanel = $(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; } }
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","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'; }
}

robertoo
12-28-2007, 10:53 AM
hello John.

thank you for all your help. you are such a kind man :rolleyes:

thank you, thank you, thank you almighty John :D


i'll tell you when the site is ready if you are curious to see the final result :)


Robert

jscheuer1
12-28-2007, 03:36 PM
A couple of enhancements. If at the beginning of library.js you put this (red):


document.write('<style type="text/css">.tbc {display:none;}<\/style>');
function getObjectsByTagAndClass(tag, cls)
{ var array = document.getElementsByTagName(tag);
var output = new A . . .

And add this (also red):


<DIV class=activetabdiv><script type="text/javascript">document.write('Loading . . .');</script></DIV>

The loading of the page will look much nicer.

Now this next bit I think you already know, but just in case - Where you have so many:


rel="lightbox[german]"

If you change the word german to a specific word for each group of images, like keep german for the movie images, use globus for the next group, adore for the next, and so on, the previous/next feature of lightbox will work more intuitively.

robertoo
12-28-2007, 06:19 PM
you saved me with the "Loading..." thing.
because it loaded the images first, keeeping the tabs invisible, and only after all images were loaded, the tabs became visible...

the thing with
rel="lightbox[german]" is changed.
i remember that in the archive i sent you it was like you said. but i changed those, and uploaded them to the site. thank you anyway.

ps: is i want to set the topmargin of lightbox, because i saw that on a smaller resolution(ex: 1024x768) the page makes a little scrool.

so is it ok if i do this in lightbox.js ?
from this:


setTop: function(element,t) {
element = $(element);
element.style.top = t +"px";
},


to this:

setTop: function(element,t) {
element = $(element);
element.style.top = 20 +"px";
},


Initially i wanted that lightbox load the image where portfolio.jpg is, that's why i made all the images width 350px. because also portfolio.jpg is 350px.

if i want that to happen, can i set for lightbox to load directly in this area:

<td width=350 valign="top" class="borderright">
<img src="portfolio.jpg" alt="Robert Cazan"></td>

or should i modify the margins, padding, positions?

ps: the final page is at: http://www.robertcazan.ro (http://www.robertcazan.ro)
the archive (for update) is at http://www.robertcazan.ro/backupsite28.12.2007.rar (http://www.robertcazan.ro/backupsite28.12.2007.rar)

jscheuer1
12-28-2007, 06:47 PM
You cannot put lightbox into a page element, it will either have no effect, or will mess something up. I like the first idea of modifying the script to raise the top of the lightbox image to a set position in this case.

That would leave just the left position to worry about. Since lightbox calculates the width based on the image, centers via set css, and your layout is also centered, to get it to fall over the portfolio area would require some kind of math within the script. Especially since (contrary to what you say), all of the images are not the same width, and the heights vary as well, some might look better centered (horizontally at least) over the entire page anyway. In this particular case, one might want to 'quit while one is ahead'. This would also allow you to add/remove images in the future without worrying about their dimensions too much.

jscheuer1
12-29-2007, 04:24 AM
I take part of that back, shifting things to the left looks easier than I thought. Add this at the bottom of lightbox.css:


#outerImageContainer, #imageDataContainer {
left:-250px;
position:relative;
overflow:hidden;
}

And add (red) to the end function in lightbox.js:


//
// end()
//
end: function() {
this.disableKeyboardNav();
Element.hide('lightbox');
new Effect.Fade('overlay', { duration: overlayDuration});
new Effect.Fade('imageDataContainer', { duration: overlayDuration});
showSelectBoxes();
showFlash();
}

Oh, and I thought of another refinement to the Loading . . . business. Where we have:


<DIV class=activetabdiv><script type="text/javascript">document.write('Loading . . .');</script></DIV>

Try this:


<DIV class=activetabdiv><script type="text/javascript">document.write('&nbsp;Loading . . .<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br><center style="width:145%;"><img src="images/loading.gif"><\/center>');</script></DIV>


And, where we did this:


function mouseOutTab(tabGroup,index)
{ if(document.documentElement.filters)
initLightbox();
clearTimeout(activeTabTimers[tabGroup]); }

It would be better to use:


function mouseOutTab(tabGroup,index)
{ if(document.documentElement.filters)
myLightbox.updateImageList();
clearTimeout(activeTabTimers[tabGroup]); }

because that performs only what needs to be done, while what we had was adding extra markup to the page each time a tab was changed. Probably harmless, but unnecessary and potentially harmful in heavy use.

robertoo
12-29-2007, 02:14 PM
that's great, thank you.

If i do this:

setTop: function(element,t) {
element = $(element);
element.style.top = 10 +"px";
},


i have putten 10 instead of t.
Is that ok? But since that works, i mean, is it correct? because the variables are element and t.

so when the full height photos load (525 px) they won't come out of the page.

jscheuer1
12-29-2007, 05:11 PM
That's OK, as I mentioned before when you wanted to use 20. However, this step 'customizes' lightbox even more to your particular layout, and for the first time in a hard coded scripting sort of way. When we made the changes to shift lightbox to the left, that was primarily style - the script change only enabled this effect to look graceful, it didn't change the actual way lightbox would work in a different setting with different layout and styles.

I mention this only to make you aware of the qualitative shift in the code that is happening. What it means is that once you make that change, all pages that use that copy of lightbox will set the top position at 10px, regardless of other styles or scrolling. These factors don't matter on your current page - are in fact beneficial, but could be a problem if this same lightbox.js or a copy of it is used elsewhere.

I was playing around with this idea a bit more and came up with an even greater customization. This would have the same sort of benefit to the current page/possible problems if used elsewhere sort of trade off as your idea, it just seems better to me. If you want to try it out, change setTop: back to the way it was, using t. Then, around line 412, where you will see:


// calculate top and left offset for the lightbox
var arrayPageScroll = getPageScroll();
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
var lightboxLeft = arrayPageScroll[0];
Element.setTop('lightbox', lightboxTop);
Element.setLeft('lightbox', lightboxLeft);

Element.show('lightbox');

this.changeImage(imageNum);
},

Make that like so:


// calculate top and left offset for the lightbox
var arrayPageScroll = getPageScroll();
var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
var lightboxLeft = arrayPageScroll[0];

Element.setTop('lightbox', 108);
Element.setHeight('outerImageContainer', 230);
Element.setWidth('outerImageContainer', 150);
Element.setLeft('lightbox', lightboxLeft);

Element.show('lightbox');

this.changeImage(imageNum);
},

And, around line 467 where you will see this:


// calculate size difference between new and old image, and resize if necessary
wDiff = this.widthCurrent - widthNew;
hDiff = this.heightCurrent - heightNew;

if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }


Make it like so:


// calculate size difference between new and old image, and resize if necessary
wDiff = this.widthCurrent - widthNew;
hDiff = this.heightCurrent - heightNew;
var eMove = (Math.max((528-50-imgHeight)/2, 10))-$('lightbox').offsetTop;
var eMoveQ = eMove < 0 ? 'front' : '';
new Effect.Move('lightbox', {x:0, y:eMove, duration: resizeDuration, queue: eMoveQ});
if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, delay: resizeDuration, duration: resizeDuration, queue: eMoveQ? '' : 'front'}); }
if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration*2, duration: resizeDuration}); }


This will do what you want, setting the top to 10, but only for the larger images, smaller images will be centered vertically within the 'Portfolio' area, and the transitions (when needed) will be smooth.

robertoo
12-29-2007, 09:54 PM
thank you so much John.

I will do these changes after the New Year, because i have to go now.

I wish you and your family a Happy New Year, and may all your wishes come true in 2008! be healthy and have a lot of accomplishments!

jscheuer1
12-30-2007, 08:23 AM
I was playing around with the portfolio page and idly decided to try tabbing around it instead of using the mouse. I discovered an omission from our version of library.js - the functions that allow tabbed navigation of the tabs.

Here is an updated version for library.js that includes these functions and code to activate the lightbox links when navigation is accomplished via tabbing:


document.write('<style type="text/css">.tbc {display:none;}<\/style>');
var KPF=null;
function KP(o){
var k = GKBH(o);
if(k==13||k==32) { eval(KPF);
return false;}
return k;}
function GKBH(o) {
var k;
try{k=(window.event != null && window.event.keyCode != null) ? window.event.keyCode : e.which;}
catch(e){k=null;};
return (k==null && o !=null && o.keyCode !=null)? o.keyCode : k; }
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 getObjectHeight(i)
{ return i.offsetHeight; }
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(function(){activateTabTimer();myLightbox.updateImageList();},250); }
}
function mouseOutTab(tabGroup,index)
{ myLightbox.updateImageList();
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 = $(h + activeTabIndex);
var activeTabPanel = $(c + activeTabIndex);
var newTab = $(h + currentTabIndex);
var newTabPanel = $(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; } }
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","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'; }
}

This updated version of library.js will also finally allow for removing:


onclick="myLightbox.start(this); return false;"

from the lightbox links, but keeping it shouldn't hurt anything either.

robertoo
01-03-2008, 07:44 PM
hello john.

Happy New Year!

what did you mean by: "I was playing around with the portfolio page and idly decided to try tabbing around it instead of using the mouse. I discovered an omission from our version of library.js - the functions that allow tabbed navigation of the tabs" ?

i made those changes, it's a nice effect when lightbox is centered in that space, thanks

robertoo
01-03-2008, 07:46 PM
please check http://www.robertcazan.ro, to see if it's ok, because i don't understand what do you mean by "tabbed navigation - tabbing around instead of using the mouse" :(

jscheuer1
01-03-2008, 10:32 PM
I will be looking over things more closely later, but it looks like you got it. And, by way of explanation, some people have no mouse or other pointing device, or they don't want to use them if they do. For either category of user, a page should be accessible using simple keyboard shortcuts. Although not universal, the most common is using the tab key to move from one important area to the next on a page and then either the spacebar or the enter key to activate it. Library.js was written with this functionality in mind, and we had removed it. It now appears to be in good working order. You can see for yourself in IE or FF. Try hitting the tab key until one of your tabs is outlined, then hit enter, it will activate it. If you tab to a thumbnail and hit enter, the lightbox will appear, X will close it and the left/right arrow keys will select previous/next if available. Pretty neat.

jscheuer1
01-04-2008, 03:19 AM
OK, I've had a more thorough look, and as far as I can tell, you nailed it. What do you think? How do you like it?

robertoo
01-07-2008, 05:08 PM
sorry for the late reply.
I didn't received any email noticing me that you have replied. i will look in the User CP, maybe i have to change this, since we're in 2008 :D

Yes, it looks greeatttt :D
thank you.

thanks for the explication of "tabbing". i didn't thought that tabbing comes from TAB , hihihi.

One more question, if i'm not too insistent :o
for example in http://www.robertcazan.ro/resume2.html, when i click on:
"- entered top 5 finalists
> see more in gallery", can it load gallery.html, and activate for example "Photo shoot 6". is that do-able?

i'm sceptic about that, since we're using JS functions, and we can't do something like it's in php gallery.php?activatetabnr=3.

but i said, what the heck, let's ask the Pro (YOU) :cool:

jscheuer1
01-07-2008, 07:39 PM
It's actually pretty simple to pass the information, for example:


<a href="gallery.html?tab=6">More in the gallery</a>

would essentially tell gallery.html that we want the 6th tab.

The problem, of course is in grabbing that information at the right moment and making graceful use of it. I think I have done that, with a few additions to library.js:


document.write('<style type="text/css">.tbc {display:none;}<\/style>');
var KPF=null;
function KP(o){
var k = GKBH(o);
if(k==13||k==32) { eval(KPF);
return false;}
return k;}
function GKBH(o) {
var k;
try{k=(window.event != null && window.event.keyCode != null) ? window.event.keyCode : e.which;}
catch(e){k=null;};
return (k==null && o !=null && o.keyCode !=null)? o.keyCode : k; }
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 getObjectHeight(i)
{ return i.offsetHeight; }
var currentTabGroup = 0;
var currentTabIndex = 0;
var activeTabIndeces = new Array();
var activeTabTimers = new Array();
function activateTab(tabGroup,index,nt)
{
clearTimeout(activeTabTimers[tabGroup]);
currentTabGroup = tabGroup; currentTabIndex = index;
if(activeTabIndeces.length <= tabGroup){ activeTabIndeces[tabGroup] = 0;
}
var activeTabIndex = activeTabIndeces[tabGroup];
if(index != activeTabIndex) { activeTabTimers[tabGroup] = setTimeout(function(){activateTabTimer();myLightbox.updateImageList();},nt?0:250); }
}
function mouseOutTab(tabGroup,index)
{ myLightbox.updateImageList();
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 = $(h + activeTabIndex);
var activeTabPanel = $(c + activeTabIndex);
var newTab = $(h + currentTabIndex);
var newTabPanel = $(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; } }
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 getQval = function (n) {
var r=new RegExp('[?&;]'+n+'=([^&;#]*)'), m=location.search;
return (m=r.exec(m))? unescape(m[1]) : null;
}
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","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[getQval('tab')?getQval('tab')-1:i].innerHTML; } } } objects[i].className = 'tabPanel '+(objects[i].getAttribute('layout')!="null"?objects[i].getAttribute('layout'):"")+' tabHiddenPanel cf'; }
if(getQval('tab')&&!getQval.loaded)
activateTab(0,getQval('tab')-1,'nt'),getQval.loaded=true;
}

Notes: I may be able to refine this, but its looking very good in testing here, as is. Also, be aware, although I've red highlighted all of the changes, two are small (hard to notice), and two are in areas of the script that you would need to scroll to in order to see them in the above script block. So it would be best to just copy the entire new code ad paste it as your library.js (keep a copy of the the current working version, just in case). One more thing, if more than one tab group is used, modifications would be needed to select both the group and the tab. But, so far, you are using only one tab group per page.

robertoo
01-08-2008, 02:29 PM
hello John.

It's great. I've made some adjustments because when i clicked the "see more in gallery", when the gallery.html loaded, the position of the mouse that remained in the same position as when i clicked the link, activated tab no. 8. So I've changed the position of the link therefore when i click on see more, it's out of the tabs range, so it will not activate tab on mouseover. :)

the solution is ideal. thank you.
You can see it working in here: http://www.robertcazan.ro/resume2.html.

One more thing, if you can help me.
I want to get the following effect: when the pictures are loaded with lightbox, from portfolio.html, the NEXT and/or PREVIOUS buttons to be visible not only when i put my mouse over the picture, because some people didn't know about the NEXT and PREV buttons and they always pushed Close, and then click another picture, and so on.

I've seen if i put the mouse over the image, over the left white margin, over the right white margin, and over the top white margin, it shows the buttons. I only want when i put my mouse over the BOTTOM white border, where is for example the close button, or Image 1 of 9, to show the NEXT and PREV buttons.

what changes do i have to make to the lightbox.css or lightbox.js script?
i've tried something but i've managed only to move the position of the buttons, from top to center...

jscheuer1
01-09-2008, 05:02 AM
I'm not sure that I like that effect because once I achieved it, it looked odd that the next/previous links only became visible when I went to close, and stayed visible until the image was changed. I don't think you would like that either, but we can do it that way if you want. I do appreciate the issue you have with folks not being able to tell that next/previous is an option though.

As I worked with this concept, my idea evolved anyway, as yours might have too, once you saw how it looked and functioned. I'm still not 100% happy with what I've come up with though it's close, and perhaps about the best it can be without reverting to the subtlety of the original design -which does have its merits if you think about it, because folks who are browsing the images extensively would probably soon catch on, and because lightbox and other functionally identical scripts are widely used on the web, so folks may already be familiar with the idea. Make sure to back up (keep a copy of) your existing lightbox files which we have already modified.

At the moment, I'm going with having the next/previous links show up whenever the lightbox is hovered, this includes everything inside and including all white areas. The next/previous links will disappear whenever the mouse leaves this area. That way the navigation is at least as obvious as what you asked for, but disappears if the user mouses away, allowing them to see the image unobstructed again without having to relaunch it.

Here's how to do this. First edit lightbox.css, removing the red parts from the styles here:


#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

Next find the updateNav function and gut most of it, removing the red parts:


//
// updateNav()
// Display appropriate previous and next hover navigation.
//
updateNav: function() {

Element.show('hoverNav');

// if not first image in set, display prev image button
if(activeImage != 0){
Element.show('prevLink');
document.getElementById('prevLink').onclick = function() {
myLightbox.changeImage(activeImage - 1); return false;
}
}

// if not last image in set, display next image button
if(activeImage != (imageArray.length - 1)){
Element.show('nextLink');
document.getElementById('nextLink').onclick = function() {
myLightbox.changeImage(activeImage + 1); return false;
}
}

this.enableKeyboardNav();
},

Then above that find where the imageDataContainer is created, this time adding the red and green parts:


var objImageDataContainer = document.createElement("div");
objImageDataContainer.setAttribute('id','imageDataContainer');
objImageDataContainer.onmouseover=function(){
if(activeImage != 0){
Element.show('prevLink');
$('prevLink').onclick = function() {
myLightbox.changeImage(activeImage - 1); return false;
}
}

// if not last image in set, display next image button
if(activeImage != (imageArray.length - 1)){
Element.show('nextLink');
$('nextLink').onclick = function() {
myLightbox.changeImage(activeImage + 1); return false;
}
}};objImageDataContainer.onmouseout=function(){Element.hide('prevLink');Element.hide('nextLink');};
objLightbox.appendChild(objImageDataContainer);

Note: If you skip the green part and stop here, you will have what I believe you asked for.

I recommend including the green part and continuing on to where the imageContainer is created above that, and adding the red parts:


var objImageContainer = document.createElement("div");
objImageContainer.setAttribute('id','imageContainer');
objImageContainer.onmouseover=function(){
if(activeImage != 0){
Element.show('prevLink');
$('prevLink').onclick = function() {
myLightbox.changeImage(activeImage - 1); return false;
}
}

// if not last image in set, display next image button
if(activeImage != (imageArray.length - 1)){
Element.show('nextLink');
$('nextLink').onclick = function() {
myLightbox.changeImage(activeImage + 1); return false;
}
}};objImageContainer.onmouseout=function(){Element.hide('prevLink');Element.hide('nextLink');};
objOuterImageContainer.appendChild(objImageContainer);

This will complete the adaptation as I currently envision it.

robertoo
01-09-2008, 11:05 PM
hello john.

I have made those changes.
I've refined my initially proposal, the one to show those next and prev buttons on mouseover.

I've thought well, and i've came up with this look:
http://www.robertcazan.ro/site.jpg

So that the next and prev buttons won't go over the image (sometimes my head) :D
in order to keep those centered, i'll make all my photos width 350, and for those that i can't do that, i'll add some white space to the left and to the right.

what do you think?

jscheuer1
01-11-2008, 06:16 AM
That looks nice there, but look at All Saints. The images are the same width, but the captions are longer, where would the buttons go?

robertoo
01-11-2008, 01:02 PM
i've come up with this solution:

minimizing the space occupied by the next and prev buttons, by reducing their size, and put a padding-right from the close button like 60px, as follows:
http://www.robertcazan.ro/site2.jpg

i know that i was meticulous and you've helped me so much...

the prev and next buttons, as well as close, you can find them in images/close.jpg , prev.jpg, and next.jpg
i've reduced the size of close.gif, from 66 to 50px, and made it jpg.

I sent you a private message with the address from the archive with the updated site

robertoo
01-12-2008, 10:17 PM
john, forget my last proposal.

it's too much work, and i thought really way and it's good the way it is now. I'll make some adjustments and let you know when the site is ready.

thank you for all your help master.:D

jscheuer1
01-13-2008, 10:53 PM
I was just busy, but it always seems to get slow around here on the weekends. Anyways the changes from our current lightbox style and script are too complicated to get into piecemeal, so here are the updated files. Make sure to keep backups of your current working lightbox.css and lightbox.js:

1524

Now, I'm still using the original prev/next images. I liked the ones used in your latest posted mockup better though. If you change them, some minor tweaking of the style may be needed. The two most important spots would be (red):


#hoverNav{
position: absolute;
top: -7px;
right: 60px;
height: 35px;
width: 130px;
z-index: 110;
}

The top, oddly enough is negative. This makes the images appear higher than they otherwise would, If the new images are shorter, they won't need as much, possibly not any negative top, sort of opposite of what might be expected. The width governs how far apart the two images are from each other. One other thing you might want to adjust is the right. The larger that is, the further to the left the images will be, again, opposite of the intuitive.

robertoo
01-14-2008, 06:09 PM
great! thanks a lot.


you can see it working here: http://www.robertcazan.ro/portfolio.html.

as you can see, i made all the picture's width and height 350x478 so the bottom of the pic won't never go over the bottom of my site.

I also used at gallery.html our 3rd 4th lightbox formula with some improvements(next and prev buttons).
check it out: http://www.robertcazan.ro/gallery.html

robertoo
01-18-2008, 10:08 PM
i have launched my site!

thank you again for all your help John!!!!!
You are the best!

robertoo
01-24-2008, 11:31 PM
well? do you like it?

jscheuer1
01-25-2008, 04:33 AM
Well, I liked it before we even started working on it, although it obviously needed work or you wouldn't have come here. However, I'm more of a can't see the forest for the trees sort of guy, but I do get overall impressions. I feel that there could be more unity between the two styles of galleries as far as where the images get displayed, but that would require reformatting the images again for the general gallery to match those of the portfolio or visa versa. I also feel that the portfolio could be a little looser, allowing shorter images to be shorter and centered vertically in the left viewing area as we had them at one point. This would make it more dramatic I think.

But, it was a well designed and conceived site to begin with and still is, and these matters I mention are only personal inclinations on my part. It certainly is performing well and as you have decided that you want it to.

As a technical adviser here donating my time, I very gratified at the result.