Lightbox2+Dynamic Ajax content

**boxxertrumps** · 02-10-2007, 03:32 AM

1) Script Title: Lytebox2 && Dynamic Ajax content

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

3) Describe problem:
I tried loading the lytebox veiwer with the ajax routine's "loadobjs" function, but the loading div goes blank, and if the windows is resided it also goes blank.
thumbnails are briefly shown before the window goes blank.

happens in FF2, K-Melon, loads but lightbox doesn't function in Opera and IE7.

heres the link to load the veiwer.
<a href="javascript:ajaxpage('album.html', 'contentarea');loadobjs('js/prototype.js','js/scriptaculous.js?load=effects','js/lightbox.js')">Photo Album</a>

Only just started playing around with javascript, dunno what the problem would be.

DEMO AT: http;//www.freewebs.com/boxxertrumps
i also noticed that a strange FWThumbnails directory showed up after i ran the script... most likely pure coincidence... but if it helps...

**jscheuer1** · 02-10-2007, 05:53 AM

That's not what loadobjs() is for. It loads scripts and/or css once and only once onto the page if they are not already there. It does not initialize imported content to scripts.

Locally, once the scripts and css are loaded to the 'top' page (which you could do from the outset just by placing them on the 'top' page as would normally be done without Ajax content), you could just add an onmouseup event to your link:

Code:

<a href="javascript:ajaxpage('album.html', 'contentarea');" onmouseup="initLightbox();">Photo Album</a>

However, with a live page, there is no way of knowing if the content is available to be initialized that soon or not, probably not. That's where:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

comes in.

**boxxertrumps** · 02-10-2007, 04:53 PM

Ive set up the scripts to load with the rest of the document, but lightbox doesn't function at all.

http://www.freewebs.com/boxxertrumps/indexv2.html

**jscheuer1** · 02-10-2007, 05:49 PM

I don't see any attempt on your page to determine when the added content is available nor any attempt to initialize it to lightbox.

**boxxertrumps** · 02-10-2007, 06:07 PM

<?xml version="1.0" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "XHTML1-f.dtd">
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" ><head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>BoxxerTrumps</title><link rel="stylesheet" type="text/css" href="css.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

so when you open indexv2.html the scripts are already there, and when you chose photo album from the drop down menu you see the gallery, but when you click on the thumbnails the lightbox script doesn't kick in. it just loads the picture like a new document.

**jscheuer1** · 02-10-2007, 06:08 PM

Have you even looked at this yet:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

?

**boxxertrumps** · 02-10-2007, 06:21 PM

yes i did, thats why i hard coded the scripts into the top of the page, and lightbox doesn't need any specific initialization...
(Section "practices" B/1)
and i already read the page...

so unless im terribly misunderstanding you, i think it should work.

**jscheuer1** · 02-10-2007, 06:43 PM

No, that's OK, I guess you weren't really paying real close attention:

Originally Posted by jscheuer1

Locally, once the scripts and css are loaded to the 'top' page (which you could do from the outset just by placing them on the 'top' page as would normally be done without Ajax content), you could just add an onmouseup event to your link:

Code:

<a href="javascript:ajaxpage('album.html', 'contentarea');" onmouseup="initLightbox();">Photo Album</a>

However, with a live page, there is no way of knowing if the content is available to be initialized that soon or not, probably not. That's where:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

comes in.

A script can have an initialization without it being readily apparent (it is at the end of the lightbox.js file though hard to tell, I suppose). In the above quoted section I thought I had made clear what lightbox required to initialize but, I admit it was subtle. Also, the above is not a solution for a live page.

For a live page you will need to set up the poll function, the polled for element(s) and add the events to use them to your link(s) as described in:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

**boxxertrumps** · 02-10-2007, 10:35 PM

I'll have to admit to you, I Fail Hard.

**jscheuer1** · 02-11-2007, 10:24 AM

I just had a brainstorm. Keep the external scripts as we have them on the 'top' page (indexv2.html). Forget about the polling function and the polled for id etc. Here is a simpler method that should work. For your link that loads the album have this:

Code:

<a href="javascript:ajaxpage('album.html', 'contentarea');" onmousedown="window.albumInit=false;">Photo Album</a>

Then, on the external album page (album.html), have each lightbox link include this event:

Code:

onmouseover="if(!window.albumInit){initLightbox();window.albumInit=true;};"

Example:

Code:

<a href="http://i119.photobucket.com/albums/o141/boxxertrumps/fall.png" rel="lightbox" title="Caution: Falling HTML Tags" onmouseover="if(!window.albumInit){initLightbox();window.albumInit=true;};">
<img src="http://s119.photobucket.com/albums/o141/boxxertrumps/th_fall.png" /></a>

Thread: Lightbox2+Dynamic Ajax content

Thread Tools

Search Thread

Lightbox2+Dynamic Ajax content

Bookmarks

Bookmarks

Posting Permissions