Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje10-11-2008, 19:03 (UTC)    
Título del mensaje: [Código Javascript]Thickbox galeria con precarga y opacidad
Responder citando
Descargamos este archivo http://informatica-practica.net/tutoriales/ThickBox%5Bwww.informatica-practica.es.mw%5D.rar

Antes de subir los archivos buscamos el archivo: thickbox.js lo abrimos para editar la siguiente linea:
Código:
$("body").append("<div id='TB_load'><img src='ACA PONEMOS LA RUTA DE LA IMAGEN DE PRECARGA' /></div>");


donde dice "ACA PONEMOS LA RUTA DE LA IMAGEN DE PRECARGA" colocamos la url directa de la imagen de precarga.
Si no tienen una yo se las doy http://ayudapwg.eshost.com.ar/GALERIA_PWG/objetos/loadingAnimation.gif

Luego descomprimimos los archivos contenidos y los subimos al host de preferencia
Luego de subir buscamos los archivos por su nombe y los colocamos así

Código:
<script type="text/javascript"src="http://www.host.com/jquery.js"></script>
<script type="text/javascript" src="http://www.host.com/thickbox.js"></script>


Cargamos el css alojado osea colocamos la url directa en el siguiente codigo

Cita:
<link rel="stylesheet" href="http://www.host.com/thickbox.css" type="text/css" media="screen">



codigo completo:

Cita:
<script type="text/javascript"src="http://ayudapwg.eshost.com.ar/GALERIA_PWG/objetos/jquery.js"></script>
<script type="text/javascript" src="http://ayudapwg.eshost.com.ar/GALERIA_PWG/objetos/thickbox.js"></script>



Cita:
<link rel="stylesheet" href="http://ayudapwg.eshost.com.ar/GALERIA_PWG/objetos/thickbox.css" type="text/css" media="screen">


Luego para poner las imagenes hacemos los siguientes codigos
Código:
<a href="ACA COLOCAMOS LA IMAGEN QUE SE VA A VER EN GRANDE.JPG" title="Bonito paisaje" class="thickbox"><img src="ACA COLOCAMOS LA IMAGEN PEQUEÑA DONDE HACEMOS CLICK" border="0" class="espacio_derecha"></a>


Eso es para una imagen sola si queremos hacer una galeria ponemos lo siguiente:

Código:
<a href="grande1.jpg" class="thickbox" rel="galeria"> <img src="pequeña1.jpg"> </a>
<a href="grande2.jpg" class="thickbox" rel="galeria"> <img src="pequeña2.jpg"> </a>
<a href="grande3.jpg" class="thickbox" rel="galeria"> <img src="pequeña3.jpg"> </a>

Se pueden agregar más.

Si puedo luego agrego imagenes.

Ejemplo de carga


Ejemplo de vista



©Todobanners protegidos todos los derechos la copia del tutorial sin previa autorización es tomada como robo.
______________
Quieres mi web? Yo también :P


Ultima edición por todobanners el Vie Nov 14, 2008 10:24 pm; editado 1 vez
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.