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

Por (H) el 23/03/2012 05:20 modificado el 23/03/2012 05:20
Página 4/4Ejercicio 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í .

Nos creamos una cuenta en N-1.cc. 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 y kenburns.js
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í 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...

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

Comentarios

No hay comentarios sobre este articulo.