Videos in Lightbox anzeigen

— abgelegt unter: web2.0, How To

Ziel: einfaches Einbinden von Videos in die Plone Website

Wie gehts?

File hochladen: Als FileAttachment beim RichDocument zum Beispiel.

Im Text einen Link auf das File setzen und mit Style "showmovie" versehen.

Das ist es.

Was braucht es, damit das funktioniert?

1. Dem Editor sagen, dass er den Style "showmovie" anbietet.

Dazu in der Konfiguration unter Styles "showmoview|a|showmovie" eintragen

2. Eins der Javascript-Files ergänzen um:

jq('a.showmovie').prepOverlay({    
    subtype: 'ajax',
    urlmatch: '$',
    urlreplace: '/showmovie'
});

3. Eine View erstellen, die die Ansicht des Films in der Colorbox bestimmt. Dazu in einem der eigenen Produkte folgende Schritte vornehmen:

In browser/configure.zcml:

<browser:page
   name="showmovie"
   for="Products.ATContentTypes.interface.IATFile"
   class=".showmovie.ShowMovieView"
   permission="zope2.View"
   layer=".interfaces.IThemeSpecific"
/>

browser/showmovie.py anlegen:

from Products.Five import BrowserView
from Products.Five.browser.pagetemplatefile import ViewPageTemplateFile
from Products.CMFCore.utils import getToolByName

class ShowMovieView(BrowserView):
   template = ViewPageTemplateFile('templates/showmovie.pt')

   def __init__(self, context, request):
      BrowserView.__init__(self, context, request)
      self.url = self.context.absolute_url()
      self.width = 800
      self.height = 800
   def __call__(self):
      return self.template(self)

browser/templates/showmovie.pt anlegen

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:tal="http://xml.zope.org/namespaces/tal">
<body bgcolor="#ffffff" onLoad="window.document.movie.focus();"> 
<center>
   <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
      codebase="http://download.macromedia.com/pub/shockwave \
         /cabs/flash/swflash.cab#version=6,0,40,0"
      tal:attributes="HEIGHT view/height; WIDTH view/width" 
      id="movie">
      <PARAM tal:attributes="VALUE here/id" NAME=movie> 
      <PARAM NAME=quality VALUE=high>
      <PARAM NAME=bgcolor VALUE=#FFFFFF>
      <EMBED tal:attributes="src view/url;
        HEIGHT view/height; WIDTH view/width" 
        scale="default" quality=high bgcolor=#FFFFFF
	NAME="movie" ALIGN="" TYPE="application/x-shockwave-flash"	
        PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
      </EMBED>
   </OBJECT>
</center>   
</body>
</html>

voilà!

update 06.06.2011:

Es ist keine extra Javascript-Library mehr nötig. Mit 'prepOverlay' wird plone.app.jquerytools verwendet.
Siehe http://plone.org/products/plone.app.jquerytools

Attachments

showmovie.pt

Videos in Lightbox anzeigen

Wie gehts?

Was braucht es, damit das funktioniert?

Artikelaktionen