Soporte » Temas y plantillas » Efecto Ken Burns en Slide Show

  • Resuelto Cristobal

    (@cristobal-paez)


    BUenos dias a todos!! Estoy intentando agregar el efecto Ken Burns en mi Slide Show. Pero la verdad que estoy BASTANTE PERDIDO!. Es cuestion codigos en el CSS o mas complicado? Si me señalan por donde investigar ya me apaño. MUCHAS GRACIAS!!!
    http://www.verbo10.com

Viendo 15 respuestas - 46 de 60 (de 67 total)
  • Cristobal

    (@cristobal-paez)

    FUNCIONAAAAAAAAAAAAAAA!A!A!A!!A!A!A!!A!!!!!

    (aunque tiembla la imagen…)

    SALUDOS MARVENTUS!!!! GRRACIASS; Y MIL GRACIAS!!!…espero las intrucciones!
    PD: la vibracion de la imagen solo ocurre en Firefox, en safari va perfecto! Ademas ahora puedo poner imagenes de cualquier tamañano y no se sale del contenedor!

    ¡Qué bueno que funcione!
    Respecto de las instrucciones, te comento que, como tuvimos que agregar el efecto “por encima” y por fuera del slider propiamente dicho, hay cosas que tienes que ajustar manualmente desde el código CSS.
    1. La duración del efecto: está especificada en estas propiedades:

    -webkit-transition-duration: 8s;
    -moz-transition-duration: 8s;
    -ms-transition-duration: 8s;
    -o-transition-duration: 8s;
    transition-duration: 8s;

    Si llegas a cambiar la duración en las opciones de la plantilla, también tendrás que cambiar estas propiedades. Por ejemplo, para una duración de 10.000 (ms) en las opciones, deberás cambiarlo a 10s.
    Yo intenté usar la variable de timeout del slider para el ken burns, pero no funcionó en la primera imagen (o sea, arrancaba recién en la segunda).

    2. Puedes cambiar la dirección del efecto de cada una de las diapositivas. Por ejemplo, para la diapositiva 2, el código que la regula es:

    .featured-post .slide-2 a img{
    	-webkit-transform-origin: top left;
    	-moz-transform-origin: top left;
    	-ms-transform-origin: top left;
    	-o-transform-origin: top left;
    	transform-origin: top left;
    }

    Ese código fija el inicio de la animación arriba a la izquierda (top left), pero puedes cambiarlo bottom right, o incluso a un valor numérico en pixels, puntos o picas.

    3. Vas a notar que para la diapositiva 1, no hay un código específico. Esto se debe al problema que te mencionaba en el punto 1. Lo que hice para resolverlo, fue asignar la dirección de la diapositiva 1 a todas las diapositivas mediante este código:

    .featured-post a img{
    	(...)
    	/* slide 1 */
    	-webkit-transform-origin: bottom left;
    	-moz-transform-origin: bottom left;
    	-ms-transform-origin: bottom left;
    	-o-transform-origin: bottom left;
    	transform-origin: bottom left;
    }

    pero como luego cada diapositiva siguiente (de las 2 a la 6) recibe sus propias reglas, por lo que el código genérico sólo afecta a la diapositiva 1. Esto es un poco complejo, pero básicamente tiene que ver con como funciona el código CSS (cascading style sheets, o hojas de estilo en cascada, es decir, de más general a más específico).

    4. Como decía, cada diapositiva en el slider recibe una clase css específica (menos la primera) con un número único en función del orden que siguen en la página. En el código CSS hay hasta 6 diapositivas programadas, por lo que si llegas a agregar más de 6, tendrás que crear reglas de estilo para ellas. Por ejemplo, si tu slider tuviera 7 diapositivas, tendrías que agregar el siguiente código:

    .featured-post .slide-7 a img{
    	-webkit-transform-origin: top right;
    	-moz-transform-origin: top right;
    	-ms-transform-origin: top right;
    	-o-transform-origin: top right;
    	transform-origin: top right;
    }

    Y fijar la dirección como más te guste.

    Creo que eso es todo. Si llego a recordar algo más, te mando otro mensaje.
    Ah si, lo del temblor tampoco pasa en Chrome. Se ve que a Firefox le cuesta el efecto, pero no debería suceder ya que supuestamente es compatible con las propiedades de transition (según el cuadro al menos).
    Saludos!

    Cristobal

    (@cristobal-paez)

    uufffff!!! trrreeemmmmendooo!!. No se como agradecerte, siempre intento echar una mano en el foro para devolver algo de lo que me han dado! Pude ayudar a algunos!.

    1-Sobre la vibración: ¿También te ocurre a ti?
    2- En Firefox, mi web del local host se ve mas grande pero cuando reviso las medidas con el Firebug son correctas. Pero la pagina original se ve perfecta. Quizás al hacer los cambios Ken BUrns en la web original la vibración desaparezca.
    4-En safari la barra gris WP del admin en la pag. principal se pone en blanco pero en los post reaparece. Ademas, las miniaturas del Slider demoran en cargarse o aparecen cuando pasas el cursor por encima. Cuando quito los cambios, todo vueve a la normalidad.

    VIva internet, los foros y los foreros!

    De nada. Me alegro que te sirviera y que hayas quedado satisfecho.
    Respecto de la vibración en Firefox, sí, a mí también me pasa, pero es bastante leve. No creo que tenga que ver con algo que hayamos hecho, sino probablemente con la propiedad -moz-transition (ya que sólo sucede en Firefox) y el hecho de que estas propiedades son relativamente nuevas. Estoy seguro que con el tiempo, y a medida que los navegadores vayan aceptando la propiedad transition sin prefijos, estas cosas irán desapareciendo.
    Ah, otra cosa. Noté que la descripción de cada imagen queda medio encima de la flecha de la derecha en el slider. Debe haber sido culpa mía eso, ya que yo te indiqué cómo modificar esa parte. Si lo querés arreglar, es con este código:

    .featured-post .entry-desc{
    	bottom:10px!important;
    }
    .featured-post h2.entry-title a{
    	bottom:130px;
    }

    Para ello, puedes reemplazar los valores que ya figuran en style.css o agregar este código entero en custom.css.

    No te olvides de marcar el hilo como resuelto.
    Saludos, ¡y que estés bien!

    Cristobal

    (@cristobal-paez)

    Marventus!!! buenos dias!. Modifique el mensaje y quiza sno leiste esta parte.

    4-En safari la barra gris WP del admin en la pag. principal se pone en blanco pero en los post reaparece. Ademas, las miniaturas del Slider demoran en cargarse o aparecen cuando pasas el cursor por encima. Cuando quito los cambios, todo vueve a la normalidad.

    Cuando publico todos los articulos a principio de mes el primer dia aparecen y desaparecen fotos pero al dia siguiente todo va como la seda. Quizas estos cambios “agitan el agua” pero pasaran?

    Hola, Cristobal. Efectivamente, no había visto tus modificaciones.
    ¿Lo de las miniaturas te pasa sólo en Safari o en Chrome también? Debe ser por lo que me comentaste de que estás usando imágenes más grandes que el tamaño del slider, pero se puede arreglar fácilmente.
    Respecto de la barra de WP, tendría que ver el código HTML. Propongo lo siguiente:
    Como los cambios al slider todavía están en tu localhost y no puedo acceder a esa versión, lo que tendríamos que hacer es que me mandes lo siguiente por mail:
    1. la ubicación exacta de tus imágenes del slider dentro de tu carpeta de WP wp-content/uploads;
    2. Un dump de tu base de datos local. Para ello, tienes que ingresar a phpMyAdmin a través de tu emulador de servidor (Wamp, Xampp, o el que fuere) y exportar tu base de datos local a un archivo txt o zip (mejor, ocupa menos).
    Te dejé mi dirección de correo en un comentario en la página Sömos. Por favor, borra el comentario una vez que obtengas mi correo. ¡Gracias!

    Cristobal

    (@cristobal-paez)

    Marventus, hago cick en Ctrl+U para que te muestre el código fuente pero no sucede nada.

    Ahí actualicé el mensaje. Recarga la página para verlo.

    Cristobal

    (@cristobal-paez)

    dame un min

    Cristobal

    (@cristobal-paez)

    Ya te lo mande, y borre la direc.

    No logro hacer funcionar la información que me mandaste. Me parece que lo que vamos a tener que hacer es que crees una cuenta de administrador temporaria en tu sitio online y subas los cambios que hemos hecho al sitio, pero con una ligera modificación para que sólo le aparezcan estos cambios a los administradores.
    Para ello, vamos a volver al punto 4. del tutorial inicial (en la página 1 de este hilo), y reemplazar esta línea que agregamos en functions.php:

    require_once('library/functions/user-functions.php');

    por esta:

    if ( is_user_logged_in() && current_user_can('manage_options') )
        require_once('library/functions/user-functions.php');

    Con ese cambio, puedes implementar el efecto en el sitio y sólo los administradores podrán verlo.
    Una vez que hayas hecho esto, mándame por mail la info de login del usuario temporario que hayas creado a la dirección de correo mía que ya tienes.

    Cristobal

    (@cristobal-paez)

    ok, dame un min.

    Cristobal

    (@cristobal-paez)

    listo, pero sale las imagenes en cascada.

    Trata borrando el cache. A mí me anda bien, es decir, cuando me logueo a mi sitio local, me muestra el slider con el efecto, y cuando me deslogueo, sin.
    Cuando entro a tu sitio online, no veo el efecto, y el slider funciona bien.

    Cristobal

    (@cristobal-paez)

    borre el cahce y nada…siguen la simagenes en cascada como la primera vez

Viendo 15 respuestas - 46 de 60 (de 67 total)
  • El debate ‘Efecto Ken Burns en Slide Show’ está cerrado a nuevas respuestas.