Lightbox JS v2.04a - First Light. Where to insert code?

**soak** · 10-16-2012, 10:25 PM

1) Script Title: Lightbox JS v.2.04 - First Light Link Edition for Dynamic Drive

2) Script URL (on DD): http://home.comcast.net/~jscheuer1/side/lightbox2.04a/

3) Describe problem: I was able to successfully use First Light on a test webpage I created, which can be found here:
http://cc22.mayfirst.org/nep

Here is the code I used for that page:

Code:

<html>


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">

HELLO THIS IS THE HOME PAGE

<a id="first" href="nepcomingsoon-small.jpg" rel="lightbox[roadtrip]"> </a>



</html>

The goal is to get the same image to load in Lightbox when visitors visit the homepage of my organization. I've created a test page on that server, which can be found at http://nedap.org/indextest.html . As you can see it's not working out well - the image appears way down on the page and there is no lightbox function.

The code for the page is extremely long and I don't know where to insert the various elements from the test page. You can view the page source at http://www.nedap.org . I've also uploaded the entire source below. Rather than troubleshoot my shots in the dark (I put the javascript in the header as instructed - I also put the stylesheet line there as well and put the lightbox line in the middle of the body....) perhaps someone could have a look at the source and suggest where to put in the First Light code.

Code:

<html>
<head>
<title>NEDAP - New York's Community Economic Justice Resource Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="style.css" type="text/css">
<link rel="shortcut icon" href="/favicon.ico" />






<!--GOOGLE ANALYTICS-->
<! mystery verion commented out>
<!script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
<!/script>
<!script type="text/javascript">
<!_uacct = "UA-1531271-1";>
<!urchinTracker();>
<!/script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1531271-1");
pageTracker._trackPageview();
} catch(err) {}</script>


<script type='text/javascript'>cdd__codebase=""</script>



<style type="text/css">
<!--
.style56 {color: #FF0000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bolder; font-size: 13px; }
.style94 {
	font-size: 16px;
	font-weight: bold;
}
.style111 {color: #CC0000; font-size: 15px; font-weight: bold; }
.style115 {color: #000000; font-size: 12px; font-weight: bold; }
.style118 {color: #000000}
.style119 {font-size: 15px}
.style120 {font-size: 12px}
.style121 {font-size: 15px; color: #CC3366; }
.style124 {
	color: #000000;
	font-size: 12px;
	font-style: italic;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="vqp_about" style="position:absolute;visibility:hidden;"></div>

<script language="JavaScript" vqptag="datafile" src="nedap.js"></script>
<script language="JavaScript" vqptag="doc_level_settings" is_vqp_html=1 vqp_datafile0="nedap.js" vqp_uid0=80947>

	//Document Level Menu Settings

	cdd__codebase = ""
	cdd__codebase80947 = ""
	cdd__activate_onclick = false
	cdd__showhide_delay = 50
	cdd__url_target = "_self"
	cdd__url_features = "resizable=1, scrollbars=1, titlebar=1, menubar=1, toolbar=1, location=1, status=1, directories=1, channelmode=0, fullscreen=0"
	cdd__display_urls_in_status_bar = true
	cdd__default_cursor = "hand" 

</script><script language="JavaScript"  vqptag="loader">

	//NavStudio Code (Warning: Do Not Alter!)

	if (window.showHelp){b_type = "ie"; if (!window.attachEvent) b_type += "mac";}if (document.createElementNS) b_type = "dom";if (navigator.userAgent.indexOf("afari")>-1) b_type = "safari";if (window.opera) b_type = "opera"; qmap1 = "\<\script language=\"JavaScript\" vqptag='loader_sub' src=\""; qmap2 = ".js\">\<\/script\>";;function iesf(){};;function vqp_error(val){alert(val)}
	if (b_type){document.write(qmap1+cdd__codebase+"pbrowser_"+b_type+qmap2);document.close();}

</script>

<CENTER>

<TABLE BORDER="0" WIDTH="709" BORDER="0" cellpadding="0" cellspacing="0">
<TR><TD COLSPAN="2" WIDTH="709" HEIGHT="242" ALIGN="CENTER" VALIGN="CENTER">

<table id="Table_01" width="709" height="230" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="images/colorindex_03_000.gif" width="288" height="231"></td>
		<td>
			<img src="images/colorindex_04_000.gif" width="94" height="231"></td>
		<td>
			<img src="images/colorindex_05_000.gif" width="327" height="231"></td>
	</tr>
</table>

</TD></TR>
<TR><TD COLSPAN="2" WIDTH="710" HEIGHT="35" ALIGN="LEFT" VALIGN="CENTER">
<script language='JavaScript' vqptag='placement' vqp_menuid=80947>create_menu(80947)</script>
</TD></TR>

<TR>
<TD WIDTH="355" VALIGN="TOP" ALIGN="CENTER">
<p style="margin-top: 0;"><BR>
<FORM method=GET action=http://www.google.com/u/nedap>
  <INPUT CLASS="miniform" TYPE=text name=q size=31 maxlength=255 value=""> 
  <INPUT type=submit name=sa VALUE="Search NEDAP">
  </p>
<TABLE width="333" height="111" BORDER="2" cellpadding="4" BORDERCOLOR="#000000">
<TR align="center" bgcolor="#6633CC">
  <td WIDTH="315" HEIGHT="103" align="left" bgcolor="#FFCC99"><div align="center">
    <p class="style111" style="margin-top: 0; margin-bottom: 0"><span class="style118">Join the <a href="programs/campaigns/EndUnfairEmploymentCreditChecks.html" target="_blank">Campaign to End Employment Credit Checks</a> in NY! </span></p>
    </div></td>
</TR>
</TABLE>

<TABLE width="333" height="121" BORDER="2" cellpadding="4" BORDERCOLOR="#000000">
  <TR align="center" bgcolor="#6633CC">
    <td WIDTH="321" HEIGHT="113" align="center" bgcolor="#FFFFCC"><div align="center" class="style94">
      <p class="style121" style="margin-top: 0; margin-bottom: 0">Judge Grants Class Action Status in Lawsuit against Debt Collection Ring</p>
      <p class="style119" style="margin-top: 0; margin-bottom: 0;"><span class="style120">Click <a href="http://app.e2ma.net/app2/campaigns/archived/1407988/84745d8cb16b737afd5e45538d912ca2/" target="_blank">here</a> for press release</span>. </p>
    </div>    
    </td>
  </TR>
</TABLE>
<TABLE width="333" height="100" BORDER="2" BORDERCOLOR="#000000">
<TR>
  <td WIDTH="321" HEIGHT="86" ALIGN="center" bgcolor="#CCFFFF" class="style56"><p align="center" class="style111" style="margin-top:0;margin-bottom:0;">Hot Off the Presses:</p>
    <p style="margin-top: 0; margin-bottom: 0;"><a href="resources/studentloanguide.php" class="style124" style="margin-top:0;" align="center">Resolving Defaulted Federal Student Loans: </a></p>
    <p style="margin-top: 0; margin-bottom: 0;"><a href="resources/studentloanguide.php" class="style124" style="margin-top:0; margin-bottom: 0;" align="center">A Step-by-Step Guide for Advocates</a> </p></td>
</TR>
</TABLE>



</TD>
<TD WIDTH="355" HEIGHT="355" VALIGN="CENTER" ALIGN="CENTER" BGCOLOR="#000000">

<IFRAME NAME="news" id="news" SRC="news_feature.html" WIDTH="340" HEIGHT="340" FRAMEBORDER="0" SCROLLING="yes"></iframe>


</TD>
</TR>


<TR><TD HEIGHT="5">&nbsp;

</TD></TR>
<TR>
  <TD HEIGHT="20" BGCOLOR="#000000" ALIGN="CENTER" COLSPAN="2" VALIGN="CENTER"><FONT COLOR="#FFFFFF" SIZE="1">176 Grand</FONT>
  <FONT COLOR="#FFFFFF" SIZE="1"> Street, Suite 300 | New York, NY 10013 |</FONT><FONT COLOR="#FFFFFF" SIZE="1"> (212) 680-5100 | Fax: (212) 680-5104 </FONT> </TD>
</TR>

</TABLE>
<div align="center"><BR>
    <A HREF="http://www.guidestar.org/partners/networkforgood/donate.jsp?ein=13-3842270"><IMG BORDER="0" SRC="images/donate.gif" WIDTH="208" HEIGHT="22"></A>
  

  </CENTER>
  
</div>
</body>
</html>

Thanks!

**jscheuer1** · 10-17-2012, 04:53 AM

There could also be other problems but the lightbox styles:

Code:

<link rel="stylesheet" href="popup/css/lightbox.css" type="popup/text/css" media="screen">

Are not loading because popup/text/css is not a valid type attribute for style. Make that:

Code:

<link rel="stylesheet" href="popup/css/lightbox.css" type="text/css" media="screen">

That should fix it though because the script appears to otherwise be working.

**soak** · 10-17-2012, 03:24 PM

edit.edit

**jscheuer1** · 10-17-2012, 03:36 PM

It's looking for it here:

nedap.org/images/closelabel.gif

Put it there, clear the cache and refresh the page.

BTW, the page is in quirks mode. Perhaps because of that, and/or because of other things, it doesn't look very good in most browsers. Looks fine in IE 9 though. It's relying upon IE quirks, which aren't the same as other browser's quirks. As a result, if you put it in standards mode by supplying a standards invoking DOCTYPE, it would look bad in IE as well. But that's probably the way to go. Once you fix it in standards mode, it should be fine or easy enough to tweak to be fine in other browsers.

**soak** · 10-17-2012, 03:47 PM

Thanks - you caught my second post in the time it took me to realize it was just a directory issue. (Wanted to save you the trouble.) I ended up changing the directories in lightbox.js . Thanks for all the help and the website critique. I'll look into what you suggested. We're doing a complete overhaul of the site and the light-box is meant to warn for that.

Great debate last night!

**soak** · 10-17-2012, 07:08 PM

So this looks great in everything except Safari - We tested it on Iphones/Ipads and Safari on an Imac - it looks insane on all of them - the code is splayed all over the page and the pop up doesn't function. Any idea what could be done to fix this?

Thanks

**jscheuer1** · 10-17-2012, 08:24 PM

What looks great? Did you check in Chrome or Opera? They're messed up too It's the menu. I'd suggest getting a different menu.

And you're likely to still have problems unless you use a standards invoking DOCTYPE and get that working cross browser.

That lightbox is old as well. Perhaps switch to something jQuery based. Then you could have a jQuery based menu to go with it.

**soak** · 10-17-2012, 10:50 PM

I hadn't checked Opera, though it did work for me in Chrome. I am unable to change anything about the site. In fact, the whole point of the splash page is to advertise our new website. So I have to work with the menus and everything else that already exist. I need a splash page that loads automatically. The one that you put together was perfect and worked perfectly on Firefox. These questions are elementary but - would stipulating a DOCTYPE solve this issue? Or as long as we have these menus I have to go with a different Javascript code? Could you or someone else suggest one that might not have these issues? We only need one image to show once per browser session. Nothing else.

I came across this:

http://www.dynamicdrive.com/dynamici...amicsplash.htm

I would prefer not to use it since it's frankly much uglier and feels like an advertisement.

Here's an example of a website that is using what we want, though we don't need the form. Just an Image.

http://retailactionproject.org/

Thanks for the help.

**jscheuer1** · 10-18-2012, 12:24 AM

If you cannot change anything about the site, there's no point in us continuing.

**thypota** · 04-18-2013, 03:48 AM

Greetings I found this post through google and against better judgement decided to try to set up this lightbox, and it worked great.
I had no issues with it, I just followed the instructions..
Though I discovered it uses Div Layers and it messed up some other div layers I have ( you might be able to modify the id and z-index in the css) .. my quick solution was to relocate the other div layers in question into a iframe. The script works great on all browser except opera which moves the box down. i mostly disregard IE but it seemed to work though it loads slow as expected.. you might be able to see it in action onsite..