juan Carlos. y yo
Hace 4 años
| [+/-] | Trikie Z-Graphics |
| [+/-] | Plantillas Btemplates |
Seguramente todos los bloggeros conocemos uno de los mas grandes sitios con plantillas para blogger: Btemplates. Hace unos dias me pasé por la pagina para observar los nuevos diseños, no ojee mucho, pero vi tres plantillas en especial que me llamaron mucho la atencion y que vale la pena visitar:
Photoplus +
ROCKS MY WORLD
NATURE GIFT
| [+/-] | Facebox: ventana modal |
Facebox es una ventana modal (lightwindow) ligera que puede mostrar imagenes, divs (capas) o paginas enteras a traves de ajax. Utiliza la libreria jQuery por lo que si utilizamos Scriptaculous o prototype podria presentarnos problemas con los efectos.
Tiene una apariencia parecida al visualizador de facebook, de ahi su nombre.
Podemos ver algunos ejemplos en funcionamiento en esta pagina.
Para agregar la laightwindow descargamos el zip y alojamos los archivos en nuestro servidor, si no quieres meterte en ese cuento o de verdad no sabes como, puedes usar mis archivos (en caso de cambiar de servidor publicaré una entrada con los nuevos links):
Lista de archivos.
Lo siguiente será adjuntar la hoja de estilos y los archivos js (ambos antes de </head>):
y los archivos los añadimos de la siguiente forma:
Para una imagen :
Para una capa (div) esccondida:
Un archivo html externo (solo si esta en el mismo servidor):
y para añadir un html externo(como el anterior) dando estilos css:
Tiene una apariencia parecida al visualizador de facebook, de ahi su nombre.
Podemos ver algunos ejemplos en funcionamiento en esta pagina.
Para agregar la laightwindow descargamos el zip y alojamos los archivos en nuestro servidor, si no quieres meterte en ese cuento o de verdad no sabes como, puedes usar mis archivos (en caso de cambiar de servidor publicaré una entrada con los nuevos links):
Lista de archivos.
Lo siguiente será adjuntar la hoja de estilos y los archivos js (ambos antes de </head>):
<script src="url-jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="url-facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="url-facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
<link href="url-facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="url-facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
y los archivos los añadimos de la siguiente forma:
Para una imagen :
<a href="listenmusic.jpg" rel="facebox">Girl listening to music</a>
Para una capa (div) esccondida:
<p><a href="#mydiv" rel="facebox">View DIV with id="mydiv" on the page</a></p>
<div id="mydiv" style="display:none">
El contenido de esta capa solo sera visible si presionamos click sobre el enlace anterior, que contiene el id mydiv
</div>
<div id="mydiv" style="display:none">
El contenido de esta capa solo sera visible si presionamos click sobre el enlace anterior, que contiene el id mydiv
</div>
Un archivo html externo (solo si esta en el mismo servidor):
<a href="archivo_externo.htm" rel="facebox">View "External.htm" fetched via Ajax</a>
y para añadir un html externo(como el anterior) dando estilos css:
<style type="text/css">
.estilo{
background: silver;
}
</style>
.estilo{
background: silver;
}
</style>
<a href="arcchivo_externo.htm" rel="facebox[.estilo]">View "External.htm" fetched via Ajax, further styled with ".thickstyle" CSS class</a>
