AJAX'y image pop-ups in Plone 4

3
votes

Pipbox says it's "Plone 4 compatible way to do AJAX pop-ups in Plone 3".

http://plone.org/products/pipbox

Then, what's the proper way of doing jQuery Tools image pop-ups in Plone 4?

  • Scan HTML for images using selector

  • Install click handler

  • On click open the image in pop-up, using one of predefined sizes from plone.app.imaging

1
plone

1 Answers

11
votes

All pipbox really does is load plone.app.jquerytools support in Plone 3. In Plone 4, plone.app.jquerytools is built in.

plone.app.jquerytools loads jQuery Tools and some Plone-specific support for easy AJAX popups. That support allows you to associate AJAX popups with jQuery-selectable page components. See the PYPI page for full documentation.

A quick example: let's say that you want to set up lightbox-style popups for images in the content area using the preview-scale supplied by plone.app.imaging. JS to do this is:

jQuery( function($) {
  $('img.image-right, img.image-left, img.image-inline')
    .prepOverlay({
      subtype: 'image',
      urlmatch: '/image_.+$',
      urlreplace: '/image_preview'
      });
});

You would load this code by registering a javascript resource as a skin or browser layer, then add it to the portal_javascripts js resources.

The code:

  1. Sets up a function to load when the page is ready, with "jQuery" aliased to "$";
  2. Selects all image items in the page that use the styles used by the visual editor;
  3. Calls the prepOverlay routine (from plone.app.jquerytools) to associate them with overlays;
  4. Specifies that the overlays will be images, which means that size information may be determined from the loaded image;
  5. Does a little regular expression matching and replacing to pick up the image URL and convert it to a preview.