You are here: Home Blog Topics pipbox


Aug 26, 2009

Simple way to add lightbox/thickbox support to Plone 3 site

by Chris Crownhart — last modified Aug 26, 2009 12:15 PM

I've been on a constant quest to find a simple way to add lightbox support to a Plone 3 site. Thanks to Products.pipbox, it is easy.

On the old Core Software Group site, I downloaded thickbox and manually added the css and js files to the portal_css and portal_js registries.  It worked, but was kind of kludgy.

Thanks to Steve McMahon's Products.pipbox, it's clean and easy, and gives you a massive amount of flexibility and control.  Here's all I did:

  1. Added Products.pipbox to my eggs section of my buildout.cfg, then ran bin/buildout
  2. Installed pipbox via quickinstaller
  3. pipbox adds a property sheet to portal_properties, which for now, you have to edit via the ZMI
  4. I added the following to /portal_properties/pipbox_properties -> selector specs:
    • {type:'overlay',subtype:'image',selector:'img.image-right,img.image-left,img.image-inline',  urlmatch:'/image_.+$',urlreplace:''}

  5. That's it.  Now our portfolio page uses the lightbox popups to display screenshots of Plone sites we have built.

Next up:

  1. Figure out how to control the position of the popup box.
  2. Figure out how to take advantage of AJAX form support in pipbox.
  3. Figure out how to implement AJAX tabs using pipbox.
Copyright © 2003-2018 Core Software Group | 303/809-1001 | Fort Collins, Colorado | All rights reserved.