Pregunta sobre Easy FancyBox de Wordpress:

Use los botones de reproducci贸n interactivos (similar al mouse sobre)

Un usuario pregunt贸 馃憞

驴Existe una funci贸n JS que permita que el bot贸n de reproducci贸n cambie un estado similar al de un mouse similar al que presenta Youtube? En particular, no quer铆a usar el objeto iframe si fuera posible.

Prop贸sito:

Poder mostrar un bot贸n de reproducci贸n de video (con 2 estados) sobre una imagen vinculada a trav茅s de EFB. Esto permitir铆a, cuando el mouse sobre el estado = verdadero, cambiar la imagen del video de reproducci贸n. Aqu铆 hay un enlace de referencia: https://css-tricks.com/play-button-youtube-and-vimeo-api/

wB

Este tema fue modificado hace 3 a帽os por. Este tema fue modificado hace 3 a帽os por.

(@ravanh)

hace 3 a帽os

Hola,

Fancybox no cambia el aspecto de la p谩gina normal, por lo que no agrega botones ni efectos de deslizamiento. Pero puede agregarlos a su hoja de estilo (o campo CSS personalizado) usted mismo.

Algo como esto le dar铆a una clase CSS de aumento sobre enlaces de im谩genes elegantes:


/* pure css magnifying glass over fancybox links */
.fancybox.image {
    position: relative;
    display: inline-block;
}
.fancybox.image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    border-radius: 30px;
    height: 46px;
    width: 46px;
    margin: -25px 0 0 -30px;
    border: 4px solid #fff;
}
.fancybox.image::after {
    content: "";
    height: 9px;
    width: 18px;
    border-radius: 0 5px 5px 0;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 15px 0 0 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
}
.fancybox.image:hover::before {
    content: "+";
    color: #fff;
    line-height: 42px;
    font-size: 42px;
    text-align: center;
    text-indent: -1px;
}

… con signo + como efecto de desplazamiento …

La posici贸n de la lupa depender谩 de otras reglas CSS, como los m谩rgenes de la imagen, que pueden diferir seg煤n la alineaci贸n (izquierda / derecha / centro). Por lo tanto, tendr谩 que adaptarse para que se vea bien en su sitio.

(@wireb)

Hace 2 a帽os, 7 meses

Perd贸n por mi respuesta tard铆a respondiendo con respeto, gracias.

wB

Esta respuesta fue modificada hace 2 a帽os, 7 meses.

驴Solucion贸 tu problema??

0 / 0

Deja una respuesta 0

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *