Interactive Playground

Adjust the settings below to try out the different features of Mosaic Gallery. Click the 'Apply' button to apply the changes. The corresponding config can be seen in the 'Generated Config' tab.

General Options

Gallery Width: 100%

Number of images: 30

Margin X (px): 10

Margin Y (px): 10

Hover EffectNoneScaleLiftGrayscale

Show Image Index

Target Row Height: 250px

Height Tolerance: 25%

Row DeviationGrowShrinkAuto

Last Row Height Tolerance: 50%

Last Row JustificationLeftRightCenterNoneHide

Target Column Width: 300px

Target Column Number: 0

Column DeviationGrowShrinkAuto

Row Skip Fraction: 50%

{
  "hoverEffect": "none",
  "layout": {
    "type": "justified",
    "targetRowHeight": 250,
    "heightTolerance": 0.25,
    "rowDeviation": "auto",
    "lastRowHeightTolerance": 0.5,
    "lastRowJustification": "center",
    "margin": [
      10,
      10
    ]
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30