Convert Figma logo to code with AI

miromannino logoJustified-Gallery

Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.

1,682
299
1,682
135

Top Related Projects

JavaScript image gallery for mobile and desktop, modular, framework independent

A customizable, modular, responsive, lightbox gallery plugin.

A touchable jQuery lightbox

:zap: Simple and easy to use lightbox script written in pure JavaScript

THE original Lightbox script (v2).

JavaScript image viewer.

Quick Overview

Justified-Gallery is a JavaScript library that creates a gallery with justified images. It adjusts image dimensions to create a visually appealing grid layout where all rows have the same height, similar to Flickr and Google Photos. The library is responsive and supports various customization options.

Pros

  • Easy to implement and customize
  • Responsive design that works well on different screen sizes
  • Supports lazy loading for improved performance
  • Integrates well with lightbox libraries for image viewing

Cons

  • May not be suitable for galleries with widely varying image aspect ratios
  • Limited built-in styling options, requiring additional CSS for advanced designs
  • Potential performance issues with very large galleries
  • Lacks advanced features like drag-and-drop reordering

Code Examples

  1. Basic initialization:
$('#gallery').justifiedGallery();

This code initializes the Justified Gallery on an element with the ID 'gallery'.

  1. Customizing row height and margins:
$('#gallery').justifiedGallery({
    rowHeight: 200,
    margins: 5
});

This example sets the row height to 200 pixels and the margins between images to 5 pixels.

  1. Enabling captions and applying a custom class:
$('#gallery').justifiedGallery({
    captions: true,
    lastRow: 'justify',
    cssAnimation: true,
    imagesAnimationDuration: 500,
    captionSettings: { animationDuration: 500, visibleOpacity: 0.7 },
    className: 'my-custom-class'
});

This code enables captions, justifies the last row, adds CSS animations, and applies a custom class to the gallery.

Getting Started

  1. Include the necessary files in your HTML:
<link rel="stylesheet" href="path/to/justifiedGallery.min.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.justifiedGallery.min.js"></script>
  1. Create a container for your gallery:
<div id="gallery">
    <a href="path/to/image1.jpg"><img src="path/to/thumb1.jpg" /></a>
    <a href="path/to/image2.jpg"><img src="path/to/thumb2.jpg" /></a>
    <!-- Add more images as needed -->
</div>
  1. Initialize the gallery in your JavaScript:
$(document).ready(function() {
    $('#gallery').justifiedGallery({
        rowHeight: 200,
        lastRow: 'nojustify',
        margins: 3
    });
});

This will create a basic justified gallery with a row height of 200 pixels, unjustified last row, and 3-pixel margins between images.

Competitor Comparisons

JavaScript image gallery for mobile and desktop, modular, framework independent

Pros of PhotoSwipe

  • Offers a full-screen gallery experience with touch gestures and smooth transitions
  • Includes built-in sharing functionality and fullscreen support
  • Highly customizable with extensive API and event system

Cons of PhotoSwipe

  • More complex setup and configuration compared to Justified-Gallery
  • Focuses on individual image viewing rather than grid layout
  • Larger file size and potentially higher performance impact

Code Comparison

Justified-Gallery initialization:

$("#gallery").justifiedGallery({
  rowHeight: 200,
  lastRow: 'nojustify',
  margins: 3
});

PhotoSwipe initialization:

var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
  index: 0,
  bgOpacity: 0.85,
  showHideOpacity: true
});
gallery.init();

Key Differences

  • Justified-Gallery focuses on creating a justified grid layout for images
  • PhotoSwipe provides a full-featured lightbox and gallery viewer
  • Justified-Gallery is better suited for displaying image grids, while PhotoSwipe excels at individual image viewing and interaction

Use Cases

  • Use Justified-Gallery for creating visually appealing image grids on websites
  • Choose PhotoSwipe for implementing interactive, full-screen image galleries with advanced features

A customizable, modular, responsive, lightbox gallery plugin.

Pros of lightGallery

  • More comprehensive feature set, including video support and social sharing options
  • Responsive design with touch and swipe support for mobile devices
  • Extensive plugin system for additional functionality

Cons of lightGallery

  • Larger file size and potentially heavier on resources
  • Steeper learning curve due to more complex configuration options
  • May be overkill for simple image gallery needs

Code Comparison

Justified-Gallery basic usage:

$("#gallery").justifiedGallery({
    rowHeight: 200,
    lastRow: 'nojustify',
    margins: 3
});

lightGallery basic usage:

$("#gallery").lightGallery({
    thumbnail: true,
    animateThumb: false,
    showThumbByDefault: false
});

Both libraries offer easy-to-use initialization, but lightGallery provides more options for customization out of the box. Justified-Gallery focuses on creating a justified layout, while lightGallery offers a full-featured lightbox solution with additional gallery functionality.

A touchable jQuery lightbox

Pros of Swipebox

  • Lightweight and focused on mobile-friendly touch interactions
  • Supports video content in addition to images
  • Easy to implement with minimal configuration required

Cons of Swipebox

  • Less flexible layout options compared to Justified Gallery
  • Not actively maintained (last update in 2016)
  • Limited customization options for gallery appearance

Code Comparison

Swipebox initialization:

$(document).ready(function() {
  $('.swipebox').swipebox();
});

Justified Gallery initialization:

$("#gallery").justifiedGallery({
  rowHeight: 200,
  lastRow: 'nojustify',
  margins: 3
});

Swipebox focuses on creating a simple, touch-friendly lightbox for images and videos, while Justified Gallery specializes in creating aesthetically pleasing, justified image layouts. Swipebox is easier to implement but offers fewer customization options. Justified Gallery provides more control over the gallery's appearance and layout but requires more configuration.

Swipebox is better suited for projects that prioritize mobile compatibility and need a quick, straightforward lightbox solution. Justified Gallery is ideal for projects that require a visually appealing, grid-based image layout with extensive customization options.

:zap: Simple and easy to use lightbox script written in pure JavaScript

Pros of baguetteBox.js

  • Lightweight and dependency-free, making it easier to integrate into projects
  • Supports touch gestures for mobile devices, enhancing user experience
  • Offers customizable animations and transitions for image display

Cons of baguetteBox.js

  • Limited to lightbox functionality, lacking the grid layout capabilities of Justified-Gallery
  • Fewer options for customizing the gallery appearance compared to Justified-Gallery
  • May require additional plugins or code for advanced image management features

Code Comparison

baguetteBox.js:

baguetteBox.run('.gallery', {
    animation: 'slideIn',
    noScrollbars: true,
    buttons: false
});

Justified-Gallery:

$('.gallery').justifiedGallery({
    rowHeight: 200,
    lastRow: 'nojustify',
    margins: 3
});

Both libraries offer simple initialization, but Justified-Gallery focuses on creating a grid layout, while baguetteBox.js is primarily for lightbox functionality. Justified-Gallery provides more options for customizing the gallery appearance, whereas baguetteBox.js offers animation and mobile-friendly features for image viewing.

THE original Lightbox script (v2).

Pros of Lightbox2

  • Focused on image viewing and navigation, providing a sleek lightbox experience
  • Lightweight and easy to implement with minimal setup required
  • Supports responsive design and touch gestures for mobile devices

Cons of Lightbox2

  • Limited to displaying images in a lightbox, lacks gallery layout functionality
  • Fewer customization options for image presentation and gallery appearance
  • May require additional plugins or code for advanced gallery features

Code Comparison

Lightbox2:

lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
});

Justified-Gallery:

$("#gallery").justifiedGallery({
  rowHeight: 200,
  lastRow: 'nojustify',
  margins: 3
});

Key Differences

Justified-Gallery focuses on creating visually appealing, justified image layouts, while Lightbox2 specializes in displaying individual images in a lightbox overlay. Justified-Gallery offers more control over gallery appearance and image arrangement, whereas Lightbox2 excels in providing a streamlined image viewing experience.

Justified-Gallery is better suited for creating responsive, grid-like image galleries with consistent spacing and alignment. Lightbox2 is ideal for enhancing image viewing capabilities on existing galleries or content, offering a simple way to display larger versions of images with navigation controls.

JavaScript image viewer.

Pros of ViewerJS

  • More comprehensive image viewing features, including zooming, rotating, and fullscreen mode
  • Supports a wider range of image formats, including SVG
  • Offers a more modern and customizable user interface

Cons of ViewerJS

  • Larger file size and potentially higher performance overhead
  • Less focused on gallery layout, primarily a viewer rather than a gallery organizer
  • May require more setup and configuration for basic gallery functionality

Code Comparison

ViewerJS:

const viewer = new Viewer(document.getElementById('images'), {
  inline: true,
  viewed() {
    viewer.zoomTo(1);
  },
});

Justified-Gallery:

$("#gallery").justifiedGallery({
  rowHeight: 200,
  lastRow: 'nojustify',
  margins: 3
});

Summary

ViewerJS offers a more feature-rich image viewing experience with advanced controls, while Justified-Gallery focuses on creating aesthetically pleasing, justified image layouts. ViewerJS is better suited for detailed image examination, whereas Justified-Gallery excels in presenting image collections in a visually appealing grid format. The choice between the two depends on whether the primary need is for image viewing capabilities or gallery layout optimization.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

Bower version npm version

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

3.8.1

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

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

3.5.4

  • Added the border option
  • Fixed some problems with waitThumbnailsLoad and infinite scroll

3.5

  • The default suffixes are all empty, to be simpler to understand. To have the previous suffixes, the following settings can be used:

    sizeRangeSuffixes : {
    	'lt100': '_t',
    	'lt240': '_m',
    	'lt320': '_n',
    	'lt500': '',
    	'lt640': '_z',
    	'lt1024': '_b'
    }
    
  • Now is possible to have entries with the structure:

    <div>
    	<a href="...">
    		<img src="..." />
    	</a>
    	<div class="caption">...</div>
    </div>
    
  • Fixed margins

  • The border of the entire gallery can be customized

  • Corrected bugs for the callbacks when waitThumbnailsLoad = false

3.4

  • Performance improvements
    • In presence of width and height attributes in thumbnails, and with the option 'waitThumbnailsLoad', the layout is immediately built, and the thumbnails will appear randomly while they are loaded.
    • Other code refactorings to be more performant
  • With nojustify, if there is only a row, it doesn't justify anything. The previous behaviour seems too like a bug than a feature.
  • Infinite scroll example with plain javascript to be more understandable.
  • Fixes some bugs with infinite scroll

3.3

  • No more crops

    • Removed some floating point approximations that caused some small crops
  • Initial opacity settings for the caption to allow them to be always visible

    • Can be also configured changing the less file, if one prefers CSS animations
  • All caption settings in a single object to be more compact

    captionSettings : { //ignored with css animations
    	animationDuration : 500,
    	visibleOpacity : 0.7,
    	nonVisibleOpacity : 0.0
    },
    
  • Justification formulas refactoring to be more maintainable

3.2

  • A gallery of div can be used instead of a
  • Fixed errors for the last rows
  • Option to use only css animations (i.e cssAnimation)
  • Without css animations
    • Configurable caption fadein/fadeout time (i.e. captionsAnimationDuration)
    • Configurable caption final opacity (i.e. captionsVisibleOpacity)
    • Configurable images fadein time (i.e. imagesAnimationDuration)
  • Configurable treshold that decides to justify the row also in presence of nojustify (i.e. justifyThreshold)

3.1

  • Improved the algorithm to reduce the image crops
  • Fixed errors with some jQuery versions
  • Fixed errors with fixed height
  • Settings checks and parsing
  • Added event jg.rowflush

3.0

  • Totally rewritten!
  • Row by row loading
    • The plugin doesn't wait that all the gallery thumbnails are loaded
    • A row is printed when the its thumbnails are available
    • Non-blocking layout creation
  • No more white spaces (If the gallery needs to load a bigger image, it first show the smaller and then replace it with the bigger)
  • Improved the algorithm for a better result
    • No more white pixels at the end of a row (bugfix)
    • Reduced a lot the image crops
      • Vertical centering
      • Proportional images enlargement looking the image aspect ratio
  • Improved the algorithm efficiency
    • No more extra tags or new elements added to create the layout
    • All the images remain in the DOM, they aren't deleted or created
      • Hence, each tag remains in the links and in the images
  • Added maxRowHeight option
  • Custom captions
  • Thumbnails randomization (randomize option)
  • Statefulness
    • can be called again changing only some settings
    • can be called again to update the layout (after add or remove of images)
  • Infinite scroll capable
  • Improved last row behavior
    • Last row option changed
      • justifyLastRow setting has been renamed to lastRow, and it accepts: 'justify', 'nojustify', 'hide'.
    • Option to hide the row if it is incomplete and cannot be justified
    • The plugin can justify also with lastRow = 'nojustify', if the free space is small.
  • Silent error handling
    • If a thumbnail doesn't exists, it is ignored in the layout (hided)
    • If the plugin needs an inexistent thumbnail, it maintains the previous one
    • Errors are still visible in the console
  • Loading spinner
    • Visible when a new row needs to be loaded
    • Pure CSS spinner
    • Configurable changing the CSS/Less
  • Project structure
    • Grunt to manage the build
    • Less
    • Tests
    • Javascript and CSS validation
    • CSS filename changed to be more standard
  • License changed to MIT
  • Improved the gallery size check to be less invasive
  • Fixed lightbox removal when the page is resized

2.1

  • Setting removed: 'usedSizeRange', now the plugin do it automatically
  • Setting behavior changed: 'extension', now it accept a regular expression. The old behavior still works, but is not safe.
  • New behavior: if an image defines the attribute data-safe-src, this is choice, no matter what the src attribute is. This can be used to avoid the problems with Photon or other services that resize the images, changing the image srcs.

2.0

  • Setting removed: 'lightbox', now can be done simply with the onComplete callback.
  • Added Setting: 'rel' to change all the links rel attribute.
  • Added Setting: 'target' to change all the links target attribute.
  • Setting name changed: 'complete' to 'onComplete'.
  • Setting name changed: 'sizeSuffixes' to 'sizeRangeSuffixes'.
  • Setting name changed: 'usedSuffix' to 'usedSizeRange'.
  • Added the CSS for the div that shows the Justified Gallery errors. Now can be changed, or hided.

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:

    • Node.js
    • Install Grunt with npm install -g grunt-cli.
    • Install Yarn with npm install -g yarn
  • Build:

    • yarn install to install all dependencies.
    • grunt debug to build the library only for testing (debug mode).
    • 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.

NPM DownloadsLast 30 Days