Justified-Gallery : jQuery Justified Grid Plugin

Justified Gallery is a JavaScript library that allows you to create an high quality justified gallery of images.

This is a common problem for people who create websites: you have a series of images to display, but you are not sure how to arrange them in an elegant way. Important websites such as 500px, Flickr, or Google display images in an excellent way, justifying them similarly to brick wall. Justified Gallery will give you the power to do that too.

Justified Gallery is a professional and open source library that even 500px, one of the best photography social network, chose for displaying their images!

Release History

4.0.0-alpha

• Added support for SVG images
• .entry-visible renamed to .jg-entry-visible to avoid too generic css classes
• Various fixes

3.7

• Compatible with AMD and CommonJS formats using Universal Module Definition pattern (examples provided for Webpack, Browserify, and AMD/RequireJS)
• $.prop() changed to $.attr() because it was creating problems with Foundation
• The library could now be used without necessarily defining it as jQuery plugin. But it still requires jQuery to provide a better browser compatibility.

3.6.5

• For more flexibility, option imgSelector to select the image, given an image entry (e.g. a figure or a div)
• $.attr() changed to $.prop() for better compatibility
• Right to left option
• Prevent gallery height collapse when the page is resized and keep the scroll position
• Avoid width check in case the gallery is not visible

3.6.4

• semplified the possibility to have a gallery of <figure>.

3.6.3

• Added in thumbnailPath an extra parameter which specify the current image. In this way properties of that image could be read
• Fixed bugs for filter when used specifying a function
• Fixed bugs for filter when norewind is used
• Performance improvements in case of norewind
• Changed the selector behaviour. Only direct children of the gallery can be choose as gallery entry.
• Fixed bug for maxRowHeight

3.6.2

• cssAnimation = true as default. It’s time to move to the future and leave IE in the past.
• fixed cssAnimation
• scrollbar existence check to avoid image resizing flickering
• The boxes could now be configured to have a background color to be visible with waitThumbnailsLoad = false.
• removed the fixedHeight option since now this behaviour can be replicated using maxRowHeight.
• The last row height will be calculated as the average row height of all the other rows. Before the last row height was always following the rowHeight option, that could be smaller than the effective height of all the other rows. For example: a gallery of images of 100x100px in a container of 950px, where rowHeight = 100. That gallery would contain 9 pictures for each row, and the extra space used for justification. Each row will have approximately an height of 105px after the justification. In this example the last row height would be 105px, where in the past it would usually be 100px if not justified.
• other bugfixes

3.6.1

• bugfixes

• lastRow option can be 'nojustify', which is the same as 'left', or it can be 'justify', 'center', 'right' or 'hide'.

• refreshSensitivity option, to configure the change in width allowed (in px) without re-building the gallery

• thumbnailPath to configure JG with a custom thumbnail selector, e.g. we want to do select the correct thumbnail changing only a suffix of the current filename

   $("#myGallery").justifiedGallery({  	thumbnailPath: function (currentPath, width, height) {  		if (Math.max(width, height) < 250) {  		    return currentPath.replace(/(.*)(_[a-z]+)(\..*)/, "$1_small$2");  		} else {  		    return currentPath.replace(/(.*)(_[a-z]+)(\..*)/, "$1_medium$2");  		}  	}  }); 

3.6

• Sort (works also with infinite scroll)

• Filter (works also with infinite scroll)

• Randomize images now works also with infinite scroll

• Text entries (i.e. without images) support

• Destroy method

• maxRowHeight could be also a percentage

• configurable sizeRangeSuffixes. e.g. to have only thumbnails and big images it could be:

   sizeRangeSuffixes : {  	500: '_t',  	2000: '_m'  } 

• Configurable entry selector

• Code refactoring

Contributing

Important notes

Please don't edit files in the dist subdirectory as they are generated via Grunt. You'll find source code in the src subdirectory.

Code style

Regarding code style like indentation and whitespace, follow the conventions you see used in the source already.

Modifying the code

• Prerequisites:

  • Ensure that you have the latest Node.js and npm installed.
  • Test that Grunt's CLI is installed by running grunt --version. If the command isn't found, run npm install -g grunt-cli. For more information about installing Grunt, see the getting started guide.
  • Ensure that you have Bower installed. If not, install it using npm install -g bower.

• Steps:

  • Fork and clone this repository.
  • Open a terminal and change the current directory to the cloned folder.
  • Run npm install to install all dependencies (including bower and Grunt).
  • Run bower install to install all the dependencies needed for the tests.
  • Run grunt debug to build the library only for testing (debug mode).
  • Run grunt to build this project in release mode.

Submitting pull requests

• Create a new branch, please don't work in your master branch directly.
• Add failing tests for the change you want to make.
• Fix stuff.
• Ensure that the written tests don't fail anymore, as well as the other tests.
• Update the documentation to reflect any changes.
• Push to your fork and submit a pull request.