tuxito    B U L M A   PDA    tuxito

Scripts para mostar zooms de una galería de imágenes  [2268, 0]

Por (H) el 23/03/2012 05:20 modificado el 23/03/2012 05:20
Página 2/4

Ahora empezamos con el caso más sencillo, usar el script que he redistribuido editado del de Will McGugan, para hacer los zooms de unas fotos en un directorio.

Ejercicio 1: (soy profe, así que ya que estoy, lo preparé sencillo por si algún alumno lo necesita)

Producir en una página web un efecto Ken Burns (serie de zooms) de fotos a toda pantalla usando javascript.

  1. Colocamos todas las fotos en una carpeta.
  2. Colocamos en el mismo sitio estos dos scripts: jquery.min.js y kenburns.js
  3. Creamos una página web que contenga el código que ahora explicaré y la guardamos allá mismo.
  4. Comprobamos que todo tenga los permisos correspondientes para que todo el mundo pueda verlo y ya está.

El código del ejemplo de los zooms espaciales es esté:

<!DOCTYPE HTML>
<html>
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      body {
        background-color: #000;
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        }
      html {
        overflow: hidden;
      }
    </style>
        <title>Espectáculo espacial</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="kenburns.js"></script>

        <script type="text/javascript">
            $(function(){
                $('#kenburns').kenburns({
                    images:[

'1p-537521main_earth_pacific_full.jpg',
'1-2006-10-b-full_H.jpg',
'1p-opo0638a_H.jpg',
'1-heic0706a_H.jpg',
'1-heic0805b_H1.jpg',
'1p-Uranus_Montage.jpg',
'1-abel-full_jpg.jpg','1p-Full_Disk_Jupiter1.jpg',
'1-heic0711a-2.jpg','1p-Full_Mars1.jpg',
'1-heic0901a_H1.jpg',
'1p-PIA03149.jpg',
'1-heic0514c_H.jpg','1p-Neptune_Full.jpg',
'1-heic0716a_H1.jpg',
'1-heic1011a_H1.jpg',
'1p-True_Mercury.jpg','carina2_hst_big.jpg',
'1-heic0615a.jpg',
'1-heic0716c_H1.jpg','2-VIIRS_4Jan2012-2.jpg',
'1-hubble20041215a.jpg',
'1p-True_Saturn.jpg',
'gcwide_eder_2000.jpg',
'm31_gendler_big.jpg',
'ngc1073_hst_3892.jpg',
'PIA15254_LMC2048.jpg',
'carinagigazoom_eso_big.jpg',
'helix_vista_4000.jpg ',
'm66_hst_big.jpg',
'PIA09561.jpg',
'ngc3370_hst_6031.jpg',
'sombrero_hst_3215.jpg',
'gcenter_hstspitzer_big.jpg',
'lh95_hst_big.jpg',
'm82_hst_big.jpg',
'NGC6946-Subaru-GendlerL.jpg'



                            ],
                    frames_per_second: 30,
                    display_time: 25000,
                    fade_time: 3000,
                    zoom: 2.5,
                    background_color:'#000000',
                    post_render_callback:function($canvas, context) {
                        // Called after the effect is rendered
                        // Draw anything you like on to of the canvas
                        
                        context.save();
                        context.fillStyle = '#000';
                        context.font = 'bold 14px sans-serif';
                        var width = $canvas.width();
                        var height = $canvas.height();                                                
                        var text = "NASA & ESA images, René Mérou";
                        var metric = context.measureText(text);
                        
                        context.fillStyle = '#fff';
                        
                        context.shadowOffsetX = 3;
                        context.shadowOffsetY = 3;
                        context.shadowBlur = 4;
                        context.shadowColor = 'rgba(0, 0, 0, 0.8)';
                        
                        context.fillText(text, width - metric.width - 8, height - 8);                        
                        
                        context.restore();                        
                    }
                });                
            });
            
        </script>
    </head>
    <body>
        
        <a href="http://h.says.it">
            <div style="
                
                position: absolute;
                left: 50%;
                top: 50%;
                width: 1900px;
                height: 1080px;
                margin-top: -540px;
                margin-left: -950px;

            ">
            <canvas id="kenburns" width="1900" height="1080">
                <p>Your browser doesn't support canvas.</p>
            </canvas></div>

        </a>
    </body>
</html>

El código también se puede ver directamente en el navegador pidiendo el código fuente de la página. Perfectamente modificable y usable. Aunque recordar que todo está bajo licencia libre dual GPL>=3 y Affero.

Un poco de explicación de lo que hace:

En las primeras líneas en verde se ve el inicio de la página web.

En la línea 7 se marca un fondo negro para la imagen. background-color: #000; En caso de que no se tengan más de los 1900x1080 pixels de resolución, el resto se mostrará en negro.

En las 18 y 19 se llaman los scripts necesarios para que funcione .

<script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="kenburns.js"></script>

y a partir de la 19 hasta la 93 se pone el script que irá llamando cada una de las imágenes para mostrarla

En las 25 - 56 se ponen las fotos que se desee mostrar: '1p-537521main_earth_pacific_full.jpg', ...
En la 61 se indica el refresco en imágenes por segundo que se desea: frames_per_second: 30,
en la 62 el tiempo de cada foto en milisegundos: display_time: 25000,
en la 63 el tiempo de pasar de una foto a otra con transparencia: fade_time: 3000,
en la 64 el zoom que llegará a hacer. por ejemplo 2.5 significa un x2,5.
en la 75 se ponen el texto que se desea que aparezca y en la 72 el tipo de letra, negrita y tamaño: context.font = 'bold 14px sans-serif';

En las líneas 97 a 111 se pone en marcha el canvas que ejecuta el script y muestra las imágenes en un div centrado en medio de la pantalla. En el div se centra la imagen y para eso necesitamos poner el tamaño que ocupará, líneas 102 y 103, y la mitad en las líneas 104 y 105. 

<div style="
                
                position: absolute;
                left: 50%;
                top: 50%;
                width: 1900px;
                height: 1024px;
                margin-top: -512px;
                margin-left: -950px;

            ">

 

Páginas: <<Ant.  1  2  3  4  Sig.>>