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.
DEMOSTRACIÓ
Entrant en matèria, ací tens un parell d'exemples del que parla aquest article:
- Enllaç emergent a un video de Youtube.
- Enllaç emergent a una imatge.
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
Açò, a les imatges, es pot fer fàcilment instal·lant els dos mòduls de Drupal anomenats Colorbox i Colorbox 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 Colorbox 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 Colorbox 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="colorbox" 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
La part dels vídeos l'he fet amb una llibreria anomenada Lity i aquesta és la seua web, 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>
