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

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

Añadir en una página web un efecto Ken Burns (serie de zooms) de fotos pequeñas usando javascript.

Colocamos todas las fotos en una carpeta. La resolución debe estar acorde al tamaño final y al zoom.
Colocamos en el mismo sitio estos dos scripts: jquery.min.js y kenburns.js
Creamos una página web que contenga el código parecido casi igual al anterior pero con algún detalle cambiado que ahora explicaré y la guardamos allá mismo.
Comprobamos que todo tenga los permisos correspondientes para que todo el mundo pueda verlo y ya está.

El código de la web con pequeños zooms:

Primero iniciamos la web con algún código parecido a esto: (no tiene que ver con los zooms)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd"><html>

<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>El título que se desee</title>

Luego se sigue, antes del , con el código para el script que ejecutará los zooms.

<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:[
'peques/peque_DSCF9020.JPG',
'peques/peque_DSCF9023.JPG',
'peques/peque_DSCF9024.JPG',
'peques/peque_DSCF9025.JPG',
'peques/peque_DSCF9041.JPG',
'peques/peque_DSCF9026.JPG',
'peques/peque_DSCF9037.JPG',
'peques/peque_DSCF9043.JPG',
'peques/peque_DSCF9035.JPG'
                            ],
                    frames_per_second: 30,
                    display_time: 15000,
                    fade_time: 3000,
                    zoom: 2,
                    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 7px sans-serif';
                        var width = $canvas.width();
                        var height = $canvas.height();                                                
                        var text = "Alumnes Artà, 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 - 5, height - 5);                        
                        
                        context.restore();                        
                    }
                });                
            });
            
        </script>

Después se añade el fin de la cabecera, la web como se desee y allá donde se quieran los zooms se añade esto:

<center><canvas id="kenburns" width="500" height="256">
    <p>Your browser doesn't support canvas.</p>
</canvas></center>

Lo que llamará al script y pondrá unos zooms a tamaño 500x256.

Este ejemplo lo tengo funcionando en esta dirección. Aconsejo mirar el código fuente.

Para más detalles sobre el zoom o sobre como hacer zooms a pantalla completa centrados mirar una página antes.

El siguiente ejemplo será añadir las últimas imágenes con un determinado tag directamente desde el servidor de la red social n-1.cc para mantener zooms actualizados automáticamente.

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