PDA

View Full Version : 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/dynamicindex17/ajaxroutine.htm
http://www.dynamicdrive.com/dynamicindex4/lightbox2/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:


<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/showthread.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/showthread.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:



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:


<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/showthread.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/showthread.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:


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


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

Example:


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

spooker8
03-19-2007, 07:58 PM
Can i use this same method and apply to Thickbox.js

Example

<a href="bikeinspection.htm?height=300&width=300" class="thickbox" onmouseover="if(!window.albumInit){TB_init();window.albumInit=true;};"><img src="images/bikeinspectionservice.jpg" width="254" height="83" border="0" /></a></div>


I tried and it doesnt work.

I'm combining Thickbox and Lightbox in one website , Manage to get Lightbox working. but Thickbox still aint working , also tried PollC.

What do you think ? :confused: