Expandir un Div con imágenes

[eeeee]

Hola a todos:

Tengo el siguiente problema y lo pongo a ver si alguién me lo puede solucionar o darle un poco de luz. Gracias de antemano.
En una consulta a una base de datos , me devuelve este código por cada registro encontrado:

Código:

<div class="dhtmlgoodies_question"> <li>juan habichuela - de la zambra al duende</div>
<div class="dhtmlgoodies_answer">
<a href="foto1.jpg"><img height="55" src="thfoto1.jpg"></a>   
<a href="foto2.jpg"><img height="55" src="thfoto2.jpg"></a>   
<a href="foto3.jpg"><img height="55" src="thfoto3.jpg"></a>   
</div>

Esto funciona de esta forma: sólo se ve el div class="dhtmlgoodies_question" y al hacer clik en él se expande hacia abajo el div class="dhtmlgoodies_answer" que es el que lleva los thumbsnail. Más abajo pongo el código del java que hace esto posible.

Funciona bien, pero en el caso de que sean varias decenas o cientos de resultados, resulta que carga todos los thfotox y casi seguro que el cliente no va a ver todos.
Yo quisiera que cargara los thfoto de cada div al expandir el div superior. O sea que no los cargue todos al principio.

Este es el código del javascript

Código:

var dhtmlgoodies_slideSpeed = 10;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

	objectIdToSlideDown = false;
	
	if(!answerDiv.style.display || answerDiv.style.display=='none'){		
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{
			
			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';
			
			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}	
}
function slideContent(inputId,direction)
{	
	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
	}else{
		if(height<=1){
			obj.style.display='none'; 
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
			}else{
				dhtmlgoodies_slideInProgress = false;
			}
		}else{
			dhtmlgoodies_activeId = inputId;
			dhtmlgoodies_slideInProgress = false;
		}
	}
}
function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dhtmlgoodies_question'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'dhtmlgoodies_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'dhtmlgoodies_a'+divCounter;	
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
			contentDiv.className='dhtmlgoodies_answer_content';
			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}		
	}	
}
window.onload = initShowHideDivs;

Salu2

[marcopoloaz06]

hola,
ps enves
de que tus
imagenes tengan
el src, se los puedes
poner mientras en el atributo
rel y cuando se vayan a mostrar
ps le pasas el atributo rel al src y creo
que eso funcionara. Si me pasas una pag de
prueba te lo ago, esque esa me tiro un error del codigo

saludos
:]

[eeeee]

Hola marcopoloaz06

gracias por responder, te da error porque el javascript agrega algunos div.

Mira a ver si te puede valer http://search.alicun.com/?palabra=ha...dio&forma=Down como página de prueba ya que esta da sólo dos resultados,
o mejor http://search.alicun.com/prueba.htm que no tiene tantos colores ni publicidad.

Salu2

[marcopoloaz06]

hola,
bueno la
funcion te
quedaria asi

Código HTML:

function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
    
    // inicia
    var nodes = answerDiv.lastChild.childNodes;
    for(var i=0;i<nodes.length;i++){
        var nd = nodes[i];
        if(nd.tagName=="A"){
            var nd_ = nd.childNodes;
            for(var j=0;j<nd_.length;j++){
                if(nd_[j].tagName=="IMG" && nd_[j].getAttribute("src")!=nd_[j].getAttribute("rel") ){
                    nd_[j].setAttribute("src", nd_[j].getAttribute("rel") );
                    break;
                }
            }
            continue;
        }
    }
    // temina

	objectIdToSlideDown = false;
	
	if(!answerDiv.style.display || answerDiv.style.display=='none'){		
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{
			
			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';
			
			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}	
}

--

Código HTML:

<div style="display: none; height: 1px; visibility: visible;" id="dhtmlgoodies_a2" class="dhtmlgoodies_answer" align="left">
<div id="dhtmlgoodies_ac2" class="dhtmlgoodies_answer_content" style="top: -63px;">
<a href="http://www.seriousteam.es/images/forosdelweb2.JPG">
<img src="" rel="http://www.seriousteam.es/images/forosdelweb2.JPG" height="55" /></a>
 &nbsp;
 <a href="http://www.seriousteam.es/images/forosdelweb2.JPG">
 <img src="" rel="http://www.seriousteam.es/images/forosdelweb2.JPG" height="55" /></a>   
</div></div> 

-------------
ya lo edite para que funcione en IE y FF

saludos
:]

[eeeee]

Perfecto marcopoloaz06

Con los cambios oportunos para que la consulta generara el código necesario y con tu ayuda, he solucionado mi problema, ahora todo anda perfecto sin cargar al servidor.

Muchas gracias.

Salu2

[eeeee]

Bueno,

Todas las pruebas las he hecho con firefox porque es con el funciono siempre y si funciona con firefox, pero al intentarlo con IE no hace el cambio del src al rel.(ni con la modificación que me enviaste por mensaje).

Puedes verlo aquí http://search.alicun.com/prueba.htm

Salu2