En aquest xicotet article explique com m'he configurat fàcilment el meu portal Drupal per a poder obrir vídeos de Youtube i imatges de manera emergents amb finestres modals o popups amb GLightbox i amb Lity.
DEMOSTRACIÓ AMB GLIGHTBOX
Entrant en matèria, ací tens un parell d'exemples:
- Enllaç emergent a un video de Youtube.
- Enllaç emergent a una imatge png.
La idea d'afegir vídeos o imatges en finestres modals serveix per a que l'usuari no tinga moltes pestanyes obertes o no abandone la meua web. També facilita la navegació perquè és l'usuari, en definitiva, qui decideix si vol obrir o no una imatge o vídeo.
ENLLAÇOS EMERGENTS D'IMATGES DINS DELS ARTICLES DE LA PÀGINA
Per a tenir aquesta funcionalitat a Drupal, podem instal·lar els dos mòduls GLightbox i GLightbox Inline. Nomès cal instal·lar-ho, com qualsevol mòdul, i habilitar-ho al camp de les imatges (des de la part d'Administració + Estructura + Tipos de contingut).
Ara, quan accedim a qualsevol contingut que té el camp imatge, la imatge es veurà emergent si fem click, no té massa complicació.
També podrem afegir la particularitat del pop-up del GLightbox quan creem unes vistes des de la configuració de Views en qualsevol llistat (de tipus block o pàgina). Tampoc hi ha cap complicació. Amb GLightbox tenim moltes possibilitats de tenir fotos o una galeria de fotos.
Si no ho volem des de la configuració del camp imatge en un tipus de contingut concret o no volem des d'una View i el que volem és escriure el codi en línia en el cos de la notícia/pàgina, podrem fer-ho simplement afegint la classe colorbox com a atribut en l'etiqueta img d'una imatge de la següent manera:
<a class="glightbox-inline" href="url-de-la-imatge">text</a>
Un altre exemple seria aquest article del meu blog on tinc miniatures d'imatges i que si fem click es veuen les imatges en grandària normal.
ENLLAÇOS EMERGENTS DE VIDEOS AMB LITY
També podem obrir vídeos emergents amb la llibreria Lity, que també permet obrir vídeos de Vimeo, mapes de Google maps, etc... però jo de moment només faig servir enllaços a vídeos de Youtube. Pots descarregar Lity des de eixa url que et portarà al repositori Github oficial.
Adjunte un exemple de pàgina amb un enllaç a Youtube. Bàsicament la pàgina html seria així:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<meta name="description" content="">
<link href="dist/lity.css" rel="stylesheet"/>
</head>
<body>
<a href="www.youtube.com/watch?v=4jXaQ7pt2Ng" data-lity>Enllaç al video
<script src="vendor/jquery.js"></.script>
<script src="dist/lity.js"></.script>
<script src="dist/plugins/youtube/youtube.js"></.script>
</body>
</html>
