JQPackeryContrib

Gapless, draggable grid layouts

Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries.

See also JQueryMasonry.

Usage

JavaScript API

Configuring Packery is fairly easy. Simply attach the .packery() method to the wrapping container element in your jQuery script. Depending on the layout, you’ll most likely need to specify one option.

For layouts with elements that span multiple widths:

$('#wrapper').packery({ 
  itemSelector: '.grid-item',
  gutter: 10 
});

Foswiki integration

All containers classified as jqPackery will be processed by this plugin. Options can be specified using HTML5 data attributes.

<div class="jqPackery" data-item-selector=".grid-item">
   <div class="grid-item">...</div>
   <div class="grid-item">...</div>
   <div class="grid-item">...</div>
...
</div>

Examples

See more demos at http://packery.metafizzy.co/

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button. Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will not show up in the search results.

You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)

cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See https://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Dependencies

None

Change History

24 Apr 2024	disabled waitForImages by default as it defeats native lazy loading of images
18 Nov 2019	update to latest upstrea version of packery.js
27 Jul 2019	updated to latest upstream version of packery.js
27 Jul 2017	initial release