TIP JQPackeryContrib is not installed on Foswiki.org.

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

No such plugin packery

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula
Suspendisse ac urna. Sit amet mi ullamcorper vehicula
adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.
Sit amet mi ullamcorper vehicula lacinia vel, tellus
Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
Sit amet mi ullamcorper vehicula
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna.
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.
Fusce accumsan mollis eros. Pellentesque a diam sit amet mi

Etiam pellentesque maurislectus. adipiscing in, lacinia vel, tellus. Suspendisse ac urna.
Sit amet mi ullamcorper vehicula dapibus eu, fermentum et, dapibus sed, urna
Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

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

PackageForm edit

Author Michael Daum
Version 1.11
Release 29 Apr 2024
Description Gapless, draggable grid layouts
Copyright 2017-2024, MichaelDaum, All Rights Reserved
License GPL (GNU General Public License)
Home https://foswiki.org/Extensions/JQPackeryContrib
Support https://foswiki.org/Support/JQPackeryContrib
Repository https://github.com/foswiki/JQPackeryContrib
ExtensionClassification Interface and Visualisation
ExtensionType ContribPackage
Compatibility
IncompatibleWith
ImageUrl
DemoUrl http://
SupportUrl JQPackeryContrib
I Attachment Action Size Date Who Comment
JQPackeryContrib.md5md5 JQPackeryContrib.md5 manage 171 bytes 29 Apr 2024 - 10:36 MichaelDaum  
JQPackeryContrib.sha1sha1 JQPackeryContrib.sha1 manage 195 bytes 29 Apr 2024 - 10:36 MichaelDaum  
JQPackeryContrib.tgztgz JQPackeryContrib.tgz manage 84 K 29 Apr 2024 - 10:36 MichaelDaum  
JQPackeryContrib.zipzip JQPackeryContrib.zip manage 88 K 29 Apr 2024 - 10:36 MichaelDaum  
JQPackeryContrib_installerEXT JQPackeryContrib_installer manage 5 K 29 Apr 2024 - 10:36 MichaelDaum  
Topic revision: r4 - 29 Apr 2024, MichaelDaum
The copyright of the content on this website is held by the contributing authors, except where stated elsewhere. See Copyright Statement. Creative Commons License    Legal Imprint    Privacy Policy