PDA

View Full Version : 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/dynamicindex4/lightbox/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>

<!-- CHANGE THE NEXT THREE LINES -->

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

<!-- CHANGE THE ABOVE THREE LINES -->

<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>
<!--
h1
{margin-bottom:.0001pt;
text-align:center;
page-break-after:avoid;
font-size:20.0pt;
font-family:Graduate;
font-weight:normal; margin-left:0in; margin-right:0in; margin-top:0in}
-->
</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">

<!-- PAGE TABLE-->
<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">
&nbsp;<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>

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

<!-- SPLIT TABLE-->
<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">

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

<p class="just">

<!-- COPY AND PASTE CODE BELOW TO ADD A PARAGRAPH -->

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

<!-- COPY AND PASTE CODE ABOVE BELOW HERE TO ADD A PARAGRAPH -->

</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>&nbsp;</p>
<!-- CLOSE UP TABLE-->

<!-- PICTURE TABLE -->
<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>
&nbsp;</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>
&nbsp;</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>
&nbsp;</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>
&nbsp;</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>
&nbsp;</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>
&nbsp;</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>
<!-- PICTURE TABLE -->

<BR><BR>

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

<BR>

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

<BR>

</td></tr></table>
<!-- CONTENT TABLE -->

</td></tr></table>
<!-- SPLIT TABLE -->

</td></tr></table>
<!-- OUTER TABLE-->

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

<!-- PAGE TABLE-->
</TD></TR><TR><TD VALIGN="BOTTOM">

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

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

</td></tr></table>
<!-- END PAGE 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:



<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?
http://img715.imageshack.us/img715/7787/lbox1.png

2nd I've added the image code to a html code add on...
http://img229.imageshack.us/img229/6007/lbox2.png

thirdly I've uploaded all the relevent codes, scripts to a folder on my file manager is this the correct way?
http://img12.imageshack.us/img12/4553/lbox3.png

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:



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


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


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


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



<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/dynamicindex4/lightbox2/index.htm

), this shouldn't be required:



<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/dynamicindex4/lightbox/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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

Schmoopy
02-12-2010, 05:22 PM
As I stated previously, your code should look like this in the <head>:



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


It says href="lightbox/lightbox.css". You still haven't included this, so at the moment your page is not getting the script or css file.

casco
02-12-2010, 08:49 PM
Thanks I'll have a look still doesn't make much sense ;), it seems very complex to any other html coding I have used previously, i.e. Paypal carts, image slideshows etc, just a case of copying code and slightly tinkering with it, this seems foreign to me, but I'll have a go. I'm determined to get it to work, it would look very good on my site.

Re: starting a thread, I thought you'd say the same if I did start a new thread so replied to an existing one, on a similar subject.

CHEERS!

jscheuer1
02-12-2010, 10:10 PM
One should never assume one's question relates to an old and/or existing thread, even if it seems to. Or, even if it does, that the resolution in your particular case will be the same. However, since we are already involved here this time, we may as well continue in this thread.

Smoopy has been closer to this though, so unless your intent was to execute lightbox 2.03 or 2.03a, as I at first thought (and at closer examination now appears not to be the case), stick with Smoopy's advice here.

One thing I can say is that this is way simpler than a PayPal cart. You just have to associate the script(s) and styles of the version you are using with the page by using the correct path and filenames to them, and use the rel="lightbox" attribute with your links. This is what Smoopy is trying to help you with. It's really very easy.

casco
02-12-2010, 10:59 PM
Okay cheers, apologies if i've messed up the system in place and many thanks for your help. Easier than a paypal cart? Well I found that a doddle, so i cannot understand why I can't get my head around this, having another try now.

Both of your time and help is seriously appreciated here.

casco
02-12-2010, 11:10 PM
IT WORKS! HALLELUJAH! MANY, MANY THANKS!!

Just an issue with the shadow width, but I think I can alter that myself, hopefully.

jscheuer1
02-13-2010, 05:32 AM
Just an issue with the shadow width, but I think I can alter that myself, hopefully.

That may have to do with your DOCTYPE, and can be browser specific, and can be fudged in other ways. But you may have already fixed it, looks fine now in IE 8, Firefox 3, and Opera 10 here (limited testing, your results may vary). If you are still having problems, state the browser and version and screen/window width. Also state the exact sequence of procedures we must follow to see the problem on your demo page.

Be sure to clear your browser's cache and refresh the page to make sure it isn't already fixed.