Claro, tú los tuhmbnails (imágenes en pequeñito) los colocas como más te guste. No tienes más que pegar en head el código del script y luego hacer la llamada al script desde cada thumbnail.
El script que has de pegar en head es este:
<script language="javascript">
/************************************************** ***************************
Pop-up ajustada a foto. Script creado por Tunait!
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
http://javascript.tunait.com/ [email protected]
************************************************** ****************************/
var titulopordefecto = "
Perico de los palotes"; //Si no se especifica un título al llamar a la función colocará el que se especifique aquí
var ventana;
var cont=0;
function afoto(cual,titulo)
{
if(cont==1){ventana.close();ventana=null}
if(titulo==null){titulo=titulopordefecto}
ventana=window.open('','ventana','resizable=yes,sc rollbars=no')
ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">');
ventana.document.close();
cont++;
}
function redimensionar(ancho, alto)
{
ventana.resizeTo(ancho+12,alto+28);
ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2); //centra la ventana. Eliminar si no se quiere centrar el popup
}
</script>
Donde dice perico de los palotes (en negritas) debes especificar el título que quieras que aparezca por defecto.
Luego a cada thumbnail debes añadirle esto:
<a href="#"
onClick="afoto('fotos/gato.jpg');return false"><img src="fotos/gatop.jpg" width="100" height="73" border="0"></a>
Debes poner lo que está en negritas, cambiando lo que está en rojo por el nombre o ruta de la imagen que quieras que cargue.
Puedes hacer que cada foto que cargue en la popup tenga un titulo (title) distinto. Lo lograrías añadiendo un segundo parámetro a la llamada a la función:
<a href="#"
onClick="afoto('fotos/tibidabo.jpg','Catedral del Tibidabo');return false"><img src="fotos/tibidabop.jpg" width="95" height="72" border="0"></a>
En este caso, al añadir el segundo argumento (el que puse en verde) provocaría que tuviera un título distinto del que se estableció por defecto.
Hay alguna explicación más
aquí al respecto.
Si vas a ver el enlace, fíjate también que hay una versión 2, quizás te pueda también interesar
