Scripts para mostar zooms de una galería de imágenes

Hablando en plata:

Unos scripts php+javascript que muestran en una web unas imágenes haciendo zooms al azar. A tamaño grande (por si un museo, PUB … quiere mostrar alguna galería de fotos en una pantalla) o a cualquier tamaño (como añadiendo en una web una foto pero en vez de una varias y con zooms.)

La parte php permite mantener actualizadas las fotos tomándolas automáticamente de la red social libre n-1.cc⁽¹⁾ .

Actualización: [2012-03-28] -> Añadidos:

Ejercicio 2: zooms pequeños
Ejercicio 3: zooms pantalla completa de fotos actualizadas de n-1.cc

Hace muchos años publiqué en Bulma como bajarse de forma automática fotos de la NASA para tenerlas de fondo del escritorio. Me pidieron que a ver si se podía hacer como el salvapantallas de los mac que hacían zooms con las imágenes. (Se llama Ken Burns effect)
El artículo quedó con el tiempo un poco obsoleto pero, la idea de los zooms de galaxias se me quedó pendiente y últimamente, compañeros del 15M de Palma me pedían una presentación de mis fotos de ojos.
No hay mejor forma para mí de presentar fotos, sobretodo de gran resolución y detalles, que exponerlas con zooms. Se ven magníficamente. Las fotos ganan en expresividad, en vistosidad, impacto … mirad vosotros mismos estas fotos de la NASA y la ESA:
Zooms en el espacio(2). (dadle tiempo que son imágenes gordas y necesita cargar 2 solo para empezar)
Zooms en el espacio (más tiempo)(3) Ejemplo de que más despacio puede ser más impactante e inspirador.
Así pues me puse a buscar y he encontrado un script libre de Will McGugan(4) que usa canvas con un script de la gente de google. Lo he editado un poco para que las fotos no se repitan con los mismos efectos cada ciclo y alternen los zooms in -zooms out en cada imagen.
Con eso ya me daba para la web de los zooms que habéis visto. Pero para los ojos lo que quería era que me hiciese los zooms de mis últimas imágenes con uno do varios determinados tags.
Una cosa como está: Ojos espectaculares(5).
O incluso como esta: Ojos espectaculares por características(6).
Si estas webs no os muestran nada, tener paciencia que los últimos días están trabajando en n-1(1) y a veces durante horas no se muestran los resultados de las búsquedas por etiquetas. Se necesitan generar los contenidos.
Otro ejemplo de la expresividad de mostrar fotos con zooms: Zooms de fotos de la Acampada Palma – 15M(7).
Veamos cómo se puede hacer en formato de ejercicios guiados.

Ahora empezamos con el caso más sencillo, usar el script que he redistribuido editado del de Will McGugan(8), 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.

Colocamos todas las fotos en una carpeta.

Colocamos en el mismo sitio estos dos scripts: jquery.min.js(9) y kenburns.js(10)

Creamos una página web que contenga el código 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 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>

‘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 1900×1080 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;

“>

Ejercicio 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(9) y kenburns.js(10)

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>

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 500×256.
Este ejemplo lo tengo funcionando en esta dirección(11). 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.

Ejercicio 3:
Mantener una serie de zooms a toda pantalla actualizados a las de la red social.
Explico un poco más el enunciado: Pondremos fotos en la red social libre N-1.cc con diferentes etiquetas y montaremos una serie de zooms a toda pantalla que irá tomando una a una las últimas fotos de la etiqueta que queramos.
Por ejemplo, zooms de 20 fotos de ojos con el tag showojosrene como el que se muestra aquí(12) .

Nos creamos una cuenta en N-1.cc(1). Creamos una galería y añadimos algunas fotos con la etiqueta o tag que deseemos, yo usé showojosrene. Recordad cambiarla en el código por la vuestra.

Abrimos una cuenta en un sitio donde nos dejen tener scripts/webs PHP y nos creamos una carpeta accesible desde internet.

Colocamos en esa carpeta estos dos scripts: jquery.min.js(9) y kenburns.js(10)

Creamos una página web PHP que contenga el código parecido al de la página 2 pero con algo de código PHP que ahora explicaré y la guardamos allá mismo por ejemplo como zooms.php .

Comprobamos que todo tenga los permisos correspondientes para que todo el mundo pueda verlo y ya está.

El código de mi web de zooms de ojos es este:
<!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>Espectaculo en los ojos</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:[

],
frames_per_second: 30,
display_time: 22000,
fade_time: 3000,
zoom: 3.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 = “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://saberlibre.net/images/galleries/galeria-zoom-ojos.php”>
<div style=”

                position: absolute;
                left: 50%;
                top: 50%;
                width: 1900px;
                height: 1024px;
                margin-top: -512px;
                margin-left: -950px;

“>
<canvas id=”kenburns” width=”1900″ height=”1024″>
<p>Your browser doesn’t support canvas.</p>
</canvas></div>
</a>
</body>
</html>

Ese código hace exactamente lo mismo que antes pero se puede ver que le faltan las imágenes. Hasta aquí no hay nada nuevo respecto a ejercicio 2. Ahora, para aprovechar la potencia del php hay que añadir entre los dos corchetes donde se colocaban las imágenes el siguiente código:
<?php
/*
Ken Burns effect php script to autmaticaly update the photos included in the effect with your last taged photos in your free social network.
Copyright (C) 2012 René Mérou http://h.says.it

It is distributed with a dual GPL>=3 and Affero licenses. Here is more info:

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.

Note that this web uses kenburns.js script with gpl 3 and Affero license and jquery.min.js scritp from google with gpl 3 license.
*/

function damecontenido($cadena, $taginicial, $tagfinal) // da solo el contenido de la primera proxima aparicion de la etiqueta
      {
        $contenido=strstr($cadena,$taginicial);
        $contenido=substr($contenido,strlen($taginicial));
        $fincontenido=strstr($contenido,$tagfinal);
        $contenido=substr($contenido,0,strlen($contenido)-strlen($fincontenido) );
    return $contenido;
}

// la dirección de n-1 para obtener la lista de fotos:

$url=”https://n-1.cc/pg/search?q=showojosrene&entity_type=object&limit=20&offset=0&search_type=tags”;

$fd = fopen ($url, “rb”);
if( !$fd )
                {
                        echo “no puedo abrir n-1.cc”;
                    } else {
$a=1;
$buffer=””;
while (!feof ($fd)){
    $a=$a+1;
    if ($a>15000) break;
    $buffer .= fgets($fd, 4096);
}
fclose ($fd);
$texto=strstr($buffer,'<div class=”search_listing_info”>’); // encuentra la primera foto
$textonext=$texto;
if ($texto!=””) {
  $a=0;
  $textofin=$texto;
  $contenidotabla=””;
  $contenidoennormal=””;
  while ($textofin !=””){
    $a=$a+1;
    $titulo=damecontenido($textofin,'<p class=”item_title”>’,'</p>’); //cuidado que es más que el titulo, enlace también
    $idImagen=damecontenido($titulo,’https://n-1.cc/pg/photos/view/’,’/’);
        $titulo=”https://n-1.cc/pg/photos/download/”.$idImagen;
    if ($titulo==$tituloanterior) {
        $a=$a-1;
        $textofin=strstr(strstr($textofin,”</div>”),'<div class=”search_listing_info”>’);
    } else {

      $tituloanterior=$titulo;
      $textofin=strstr(strstr($textofin,”</div>”),'<div class=”search_listing_info”>’);
      $contenidotabla=$contenidotabla.’”‘.$titulo.’”,’.” \n”;

    }
  }
  $textofinal = substr($contenidotabla, 0, -3).” \n”;

  print $textofinal ;
  }
  else {
    print “error: cadena de n-1 bacía, quizás si vuelve a probar …”;
  }
}

Analicemos ese pequeño código.
Primero lo que hace es arrancar el php indicándolo con <?php. Todo lo que sea a partir de ahora es ejecutado como programa php. Todo hasta encontrar el cierre: ?> . Recordar los que tengan experiencia que la explicación es sencilla para que sea fácil para alumnos de secundaria.
Después aparece un comentario sobre la licencia en inglés. Lo que dice es que es código liberado bajo licencia GPL3 o superior.
El código, antes de nada primero prepara la función que necesitará luego. La función simplemente le da un trozo de texto dentro de otro. De la cadena que le pasemos la función nos devuelve como resultado el contendido que esté entre el trozo inicial y el trozo final que le indiquemos.
Y ahora viene la interacción con el servidor de n-1. La variable $url guarda la dirección de la página web de n-1 a la que debemos pedirle los contenidos que tiene con el tag showojosrene con un límite de 20 resultados como máximo.
En la variable $buffer toma toda la respuesta del servidor de n-1 con el while para después sólo tomar la parte que nos interesa a partir de la palabra earch_listing_info.
Entonces, si hay algo es que n-1 nos ha dado algo útil, sino, a veces pasa que están haciendo pruebas o instalando nuevas versiones. En ese caso dira lo de error: cadena de n-1 bacía, quizás si vuelve a probar …
Dentro de ese algo, uno a uno se van mirando todos los items y tomando en la variable $titulo tras unos pasos la url de cada imagen para luego ir añadiéndolas a la variable $textofinal. Así tendremos la lista de fotos con comillas antes y después y una coma cada vez.
Antes de finalizar extrae del conjunto la ultima coma y salto de línea, o sea 3 carácteres y luego imprime la lista directamente dentro del script php de forma completamente transparente para el usuario. El usuario no ha visto el proceso y si mira el código de la web no aparece nada de php, solo la lista de fotos en su sitio dentro del javascript.
Podría haberlo hecho en menos pasos pero es el mismo código que luego usaré para hacer galerías. Prefiero hacer pocos cambios para que si se entiende uno, sea fácil entender todos los ejemplos.

El resultado se puede apreciar aquí(12) y si miráis el código fuente veréis que no muestra el código php.
Bueno, aquí acaba la tercera parte del artículo. De aquí a poco añado el resto de webs php mostradas y os lo explico. Incluido un repaso al scritp de will y la pequeña modificación añadida. Y contar algo de jsonp y xmlrpc. En realidad el código php es sólo una muestra para la gente de n-1 de como pueden ser de interesante para los usuarios estas posibilidades o incluso mejor con solo javascript en la web sin necesidad de php en el servidor debido a cosas como jsonp o xmlrpc. Pronto lo hablaremos…Lista de enlaces de este artículo:

http://n-1.cc

http://www.saberlibre.net/images/space/space-zooms.html

http://www.saberlibre.net/images/space/slow-space-zooms.html

http://www.willmcgugan.com/2011/2/26/ken-burns-effect-with-javascript-and-canvas

http://saberlibre.net/images/zooms-ojos.php

http://www.saberlibre.net/images/especialojos/galleries/galeria-zoom-ojos-tags.p

http://www.saberlibre.net/images/zooms-civismo.php

http://www.willmcgugan.com

http://www.saberlibre.net/images/jquery.min.js

http://www.saberlibre.net/images/kenburns.js

http://www.saberlibre.net/fotosIES3D/tree.html

http://www.saberlibre.net/images/zooms-ojos.php

Este post ha sido traido de forma automatica desde https://web.archive.org/web/20140625063149/http:/bulma.net/body.phtml?nIdNoticia=2630 por un robot nigromante, si crees que puede mejorarse, por favor, contactanos.

BULMA

Scripts para mostar zooms de una galería de imágenes

Deja una respuesta Cancelar la respuesta