Galería de fotos sencilla con HTML, CSS y JavaScript

En este caso vamos a hacer una simple galería de fotos para nuestra página web. Es muy fácil de hacer y muy sencilla de entender. El código está generado por mí al 100% sin haber copiado de ningún lado. Podéis copiar el código si queréis directamente pero es mejor que lo entendáis y lo modifiquéis a vuestro antojo. Se trata de una galería fotográfica con tres fotos. Una siempre se muestra en grande, cada tres segundos pasa a la siguiente foto, pero si hacemos click en una de las fotos pequeñas sale en grande la que hemos elegido.

Veamos el código HTML que debe ir en head:

Veamos el código CSS que debe ir en head:

#galeria{ border: 4px solid #424242; width: 600px; height: 510px; background-color: #D8D8D8;}
#grande{ border: 2px solid #6E6E6E; width: 556px; height: 346px; margin-left: 20px; margin-top: 20px;}
.pequenas{ border: 2px solid #6E6E6E; width: 170px; height: 108px; float: left; margin-top: 10px; margin-left: 19px;}

Veamos el código JavaScript que debe ir en head:

var fotos = ["foto1.jpg","foto2.jpg","foto3.jpg"];
var fotosP = ["fotop1.jpg","fotop2.jpg","fotop3.jpg"];
var fotosURL = ["url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto1.jpg)","url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto2.jpg)","url(file:///C:/Users/Eneko/Desktop/Cursillo_Javascript/Fotos/foto3.jpg)"];

function cargarFotos(){
 document.getElementById('grande').style.backgroundImage = "url(foto1.jpg)";
 for(fo=1;fo<=3;fo++){
  fo = parseInt(fo);
  document.getElementById('pequena'+fo).style.backgroundImage = "url("+fotosP[fo-1]+")";
 }
}
  
function rularFotos(){
 queFoto = document.getElementById('grande').style.backgroundImage;
 //alert(fotosURL[0]);
   
 if(queFoto == fotosURL[0]){
  document.getElementById('grande').style.backgroundImage = fotosURL[1];
 }else{
  if(queFoto == fotosURL[1]){
   document.getElementById('grande').style.backgroundImage = fotosURL[2];
     }else{
   document.getElementById('grande').style.backgroundImage = fotosURL[0];
  }
 }
 setTimeout(rularFotos,3000);
}
  
function cambiarFoto(num){
 document.getElementById('grande').style.backgroundImage = fotosURL[num]; 
}

En el body deberemos poner onLoad="cargarFotos();rularFotos()" para que se ejecuten las funciones.
Veamos el código HTML que debe ir en body:

Los nombres de carpetas, las rutas etc. hay que poner las de vuestro ordenador, evidentement los nombres de las fotos etc. también hay que cambiarlos. Os dejo un enlace del script completo con fotos incluidas.
http://www.eneko-bernaldo.site90.net/scripts/galeria.rar
Un saludo.

Hacer un virus de broma con JavaScript

Este es el código para hacer una pequeña broma a un amigo o familiar. Mediante JavaScript simulamos que el ordenador ha sido infectado por un troyano.

El código es el siguiente:
Dentro del head ponemos:

Dentro del body ponemos:

Ejemplo:

Si ya queréis trabajarlo mas y asustar de verdad podéis hacer algo parecido a esto:

http://pelicula300.net63.net/videos_humor/video_humor.html

Simplemente le he metido un sonido de Avast y además le he hecho un script que simula la eliminación de archivos del sistema.

Os pongo las imágenes del código que yo he hecho para que os hagáis a la idea y lo modifiquéis a vuestro gusto:

Un saludo.

Código HTML + JavaScript para usar la Webcam

He encontrado un script muy interesante para poder usar la Webcam mediante HTML y JavaScript.
El código es el siguiente:

En el head ponemos:

En el script de Javascript ponemos:

//Nos aseguramos que estén definidas
//algunas funciones básicas
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || function(){alert('Su navegador no soporta navigator.getUserMedia().');};
 
jQuery(document).ready(function(){
    //Este objeto guardará algunos datos sobre la cámara
    window.datosVideo = {
        'StreamVideo': null,
        'url' : null
    };
     
    jQuery('#botonIniciar').on('click', function(e){
        //Pedimos al navegador que nos de acceso a 
        //algún dispositivo de video (la webcam)
        navigator.getUserMedia({'audio':false, 'video':true}, function(streamVideo){
            datosVideo.StreamVideo = streamVideo;
            datosVideo.url = window.URL.createObjectURL(streamVideo);
            jQuery('#camara').attr('src', datosVideo.url);
        }, function(){
            alert('No fue posible obtener acceso a la cámara.');
        });
 
    });
 
    jQuery('#botonDetener').on('click', function(e){
        if(datosVideo.StreamVideo){
            datosVideo.StreamVideo.stop();
            window.URL.revokeObjectURL(datosVideo.url);
        };
    });
 
 jQuery('#botonFoto').on('click', function(e){
    var oCamara, 
        oFoto,
        oContexto,
        w, h;
         
    oCamara = jQuery('#camara');
    oFoto = jQuery('#foto');
    w = oCamara.width();
    h = oCamara.height();
    oFoto.attr({'width': w, 'height': h});
    oContexto = oFoto[0].getContext('2d');
    oContexto.drawImage(oCamara[0], 0, 0, w, h);
 
});
});

En el body ponemos:

    

        
        
        
    
    

        
Cámara
        
    
    

        
Foto
        
    
    

He encontrado el código en esta página web: http://variabletecnica.com/2012/09/30/acceso-a-la-camara-con-html5/ Ahí explican mejor todo.
Un saludo.