slideshow

[Superlinux]

hola amigos del foro .. estoy adaptando este codigo para presentar info de unos especialistas ... funciona muy bien .. pero no he logrado visualizar ademas de la imagen la info al lado de esta .. datos como nombre, apellido, ciudad

este es el codigo que tengo hasta ahora .. si alguien tiene una idea ... gracias por la ayuda

index.php

Código PHP:

 <html>
<head>
<link rel="stylesheet" href='slideshow.css' type="text/css" />
<script type="text/javascript" src="slideshow.js"></script>
<title>presentacion</title>
</head>
 
<body>
 
<div id="rotator">
        <?
        //Archivo de conexion
        require("../connect.php");
        
        $regusuario = $sql->seleccionarLibre("SELECT * FROM regusuario group BY nombres ASC"); 
 
        if($regusuario)
        {
            foreach($regusuario as $reg)
                {
                
                 $esp = $sql->seleccionar("especialista","*","IdUsuario =".$reg['IdUsuario']);
                
                 if($esp[img_especialista]){
                    $trozos = explode (".",$esp['img_especialista']);
                    $img= $trozos[0]."_m.".$trozos[1];
                    ?>
                    <a href="<?php echo "../ver_especialistas.php?ide=".$esp[idEspecialista]."&idc=".$esp[idCiudad]."&ids=".$esp[idSubespecialidad] ?>" class="ciudades"><img src="../imgespec/<?php echo $img ?>"  width="150" height="109" border="0"></a>
                    <?    
                 }//Fin del if
            }//Fin foreach
        }//Fin del if
        ?>
</div>
</body>
</html>  

slideshow.css

Código PHP:

  *
{
    margin: 0;
    padding: 0;
}
 
#rotator
{
    border: 1px solid #000;
    overflow: hidden;
    margin: 50px auto 10px;
    position: relative;
    width: 150px; /*Aquí puedes editar*/
    height: 109px;/*estos valores para cambiar el tamaño pero recuerda cambairlos abajo también*/
}
 
#rotator img
{
    border: 0;
    width: 150px;
    height: 109px;
}
 
p
{
    text-align: center;
} 
   

slideshow.js

Código PHP:

  /*********************************************************************************************************/
 
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
 
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
 
function so_init()
{
    if(!d.getElementById || !d.createElement)return;
 
    css = d.createElement('link');
    css.setAttribute('href','slideshow2.css');
    css.setAttribute('rel','stylesheet');
    css.setAttribute('type','text/css');
    d.getElementsByTagName('head')[0].appendChild(css);
 
    imgs = d.getElementById('rotator').getElementsByTagName('img');
    for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
    imgs[0].style.display = 'block';
    imgs[0].xOpacity = .99;
 
    setTimeout(so_xfade,3000);
}
 
function so_xfade()
{
    cOpacity = imgs[current].xOpacity;
    nIndex = imgs[current+1]?current+1:0;
    nOpacity = imgs[nIndex].xOpacity;
 
    cOpacity-=.05;
    nOpacity+=.05;
 
    imgs[nIndex].style.display = 'block';
    imgs[current].xOpacity = cOpacity;
    imgs[nIndex].xOpacity = nOpacity;
 
    setOpacity(imgs[current]);
    setOpacity(imgs[nIndex]);
 
    if(cOpacity<=0)
    {
        imgs[current].style.display = 'none';
        current = nIndex;
        setTimeout(so_xfade,3000);
    }
    else
    {
        setTimeout(so_xfade,50);
    }
 
    function setOpacity(obj)
    {
        if(obj.xOpacity>.99)
        {
            obj.xOpacity = .99;
            return;
        }
 
        obj.style.opacity = obj.xOpacity;
        obj.style.MozOpacity = obj.xOpacity;
        obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
    }
}