PDA

View Full Version : Light Box Question



Jon101
06-09-2007, 02:15 PM
1) Script Title: Light Box

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex4/lightbox2/index.htm



I was wondering if this script could load a page in the light box effect, rather than just an image.


thanks!!

thetestingsite
06-09-2007, 02:52 PM
You would want to look into using "Lightbox Gone Wild" for this.

Demo: http://particletree.com/examples/lightbox/
Code: http://particletree.com/features/lightbox-gone-wild/

Hope this helps.

Jon101
06-09-2007, 04:44 PM
Hmm, i did everything right (at least i think i did) and it doesn't seem to be working...

http://www.tangledinthe.net/indexnew.htm

if you mouse over about and click on satisfaction you'll see what i mean

jscheuer1
06-09-2007, 05:21 PM
I'm not sure if it makes a difference, but in the demo, the relative path is used for links. You've used the absolute path:


<a href="http://www.tangledinthe.net/satisfaction.html" class="lbOn">

Also, I am assuming that you've used the distribution files for the 'gone wild' version and not kept any of the files from the regular lightbox hanging around.

The demo uses this (which I have some problems with, but that's another story):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

But, your page uses just:


<html>

This may or may not make a difference. The use of other scripts on the page may be conflicting. The server may simply not allow this script, as am getting a server displayed error instead of the requested page:


Method Not Allowed
The requested method POST is not allowed for the URL /satisfaction.html.

Apache/1.3.36 Server at www.tangledinthe.net Port 80

Jon101
06-09-2007, 07:49 PM
What do you mean the relative path is used, rather than the actual or direct path?

They do it like this:


<a href="form.html" class="lbOn">Email This</a>


isnt that the same?

thetestingsite
06-09-2007, 07:54 PM
This is a relative path (the part in red):


<a href="form.html" class="lbOn">Email This</a>


and this is an absolute path:



<a href="http://www.domain.com/form.html" class="lbOn">Email This</a>


Perhaps if you try using just a relative path that would fix the problem (although, it probably won't). Also, take the advise of John about the original lightbox script and other scripts conflicting with it.

Anyways, hope this helps.

Jon101
06-09-2007, 08:15 PM
I tried using a relative path before i used an absolute. As far as using other light box scripts, i only use the ones that were issued in the .zip file.

Ill change it back to a rel path, but i dont think it will help.



EDIT: Changed it to a rel path and it is still not working.

jscheuer1
06-10-2007, 02:49 PM
I just finished trying out the demo for this script locally and on three different servers. I also tried out the tangledintheweb version locally and on one server.

Both the demo and the tiw version worked locally. Neither version worked on any server I tried them on. This leads me to believe that this is probably the result of some relatively new and generally adopted security measure or measures in use on servers. So, unless I am missing something, or there is a fix for this around, LBGW is dead for the time being. There is another implementation of this around, I think, but I will need to check it out first to be sure it works.

jscheuer1
06-10-2007, 03:56 PM
OK, that other implementation was only a regular lightbox clone even though it was mentioned in the LBGW comments section as if it were a GW type implementation. However, reading further on in the comments section of the LBGW page yielded this:


Hey all,
First off, great code.

Ive used it before on a apache based server and no problem, but I, unfortunatly, am running on IIS now and I am getting the HTTP Error 405 error. I read about a suggested fix, but I am unsure where to make this fix in the code.

And this:


The HTTP 405 error occurs because IIS is configured to disallow posting to HTML files. Possible workarounds:

* ask your ISP to change their IIS configuration;
* rename your files to .php instead of .html;
* hack the lightbox.js file to use GET instead of POST ( line 126: change ‘post’ to ‘get’ )


I chose the third (highlighted) option and this cleared up the problem, give it a shot.

Jon101
06-10-2007, 06:01 PM
How would i go about changing the js? i dont know much about js...

Do just open it in dreamweaver and look for where it sais POSt and change it to GET


thanks!

thetestingsite
06-10-2007, 06:11 PM
Use this as lightbox.js. I editted it to use get instead of POST.



/*
Created By: Chris Campbell
Website: http://particletree.com
Date: 2/1/2006

Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
*/

/*-------------------------------GLOBAL VARIABLES------------------------------------*/

var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

/*-----------------------------------------------------------------------------------------------*/

//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/

function getBrowserInfo() {
if (checkIt('konqueror')) {
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible')) {
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";

if (!version) version = detect.charAt(place + thestring.length);

if (!OS) {
if (checkIt('linux')) OS = "Linux";
else if (checkIt('x11')) OS = "Unix";
else if (checkIt('mac')) OS = "Mac"
else if (checkIt('win')) OS = "Windows"
else OS = "an unknown operating system";
}
}

function checkIt(string) {
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}

/*-----------------------------------------------------------------------------------------------*/

Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);

var lightbox = Class.create();

lightbox.prototype = {

yPos : 0,
xPos : 0,

initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},

// Turn everything on - mainly the IE fixes
activate: function(){
if (browser == 'Internet Explorer'){
this.getScroll();
this.prepareIE('100&#37;', 'hidden');
this.setScroll(0,0);
this.hideSelects('hidden');
}
this.displayLightbox("block");
},

// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
prepareIE: function(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;

htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
},

// In IE, select elements hover on top of the lightbox
hideSelects: function(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},

// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},

setScroll: function(x, y){
window.scrollTo(x, y);
},

displayLightbox: function(display){
$('overlay').style.display = display;
$('lightbox').style.display = display;
if(display != 'none') this.loadInfo();
},

// Begin Ajax request based off of the href of the clicked linked
loadInfo: function() {
var myAjax = new Ajax.Request(
this.content,
{method: 'get', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);

},

// Display Ajax response
processInfo: function(response){
info = "<div id='lbContent'>" + response.responseText + "</div>";
new Insertion.Before($('lbLoadMessage'), info)
$('lightbox').className = "done";
this.actions();
},

// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName('lbAction');

for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
lbActions[i].onclick = function(){return false;};
}

},

// Example of creating your own functionality once lightbox is initiated
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));

var myAjax = new Ajax.Request(
link.href,
{method: 'get', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);

},

// Example of creating your own functionality once lightbox is initiated
deactivate: function(){
Element.remove($('lbContent'));

if (browser == "Internet Explorer"){
this.setScroll(0,this.yPos);
this.prepareIE("auto", "auto");
this.hideSelects("visible");
}

this.displayLightbox("none");
}
}

/*-----------------------------------------------------------------------------------------------*/

// Onload, make all links that need to trigger a lightbox active
function initialize(){
addLightboxMarkup();
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}

// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {
bod = document.getElementsByTagName('body')[0];
overlay = document.createElement('div');
overlay.id = 'overlay';
lb = document.createElement('div');
lb.id = 'lightbox';
lb.className = 'loading';
lb.innerHTML = '<div id="lbLoadMessage">' +
'<p>Loading</p>' +
'</div>';
bod.appendChild(overlay);
bod.appendChild(lb);
}


Hope this helps.

Jon101
06-10-2007, 10:44 PM
Ill try it out and let you know if it works.


Thanks for taking the time to help me.

jscheuer1
06-10-2007, 10:48 PM
Actually, after modifying the LBGW lightbox.js to fix this problem, I discovered other problems and things that should or that I wanted to be changed. For instance:


In IE 7 the scroll bar, which gets removed while lightbox is displayed was not restored when lightbox was deactivated.

The function to launch lightbox from within lightbox (unused in the demo) still used 'post', so would have the same error we were having before if that were to be used.

I decided I wanted a loading image. I put this into the code of lightbox.js and I put the image in the images directory.

I decided I wanted clicking on the overlay to make the lightbox deactivate. I wrote this into lightbox.js.

After these changes, I noticed an error happening sometimes in IE 7 (it may or may not have been there before, as it would come and go). To fix this, I edited the prototype.js to make sure any element that it tried to remove existed first before removing it.


All these changes, including the initial fix I mentioned in my last post are incorporated in this archive:

1065

Jon101
06-10-2007, 11:07 PM
Im going to dl it right now and see if it works. Thanks so much for all of your help!

Jon101
06-10-2007, 11:13 PM
Well, it works great! The only thing is that my flash header does not dim out, it stays at its normal brightness. Any ideas how to fix this?


EDIT: Now all i see is the loading screen forever... It worked decent for the first view.

jscheuer1
06-11-2007, 12:52 AM
That, the Flash, is a separate issue, see:

http://www.dynamicdrive.com/forums/showthread.php?p=95475#post95475

Also, with this implementation of lightbox, I found another problem. The way it deals with scrollbars and the coverage of the overlay in IE are less than optimal, to fix this, I edited lightbox.css and lightbox.js, I will attach the new archive:

1067

About the loading screen just showing without loading the content. I visited your page in IE 7 and 6 and cannot get it to duplicate the problem. If the server is having trouble finding the external page or is slow, this could cause this. There could be other problems. Try clearing your cache and trying again. If the problem persists, describe the exact circumstances that bring it on and tell us the browser that you are using when this happens.

Jon101
06-11-2007, 02:26 AM
Thanks for all your help. Ill fix it up tomorrow and will let you know how it goes

Jon101
06-11-2007, 01:37 PM
I still cant get it to load for me on IE6 or 7, I tried on two different computers and it doesnt seem to work.

jscheuer1
06-11-2007, 02:29 PM
Well, is your demo current? It was working in those browsers last I checked. OK, I just checked, it is no longer working properly in IE, but you haven't upgraded all the files. If you use any of my archived versions, be sure to use all of the files in that particular archive, as they all work together.

Anyways, I've been fiddling with the demo some more. I still wasn't happy with the way it displayed in IE. So I tweaked it some more, adding an IE only stylesheet:

1068

If you use this version, you need to add the IE only link to it on your page:


<link rel="stylesheet" href="css/lightbox.css" media="screen,projection" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/lightbox_ie.css" media="screen,projection" type="text/css" />
<![endif]-->

Jon101
06-11-2007, 06:37 PM
It seems to be working well, the only thing is that Its not showing images in the light box, also, my page shifts when you open the light box.

Thanks again for all your help, please do let me know if you know how I can add images.


Thanks!

jscheuer1
06-11-2007, 07:09 PM
That's because of the style in lightbox.css for image only content. If you have an image on the external page (as you do), set its width and height inline using style to counteract this:


<img src="images/guarantee.gif" alt="Satisfaction" style="width:100px;height:100px;" />

There may be other problems, but probably not.

The page shifting should only happen in IE. This is to remove the vertical scrollbar. I think that this is desirable, but it can be eliminated. However, since you seem to have an aversion to editing the javascript file, hmm. Well, let's try to take care of that right now. To edit lightbox.js, simply open it in Notepad. Make sure Word Wrap is off (unchecked, under the format menu). To add the scrollbar back in IE, change this (starts at around line number 65):


initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},

// Turn everything on - mainly the IE fixes
activate: function(){
if (browser == 'Internet Explorer'){
// this.getScroll();
this.prepareIE('', 'hidden');
// this.setScroll(0,0);
this.hideSelects('hidden');
}

this.displayLightbox("block");
},

to:


initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
},

// Turn everything on - mainly the IE fixes
activate: function(){
if (browser == 'Internet Explorer'){
// this.getScroll();
this.prepareIE('', '');
// this.setScroll(0,0);
this.hideSelects('hidden');
}

this.displayLightbox("block");
},

Hit save, and use it like that.

If you mess up, you can always start over with a fresh copy of lightbox.js from the current archive (zip file) set that you are using.

Jon101
06-11-2007, 07:34 PM
Perfecto! Now i just need to work on getting that flash to dim out... Ill check out your earlier post with the url in it.


Thanks so much!

Jon101
06-11-2007, 08:03 PM
I attempted to fix the flash problem, but it didnt work... is this code correct?



<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="150" hspace="0" vspace="0" param name="wmode" value="transparent">

<param name="movie" value="images/headernnav.swf">
<param name="quality" value="high">
<embed src="images/headernnav.swf" width="778" height="150" hspace="0" vspace="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>

jscheuer1
06-11-2007, 08:16 PM
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="150">
<param name="movie" value="images/headernnav.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="images/headernnav.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="778" height="150"></embed>
</object>

Jon101
06-11-2007, 08:24 PM
ah, I see... I read the instructions wrong.

Works perfect, I dont know what I'd do without you!!


Thanks for everything.

Jon101
06-11-2007, 11:05 PM
I just checked it in the latest version of firefox, and it didnt seem to work.

Does it work for you?

jscheuer1
06-12-2007, 03:38 AM
I have FF 2.0.0.4 - it works fine in that. Try clearing the cache. However, you would be better off using a DOCTYPE, even a transitional one like:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>

This will allow IE 7 to ignore many of the IE specific styles and use the fixed positioning for the overlay and box. That way, scrolling the page while the box is displayed will not result in it jumping about the center as it does now. This cannot be prevented in IE 6 though, as it doesn't support fixed positioning of divisions, no matter what the DOCTYPE.

Jon101
06-12-2007, 11:49 AM
Ah, I see. Ill give it a shot.

Thanks!

Jon101
06-12-2007, 06:34 PM
Well, once again it doesnt seem to be working. I checked from two other computers and now i get the same issue as before. The loading screen just stays up.

I didnt change any of the files since it was working...


Very confused..


Thanks!

jscheuer1
06-12-2007, 06:47 PM
I think that may just be your server and/or the connection. I noticed, at times, that it would be very slow to fetch the content. I just tried now and it came right up though.

Jon101
06-12-2007, 08:02 PM
Well, as much as I would like to use the lightbox, it looks like Im better off using an alternative... I would hate for potential clients to be unable to view the site because of some server issues with the light box or something.


Thanks for all your help!!


Jon

jscheuer1
06-12-2007, 09:38 PM
You should perhaps then consider that in light of the entire site. I have found it difficult, at times, to load the main page, and even the small satisfaction.html page - by itself.

However, if you are happy with your host, you may want to look into the modal window:

http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/dhtmlmodal.htm

Its content can be from several sources. One of which is a hidden division already on the page. As long as the page is loaded, there would be no lag time fetching this content.

Jon101
06-12-2007, 09:48 PM
I have never experenced any loading problems on the site... actually you're the first person to bring that to my attention. As far as using a modal window, I'll read into it.

Thanks for the help.

imdoody
08-24-2007, 12:26 AM
For those of you who are having trouble with flash not going where it is supposed to go, with lightbox or even other java script overlays. try using the "<parm name="wmode" value="transparent">" on your flash object. This worked for me on IE.

kosa351
11-22-2007, 01:47 PM
Someone solved already the problem of fusion the lightbox and the flash. Attribute
wmode="transparent" works, but there is no background in flash :(

jscheuer1
11-22-2007, 03:33 PM
Someone solved already the problem of fusion the lightbox and the flash. Attribute
wmode="transparent" works, but there is no background in flash :(

You can also - along with the wmode - set a bgcolor param and/or attribute (depending upon your tag(s). For an object tag:


<param name="bgcolor" value="white">
<param name="wmode" value="transparent">

and, for the embed:


<embed bgcolor="white" wmode="transparent" . . .

I'm not sure how helpful this would be, but it is allowed by the specification. If you were to set the bgcolor to the one that the Flash already had, it should work out.

kosa351
11-22-2007, 05:46 PM
I thank for answer. However I already earlier tried so to do.
When
wmode="transparent" has not attribute the colours of background work normally.
Adding attribute
wmode="transparent" background flasha does not work.
My flash code

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="468" height="60" align="middle" title="elektrowoz">
<param name="movie" value="http://www.deepsounds.pl/foto/swf/elektrowoz_302x50.swf" />
<param name="bgcolor" value="#FFFF00">
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="http://www.deepsounds.pl/foto/swf/elektrowoz_302x50.swf" width="468" height="60" align="middle" quality="high" bgcolor="#FFFF00" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
I have not to this strengths. This is all turned... :(

jscheuer1
11-22-2007, 08:37 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:blue;
}
.myflash {
background-color:#ffff00;
width:468px;
height:60px;
}
</style>

</head>
<body>
<div class="myflash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="468" height="60" align="middle" title="elektrowoz">
<param name="movie" value="http://www.deepsounds.pl/foto/swf/elektrowoz_302x50.swf" />
<param name="bgcolor" value="#FFFF00">
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="http://www.deepsounds.pl/foto/swf/elektrowoz_302x50.swf" width="468" height="60" align="middle" quality="high" bgcolor="#FFFF00" wmode="transparent" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"></embed>
</object>
</div>
</body>
</html>

kosa351
11-22-2007, 09:06 PM
You are great ;) Very big beer for solution this problem.
Thank You :)