• Saltar al contenido principal
  • Saltar al pie de página
Zona DPW

Zona DPW

Formación y recursos para desarrolladores web

  • Inicio
  • Contenidos
  • Guías
  • Registrarse
  • Iniciar sesión

Caso práctico: lightbox de video en Genesis Portfolio Pro

Caso práctico donde veremos como añadir funcionalidad de lightbox mostrando los videos de un portfolio en una ventana modal.

enero 24, 2019 por -

¡Enhorabuena!

¿Quieres continuar con el siguiente curso de la lista?

AdelanteCerrar y permanecer aquí

Esta semana, preparando una nueva web, me he encontrado con la necesidad de realizar modificaciones en Genesis Portfolio Pro, el plugin para crear portfolio de proyectos que viene con muchos child themes de Genesis Framework.

El cliente quería que en caso de tratarse de un video, al hacer clic en la miniatura del proyecto, se mostrara el video de youtube en una ventana modal o lightbox, en lugar de acceder a la página del proyecto en si.

Para solucionarlo, he seguido los siguientes pasos, que en el video veréis con detalle:

  1. Descargar la librería Fancybox de jQuery para la funcionalidad de lightbox y copiar los archivos necesarios a nuestro tema
  2. Añadir Advanced Custom Fields y crear dos campos para los CTP portfolio, uno para indicar si es un video y otro para la url de youtube
  3. Modificar la plantilla archive-portfolio.php para incluir la librería jQuery y modificar le loop para detectar si es video y en ese caso modificar la url de destino de cada elemento.
Nota: En este ejemplo, el child theme utilizado era Business Pro, que ya traía un template para el portfolio propio que añadía funcionalidad para un filtro. Si el child theme que utilizas no contiene ese archivo, deberás copiar el que viene con el plugin Genesis Portfolio Pro, archive-portfolio.php, y modificar la copia en tu child theme.

Tutorial paso a paso

Este contenido está restringido para los suscriptores de la Zona DPW Premium.

Inicia sesión o registrate para ver este contenido

Video tutorial

En el video podrás ver los pasos dados para poder realizar los cambios detallados:

Este contenido está restringido para los suscriptores de la Zona DPW Premium.

Inicia sesión o registrate para ver este contenido

×

Etiquetado con: Zona DPW


#Casos prácticos#Custom Post Types#Genesis Framework

Footer

  • Blog
  • Newsletter
  • Podcast Freelandev
  • Tranquilidad WP
  • OsomPress
  • Contactar
© 2023· esther solà    ·    Aviso legal     ·    Política de privacidad

Acceder a la Zona DPW

¿Has perdido tu contraseña?

Utilizamos cookies para ofrecerte la mejor experiencia en nuestra web.

Puedes aprender más sobre qué cookies utilizamos o desactivarlas en los ajustes.

Zona DPW
Powered by  GDPR Cookie Compliance
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.