Dynamic Ajax Content Lightbox working fine, just one bug

**Monclee** · 08-27-2007, 06:26 PM

Hey everybody i am using Dynamic Ajax Content + lightbox 2 , they are working fine buuut, just when you try to load the first image (not matter what image, the first one you try to select), the image opens but it dosent resizes the box of lightbox so it becoms imposible to close the image, unless you use esc, this sucks, but when you close the img and try to load antoher, it works perfect¡¡¡

Whats wrong.

<li><a href="javascript:ajaxpage('galeria.html', 'intro');">Galería</a></li>

<a href="cadereyta01.jpg" rel="lightbox" onmousedown="initLightbox()" title="Cadereyta" ><img src="cadereyta01min.jpg" border="0" /></a>

**jscheuer1** · 08-27-2007, 07:14 PM

Each time you init using initLightbox(), it adds elements to the page that should only be added once. This will result in even worse problems than you are having, in some browsers. I think your current trouble in your current browser is that it doesn't init fast enough the first time. To solve both problems, put the lightbox scripts on the top page (if they aren't there already), and allow lightbox to init in the normal way (it does this automatically on page load if you haven't edited the lightbox.js script). Then in all of your lightbox links on imported content use:

Code:

<a href="cadereyta01.jpg" rel="lightbox" onclick="myLightbox.start(this); return false;" title="Cadereyta" ><img src="cadereyta01min.jpg" border="0" /></a>

**Monclee** · 08-27-2007, 10:25 PM

thanks so much for your answer, here i go, sorry about my english by the way.

I change my links i correct onmousedown="initLightbox()" with onclick="myLightbox.start(this); return false;" and the result was, that now it never resizes the box

im gonna insert my code, hope you can help me out.

Code:

<? include("counter/counter_plus.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>	
<!--calls scripts-->
<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>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />



<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="zengarden-base.css" type="text/css" />
<link rel="stylesheet" href="css/contacto.css" type="text/css" />
	
	
	<!-- AJAX Script-->
<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
document.getElementById(containerid).innerHTML='<BR><div id="preamble"><p><img src="images/spin.gif">Cargando amigo triplet, por favor espera...</p></div>'
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
{
document.getElementById(containerid).scrollTop=0;
document.getElementById(containerid).innerHTML=page_request.responseText
}

}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>




<!--end AJAX script-->

</head>

<body onLoad="initLightbox();goforit();">

Thanks

**jscheuer1** · 08-28-2007, 02:18 AM

Make sure you are using the latest version (2.03 - I think) of Lightbox:

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

Two main things that I see that could be a problem:

1 ) Light box inits itself, you shouldn't need this:

Code:

<body onLoad="initLightbox();goforit();">

You probably don't need gogorit(); either, because I don't see anything on your page that uses it. So, you could just use:

Code:

<body>

2 ) Putting anything before the DOCTYPE declaration, like you have here:

Code:

<? include("counter/counter_plus.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

will throw IE into quirks mode. This may prevent all kinds of styles and scripted styles from working as expected in that browser.

Then there is a third minor problem that probably isn't doing anything bad, but who knows? Metatags go before scripts:

Code:

<head>	
<!--calls scripts-->
<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>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />



<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="zengarden-base.css" type="text/css" />
<link rel="stylesheet" href="css/contacto.css" type="text/css" />
	
	
	<!-- AJAX Script-->
<script type="text/javascript">

And, as I was copying that, I see that the comment tags aren't properly formed. You should have a space at the beginning and at the end of comment text:

Code: