Picture In Picture (lightbox/greybox) support for Plone
Project description
Introduction
PIP = Picture in Picture
pipbox = picture boxes in Plone
Products.pipbox provides lightbox / greybox / thickbox support in Plone. This allows lightbox style popups that may be loaded as images, AJAX html, or iframes.
The goal is that this support will be available via methods that wrap the Javascript implementation (currently ThickBox) so that it can change if necessary.
Site setup for pipbox is table-driven, with settings in the table allowing you to specify DOM elements via jquery selectors. These are usually going to be <a href… /> elements. You specify how the URL should be loaded (as an image, AJAX or iframe). You may also optionally supply a regular expression search/replace pair for the URL and additional arguments for the JS engine.
Let’s say, for example, that you want to make clicking on news item photos open a lightbox-style larger version of the image. To do this, you’ll need to specify:
A jquery style selector for a Plone element, e.g., “.newsImageContainer a”
“image” for the load method (“ajax” and “iframe” are other alternatives)
A regular expression search/replace to transform the href URL. In this example, we’re changing the URL to point to the preview-sized image. So, our search/replace pair is “/image_view_fullscreen” and “_preview”.
You could also specify height and width of the popup in a URL style argument. E.G., “&height=120&width=120”. These parameters may include anything supported by ThickBox.
Site setup for pipbox is table driven, with a lines field in portal_properties.pipbox_properties. In this table, each line is a specification, with the elements of the specification separated by “|” characters. So, all of the above will need to be a line like:
.newsImageContainer a|image|/image_view_fullscreen|_preview|&height=120&width=120
Tests
Setup the test framework:
>>> from zope.component import getMultiAdapter >>> from Products.Five.testbrowser import Browser >>> browser = Browser() >>> portal_url = 'http://nohost/plone'
We should already be installed, so there should be a product in the Products space:
>>> from Products import pipbox
And, quickinstaller should know about us:
>>> portal.portal_quickinstaller.isProductInstalled('pipbox') True
Property Sheet Installation
We’ll use a portal_properties property sheet to store site setup:
>>> 'pipbox_properties' in portal.portal_properties.objectIds() True
It’s selector_specs field should contain an automatic activation specification. Here’s what’s pre-installed:
>>> my_props = portal.portal_properties.pipbox_properties >>> my_props.selector_specs ('.newsImageContainer a|image|/image_view_fullscreen|_preview|',)
Stylesheet View
Popup windows require style support. We should have our stylesheet available as a view:
>>> view = getMultiAdapter((portal, app.REQUEST), name=u'pipbox.css') >>> mycss = view() >>> mycss.find('global settings needed for thickbox') > 0 True
For ease of interpolating plone style properties, it’s a dtml document, and should be interpreted as such:
>>> mycss.find('<dtml') == -1 True
And, it should be adapted to the Plone environment, so we should see Plone’s default type specs for use in the popup window:
>>> print mycss /* (do not remove this :) */ ... #TB_window { font: 69% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif; color: #333333; } ...
The stylesheet should be installed in the CSS registry:
>>> 'pipbox.css' in portal.portal_css.getResourceIds() True
Javascript Resource and View
We should have two items in the JS registry:
>>> jsreg = portal.portal_javascripts >>> ids = jsreg.getResourceIds() >>> '++resource++pipbox.js' in ids and 'pipboxinit.js' in ids True
Open the main JS code item as a resource:
>>> browser.open(portal_url+'/++resource++pipbox.js')
And, make sure it’s got ThickBox in it:
>>> print browser.contents $ = jq; <BLANKLINE> /* * Thickbox ...
We have initialization code for our settings in a view:
>>> view = getMultiAdapter((portal, app.REQUEST), name=u'pipboxinit.js')
This should contain the specifications from our propery sheet:
>>> print view() jq(document).ready(function(){ pb_init('.newsImageContainer a','image','/image_view_fullscreen','_preview','');});
Now, let’s try changing the property sheet, and seeing if we get the expected changes in the JS init view:
>>> newspecs = ( ... '.newsImageContainer a|image|/image_view_fullscreen|_preview|', ... '#portal-colophon a|iframe|||', ... '#siteaction-sitemap a|ajax|||') >>> my_props.manage_changeProperties(selector_specs = newspecs) >>> print view() jq(document).ready(function(){ pb_init('.newsImageContainer a','image','/image_view_fullscreen','_preview',''); pb_init('#portal-colophon a','iframe','','',''); pb_init('#siteaction-sitemap a','ajax','','','');});
Changelog
0.1 - Unreleased
Initial release
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distributions
Built Distribution
Hashes for Products.pipbox-0.1dev-py2.4.egg
Algorithm | Hash digest | |
---|---|---|
SHA256 | 41ff4266e05451ca85db0ff6670582759f5d503fc50dc91f4d2cb74493dfb979 |
|
MD5 | 4bce6086e26b67d1c0f17accb37f53b8 |
|
BLAKE2b-256 | 7a7db7c8c697862b277e1c4567dc56dae8b3695bfa64a9203f91a8706e059b87 |