Lightbox es un script desarrollado con javascript que nos permite abrir ventanas emergentes con más estilo que las habituales popup. Como esta librerÃa existen muchÃsimas mas, como por ejemplo la lightview.
Bueno pero este no es el punto principal, vÃa unijimpe me encuentro con la posibilidad de nosotros poder "desarrollar" nuestra propia lightbox. Porque por medio de css más un simple mostrar y ocultar divs podemos hacer el efecto para que se abra una ventana emergente. Obviamente este código no cuenta con algunos efectos que tienen la ya nombrar lightbox, pero nos puede servir para nosotros darle el estilo que queramos a la popup que se abra.
-----------
Ahora vamos a ver el código para generar nuestra lightbox:
-----------
1 - Creamos un nuevo documento html, e insertamos estas divs.
-----------
2 - Esta paso es uno si no el mas importante de todos, vamos aplicar el estilo css a las divs que creamos en el paso anterior.
-
.fadebox {
-
display: none;
-
position: absolute;
-
top: 0%;
-
left: 0%;
-
width: 100%;
-
height: 100%;
-
background-color: black;
-
z-index:1001;
-
-moz-opacity: 0.8;
-
opacity:.80;
-
filter: alpha(opacity=80);
-
}
-
.overbox {
-
display: none;
-
position: absolute;
-
top: 25%;
-
left: 25%;
-
width: 50%;
-
height: 50%;
-
z-index:1002;
-
overflow: auto;
-
}
Bueno hoy vamos a armar un pequeño ejemplo de como con javascript podemos mostrar y ocultar una div. Tambien vamos a ver la forma de implementar prototype en nuestro codigo. Para entender mejor lo que es prototype.. ya que no vamos a explicar lo que es en este ejemplo.. pueden darse una vuelta por este articulo escrito por iGeek.
1º Este es nuestro codigo javascript sin prototype para mostrar una div:
-
<script type="text/javascript"><!--
-
function ShowDiv(id){
-
if(document.getElementById(id).style.display=='none'){
-
document.getElementById(id).style.display='';
-
}else{
-
document.getElementById(id).style.display='none';
-
}
-
}
-
// --></script>
2º Ahora lo primero q tenemos que hacer es incluir el js de prototype dentro de nuestro archivo html. De la siguiente manera:
-
<script src="prototype.js" type="text/javascript"></script>
3º Nuestro codigo con prototype nos quedaria algo asi:
-
<script type="text/javascript"><!--
-
function ShowDiv(id){
-
if($(id).style.display=='none'){
-
$(id).style.display='';
-
}else{
-
$(id).style.display='none';
-
}
-
}
-
// --></script>
La diferencia que vemos entre los 2 codigos seria el uso de la funcion $ con prototype, ya que esta nos simplifica escribir document.getElementById.
Espero que este pequeño ejemplo les sirva de algo. Les recomiendo que se den una vuelta por las siguientes paginas, van a poder encontrar mucho mas contenido de ajax, javascript y de este muy buen framework como en prototye.
- Un poco de Prototype.js - Parte 1
- Prototype Tips and Tutorials
- 32 Codigos Ajax y Javascript bastante interesantes
Por ultimo aca les dejo el ejemplo y el codigo de fuente final:
Jcrop es una libreria que junto a Jquery, nos permite cortar en tiempo real una seleccion de una imagen, muy util y muy facil de utilizar:
Como instalar e utilizar:
Paso 1: En nuestro archivo tenemos que colocar este codigo php para generar la imgen que vamos a recortar luego:
-
/*
-
*** Codigo Php
-
*/
-
if ($_SERVER['REQUEST_METHOD'] == 'POST')
-
{
-
$targ_w = $targ_h = 150;
-
$jpeg_quality = 90;</p>
-
$src = 'demo_files/raphaxx3.jpg'; //En este paso seleccionamos que imagen vamos a cargar para luego cortarla
-
$img_r = imagecreatefromjpeg($src);
-
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
-
-
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
-
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
-
-
imagejpeg($dst_r,null,$jpeg_quality);
-
-
exit;
-
}
-
?>
En este codigo podemos ver q en la linea $targ_w = $targ_h = 150; nos dice el tamaño que va a tener la imgan luego de ser recortada, es decir que si es mas grande o pequeña el sistema la va a redimensionar. Despues en la linea $jpeg_quality = 90; es la calidad de la imgane, por ultimo entre lo mas destacado tenemos $src = 'demo_files/raphaxx3.jpg'; esto es fundamental aca tenemos q seleccionar la ruta de la imgaen que luego vamos a cortar.
Paso2 : Incluimos los archivos JavaScript y css de la libreria entre las etiquetas <header>. Sin esto obviamente no va a funcionar:
Paso3: Tambien dentro de nuestro archivo en el <header> del archivo pegamos este codigo javascript para generar nuestro archivo para luego cortarlo:
-
<script type="text/javascript"><!--
-
jQuery(function(){
-
-
jQuery('#cropbox').Jcrop({
-
aspectRatio: 1,
-
onSelect: updateCoords
-
});
-
-
});
-
-
function updateCoords(c)
-
{
-
jQuery('#x').val(c.x);
-
jQuery('#y').val(c.y);
-
jQuery('#w').val(c.w);
-
jQuery('#h').val(c.h);
-
};
-
-
function checkCoords()
-
{
-
if (parseInt(jQuery('#x').val())) return true;
-
alert('Porfavor seleccione un area de la imagen.'); <! Configuramos msj de error si no seleccionamos que parte de la imagen vamos a cortar -->
-
return false;
-
};
-
// -->
-
// -->
-
// -->
-
// --></script>
Bueno esto es todo aca les dejo un ejemplo online y para que se descarguen el codigo de fuente.
Cuando yo me inicie a maquetar bajo los estandares de la W3C uno de los principales problemas que me pasaron, fue agregar archivos .swf en mi sitio, y que despues en la validacion no me tire error. Bueno lo solucione gracias a Emiliano un compañero de trabajo, que me paso un archivo .js llamado swfobject, capaz que muchos de ustedes lo conocen, pero si no aca les dejo como usarlo:
1º Lo primero que tenemos que hacer es descargar el archivo swfobject.js. Lo podemos conseguir desde aqui.
2º Despues de haber descargado el archivo .js lo que tenemos que hacer es incluirlo en las etiquetas header de nuestro sitio:
-
<script type="text/javascript" src="inc/swfobject.js"></script>
3º Ahora tenemos que colocar el codigo javascript con los parametros de nuestro archivo .swf
-
<script type="text/javascript">
-
var so = new SWFObject("archivo.swf", "Titulo", "613", "437", "0", " ");
-
so.addParam("wmode", "transparent");
-
so.write("nombre");
-
</script>
En este codigo js en la 1º linea del codigo creamos un nuevo archivo, el 1 parametro es root donde se encuentra el archivo .js, el 2 es el alt por si no carga el archivo, y los demas son la altura y anchura de nuestro archivo. En la 2º linea agregamos mas parametros como la forma de ver el video y en este caso para que sea transparente. Y en la ultima linea definimos un nombre que utilizaremos en el siguiente paso.
4º En este paso creamos una div, a la cual le podemos poner un background con una imagen por si no carga el video, y en ella cargara nuestro archivo .swf. En esta div usaremos como id="" el nombre que definimos en el paso anterior.
-
<div class="algo" id="nombre"></div>
Bueno espero que les sirva. Suerte!
Muchas veces en nuestros sitios tenemos imagenes como links, los cuales tienen un hover con otra imagen, bueno este preloader nos sirve para que cuando el usuario pase el mouse sobre el link, no tenga que esperar un rato hasta que se cargue la imagen del estado.
Esto sirve mucho en los menus, ya que cuando nosotros incorporamos este javascript en nuestro sitio, la imagen hover se carga junto con todo el sitio, entonces cuando pasamos sobre el link la imagen cargaria al instante.
Bueno este es el codigo a utilizar:
preloader.js
-
<script type="text/javascript">
-
Imagen1 = new Image();
-
Imagen1.src = "img/algo.jpg";
-
Imagen2 = new Image();
-
Imagen2.src = "img/algo2.jpg";
-
</script>
Lo que hace este codigo es en la linea 1º creamos la imagen, y en la 2º linea definimos el root con la imagen, y asi podemos crear la cantidad que queramos de imagenes para que haga un preloader.
Y para poder utilizar este codigo solamente tenemos que agregar esto dentro de las etiquetas header de nuestro sitio web.
-
<script src="preloader.js" type="text/javascript"></script>
Espero que les sea de utilidad en sus proyectos web. Saludos!
- Ajax (6)
- Aplicaciones web (2)
- Color (3)
- Comunicacion (1)
- Css (10)
- Firefox (3)
- Geek (1)
- Google (1)
- Herramientas2.0 (14)
- Hosting (1)
- Humor Geek (9)
- Iconos (22)
- iPhone (1)
- JavaScript (5)
- Libros (1)
- Linux (2)
- Musica (1)
- Navegadores (3)
- Noticias (2)
- Open Source (1)
- Photoshop (17)
- PHP (1)
- Programacion (3)
- Recursos web (15)
- SEO (1)
- Series TV (2)
- Sin categorÃa (2)
- Software (2)
- Tecnologia (1)
- Wallpapers (1)
- Web 2.0 (10)
- wGeek (4)
- Wordpress (5)
- Youtube (1)