Por un desarrollo Sharepoint en el que me ha tocado participar por la empresa donde trabajo, se tuvo qeu hacer una integración de Fancybox con Flowplayer, JavaScripts para una galería de fotos en ventanas modales y un reproductor de videos respectivamente, ambos para desarrollos web. Personalmente ni Fancybox ni Flowplayer son santos de mi devoción, hubiera preferido optar por PrettyPhoto y algún otro reproductor de video en HTML5 .
El consultor que se está encargando de los desarrollos Sharepoint (y el responsable indirecto de esta publicación) me señaló que había un script llamado FancyPlayer que hacía la mencionada integración. El problema es que esta integración se hace con versiones algo desactualizadas de ambos script.
Con las versiones más actuales la integración en realidad es bastante directa.
Paso a paso:
1.- Agregar los siguientes estilos solamente para el ajuste:
| .flowplayer { margin: 1em auto; height: auto; text-align: center; } .flowplayer video { width: 90%; } .fancybox-nav { top: 35%; height: 30%; width: 40px; } .fancybox-next { right: -1.3em; } .fancybox-prev { left: -1.3em; } |
Aquí hay varios estilos que son para el ajuste de los botones de navegación en las galerías. Loss estilos importantes son los referentes al tamaño del contenedor flowplayer.
2.- Hacer que cada bloque de código que lleve la clase flowplayer (normalmente un div con el atributo class="flowplayer") especifique en el atributo style el ancho y alto del video (esos parámetros se pueden obtener usando Sharepoint).
3.- Agregar el siguiente código en el bloque $(document).ready( function(){ /* aqui */}); :
| $('.flowplayer').flowplayer({ swf: '/_layouts/15/js/flowplayer.swf' }); $('div.gallery div.photo a').fancybox({ scrolling: 'no', autoSize:true , helpers: { overlay: { locked:false}} }); |
Aquí lo importante es que los videos se desplegarán del tamaño que especifique el elemento contenedor.
Y sería. El resto es solamente referirse a la documentación de ambos plugins.
Esta integración no es exclusiva para Sharepoint, claramente la pueden extrapolar a desarrollos no-Sharepoint, y claramente pueden mejorarla.
No hay comentarios.:
Publicar un comentario