Page 1 of 2 12 LastLast
Results 1 to 10 of 11

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

  1. #1
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    edit.edit
    Last edited by soak; 10-17-2012 at 03:31 PM.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

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

  5. #5
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  6. #6
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

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

  8. #8
    Join Date
    Oct 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

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

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

  10. #10
    Join Date
    Apr 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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..
    Last edited by jscheuer1; 04-18-2013 at 05:01 AM. Reason: illegal sig

Similar Threads

  1. [DHTML] Lightbox 2.04a - First Light Link Edition for Dynamic Drive
    By jscheuer1 in forum Submit a DHTML or CSS code
    Replies: 5
    Last Post: 11-16-2013, 05:31 AM
  2. How do I insert Images in the code below
    By dogstail in forum JavaScript
    Replies: 1
    Last Post: 10-31-2010, 11:46 AM
  3. Insert some code in php form
    By Hermes in forum PHP
    Replies: 4
    Last Post: 02-04-2010, 04:33 PM
  4. Replies: 15
    Last Post: 06-11-2009, 01:27 PM
  5. Where to insert Drop Down Menu code
    By doubleducks in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-15-2008, 10:50 AM

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
  •