Lightbox opens in regular window

**BettyBoop** · 12-29-2006, 04:42 AM

1) Script Title: Lightbox 2.02

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tbox/index.htm

3) Describe problem:

I am new to javascript and building websites. I am using a template from Allwebco, and trying to modify it to open images using Lightbox. It uses several pieces of javascript, but I don't know how to determine what is conflicting, if anything.

The images open in a new window, but not using lightbox.

I am building my website in Frontpage, and have not uploaded it yet so I have pasted the code from my test lightbox page.

I would appreciate any suggestions.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head>



<title>Forget-Me-Not Business Greetings</title>
<meta name="Description" content="Forget-Me-Not Business Greetings - Building Your Repeat and Referral Business">
<meta name="KeyWords" content="greeting cards, service, client loyalty, marketing, referrals">



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="Copyright" content="Copyright 2003 AllWebCo Design http://allwebcodesign.com/">
<META name="Publisher" content="AllWebCo Webpage Design http://allwebcodesign.com/">
<META name="Author" content="AllWebCo Design http://allwebcodesign.com/">
<META http-equiv="Content-Language" content="en">
<META name="revisit-after" content="15 days">
<META name="robots" content="index, follow">
<META name="Rating" content="General">
<META name="Robots" content="All">

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

<script language="JavaScript" src="Javascript/javascripts.js"></script>
<script language="JavaScript" src="Javascript/pop-closeup.js"></script>
<script language="JavaScript" src="Javascript/mouseover.js"></script>

<style>

</style>
<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>

</head>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#339966" VLINK="#663399" ALINK="#666666" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">


<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" HEIGHT="100%"><tr><td ALIGN="LEFT" VALIGN="TOP">

<script language="JavaScript" src="Javascript/header.js"></script>

<img src="picts/stretchbar.jpg" width="100%" height="28"><br>

<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td width="720">
<IMG SRC="picts/gallery2.jpg" border="0" width="720" height="80"><BR>
</td><td bgcolor="#000000" width="1">
<IMG SRC="picts/spacer.gif" HEIGHT="10" WIDTH="1" border="0" alt="image"><BR>
</td><td background="picts/top-picture-end.gif">
 <br>
</td></tr><tr><td background="picts/bluebar.gif" colspan="3">
<IMG SRC="picts/spacer.gif" HEIGHT="26" WIDTH="15" border="0" alt="image"><BR>
</td></tr></table>

<script language="JavaScript" src="Javascript/menu.js"></script>

<img src="picts/fadein.jpg" width="225" height="30"><br>


<TABLE cellpadding="0" cellspacing="0" border="0" width="730"><tr><td ALIGN="CENTER" VALIGN="TOP">


<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/background-main.jpg"><tr><td ALIGN=LEFT VALIGN=TOP WIDTH="30">
<IMG SRC="picts/spacer.gif" HEIGHT=10 WIDTH=30 border="0" alt="image"><BR>
</td><td ALIGN=LEFT VALIGN=TOP WIDTH="180">

<IMG SRC="picts/spacer.gif" HEIGHT="275" WIDTH="180" border="0"><BR>

</td><td ALIGN="CENTER" VALIGN="TOP">


<TABLE cellpadding="0" cellspacing="0" border="0"><tr><td ALIGN=LEFT VALIGN=TOP>

<p class="just">



<span class="title"><font size="6">4<span style="font-weight: 400">th of July</span></font><BR>
</span>



</p>
<TABLE cellpadding="0" cellspacing="0" border="0"><tr><td>

<IMG SRC="picts/small-windows.gif" width="25" height="25">
</td><td>
<span class="smalltitle">Click picture for close up view</span><br>
<span class="smalltitle">and standard verbiage.</span></td></tr></table>
<p> </p>



<TABLE cellpadding="0" cellspacing=5 width="100%"><tr><td width="180" valign="top" align="center">

<a href="picts/American%20Flyer.jpg" rel="lightbox">
<img border="2" src="picts/American%20Flyer_small.jpg" xthumbnail-orig-image="American Flyer.jpg" width="138" height="100"></a></td><td>
 </td><td width="180" valign="top" align="center" bordercolorlight="#008080" bordercolordark="#008080">

<a href="picts/Glory%20and%20Liberty.jpg" rel="lightbox">
<img border="2" src="picts/Glory%20and%20Liberty_small.jpg" xthumbnail-orig-image="Glory and Liberty.jpg"></a></td><td>
 </td><td width="180" valign="top" align="center">

<a href="picts/Celebrate%20America.jpg" rel="lightbox">
<img border="2" src="picts/Celebrate%20America_small.jpg" xthumbnail-orig-image="Celebrate America.jpg" width="140" height="100"></a></td></tr><tr><td width="180" valign="top" align="center">

<a href="picts/It's%20A%20Beautiful%20Thing.jpg" rel="lightbox">
<img border="2" src="picts/It's%20A%20Beautiful%20Thing_small.jpg" xthumbnail-orig-image="It's A Beautiful Thing.jpg" width="100" height="133"></a></td><td>
 </td><td width="180" align="center">

<a href="picts/Celebrate%20Freedom.jpg" rel="lightbox">
<img border="2" src="picts/Celebrate%20Freedom_small.jpg" xthumbnail-orig-image="Celebrate Freedom.jpg" width="140" height="100"></a></td><td>
 </td><td width="180" valign="top" align="center">

<a href="picts/Yankee%20Doodle%20Dandy.jpg"rel="lightbox">
<img border="2" src="picts/Yankee%20Doodle%20Dandy_small.jpg" xthumbnail-orig-image="Yankee Doodle Dandy.jpg" width="100" height="143"></a></td></tr><tr><td width="180" valign="top" align="center">

<a href="picts/Home%20of%20the%20Brave.jpg" rel="lightbox">
<img border="2" src="picts/Home%20of%20the%20Brave_small.jpg" xthumbnail-orig-image="Home of the Brave.jpg" width="100" height="140"></a></td><td>
 </td><td width="180" align="center">

<a href="picts/Home%20Sweet%20Home.jpg" rel="lightbox">
<img border="2" src="picts/Home%20Sweet%20Home_small.jpg" xthumbnail-orig-image="Home Sweet Home.jpg"></a></td><td>
 </td><td width="180" valign="top" align="center">

<a href="picts/Lady%20Liberty.jpg" rel+"lightbox">
<img border="2" src="picts/Lady%20Liberty_small.jpg" xthumbnail-orig-image="Lady Liberty.jpg" width="100" height="140"></a></td></tr></table>


<BR><BR>


<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>

<a href="Holidays.htm">
<IMG NAME="back" BORDER="0" ALT="back" SRC="picts/backoff.gif" width="120" height="55"></a><br>

</td><td align="right">

<a href="New%20cards.html">
<IMG NAME="next" BORDER="0" ALT="next" SRC="picts/nextoff.gif" width="120" height="55"></a><br>

</td></tr></table>


<BR>

<script language="JavaScript" src="Javascript/ticker.js"></script>

<BR>

</td></tr></table>


</td></tr></table>


</td></tr></table>


<img src="picts/fadeout.jpg" alt="image" width="225" height="30"><br>


</TD></TR><TR><TD VALIGN="BOTTOM">

<img src="picts/stretchbar.jpg" width="100%" height="28" alt="image"><br>


<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/bottom-shade.gif"><tr><td WIDTH="10">
<IMG SRC="picts/spacer.gif" HEIGHT="30" WIDTH="10" border="0" alt="image"><BR>

</td><td ALIGN="left" valign="middle">

<script language="JavaScript" src="Javascript/copyright.js"></script>

</td><td ALIGN="right" valign="middle">

<script language="JavaScript" src="Javascript/copyright-allwebco.js"></script>

</TD><td WIDTH="10">

<IMG SRC="picts/spacer.gif" HEIGHT="10" WIDTH="10" border="0" alt="image"><BR>

</td></tr></table>


</td></tr></table>


</BODY>
</HTML>

**jscheuer1** · 01-04-2007, 07:43 AM

Most likely there is an onload conflict of some sort, try placing this after the links to the lightbox external files:

Code:

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

<script type="text/javascript">
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", initLightbox, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", initLightbox );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            initLightbox();
        };
    }
    else
        window.onload = initLightbox;
}
</script>

</head>

**casco** · 02-11-2010, 01:12 PM

Hi there, first post.
I thought it better to add to this thread as this is the same problem I'm having. I've uploaded the scripts to a folder on my file manager. I'm using yahoo pagebuilder/site builder. I've added the code to the 'head' and when I set a thumbnail to open up in lightbox it just opens in a window.

Where am I going wrong? I'm not that well up on html but feel I've followed it up until a certain point and then it loses me. I know it's something minor I'm doing wrong but can't pinpoint it. I've been trying this on and off for a month or so and it's doing my nut. Any help will be severely appreciated!!!

I've added some screencaptures to show where I've added the codes etc to see if anyone can help. I feel it's beaten me, but don't want it to. i've tried the support forum on the Lightbox 2 official site and no help was forthcoming.

This is the page I'm testing it on. Ignore the first two thumbs, it's the 3rd I've added with the code as you can see it just opens in the same window.

http://www.casualco.com/SP_againstacid.html

The first image - I've put the script in the head, is this right?

2nd I've added the image code to a html code add on...

thirdly I've uploaded all the relevent codes, scripts to a folder on my file manager is this the correct way?

Any help please....

**bluewalrus** · 02-11-2010, 01:37 PM

Your missing
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
and the css and lightbox.js arent where specified.

**casco** · 02-11-2010, 10:40 PM

Okay I've added those bits to the head, re: the 2nd part forgive me for being thick but what does that mean and where? This is where I become frustrated for feeling rather thick? I just want it to work!!

Thanks

**Schmoopy** · 02-11-2010, 10:49 PM

I can now see you have included lightbox.css and lightbox.js in your source code, but you're not pointing to the right directory.
If you follow the files you have linked to, they come up with 404 errors, so you need to alter that, to the following:

Code:

<head>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/lightbox.js"></script>
</head>

So put that code in between the <head></head> tags and see what happens, if you're still having problems then say what comes up when you click on a link.

Also make sure your links have rel="lightbox" as an attribute.

Here's what's your links should look like:

Code:

<a rel="lightbox" href="http://www.casualco.com/hools2.gif"><img height=113 width=150 src="http://www.casualco.com/hools2th.gif" border=0 ></a>

See how you get on.

**casco** · 02-11-2010, 10:59 PM

Thanks for the reply, tried that. No joy again. Do I need to take out some of the original bit from the head?

**casco** · 02-11-2010, 11:07 PM

My head code now looks like this:

Code:

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></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">
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", initLightbox, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", initLightbox );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            initLightbox();
        };
    }
    else
        window.onload = initLightbox;
}
</script>

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

and this bit in the body script :

Code:

<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

Still not working, so where the flip am I going wrong???

**casco** · 02-12-2010, 01:00 PM

Any more help please, it's driving me mad!!

**jscheuer1** · 02-12-2010, 05:08 PM

None of the lightbox scripts or the styles are available to the page (from your source code) in the locations as indicateded:

Code:

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

Also, using that version of the script (which I assume is version 2.03 or 2.03a from the scripts it says you want included:

http://www.dynamicdrive.com/dynamici...box2/index.htm

), this shouldn't be required:

Code:

<script type="text/javascript">
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", initLightbox, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", initLightbox );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            initLightbox();
        };
    }
    else
        window.onload = initLightbox;
}
</script>

That was for an earlier version of this script:

http://www.dynamicdrive.com/dynamici...tbox/index.htm

as discussed in the original question in this thread. In the future it would be a good idea to start a new thread for a new question, and to follow the posting guidelines:

Please post new questions in a new thread:

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

Thread: Lightbox opens in regular window

Thread Tools

Search Thread

Lightbox opens in regular window

Lightbox problems opens in a new window...

Bookmarks

Bookmarks

Posting Permissions