Jekyll One
This page is under construction. An updated version will be available soon.

To create image and video galleries, J1 Theme implements Justified Gallery as the main Gallery Module. Justified Gallery is a JQuery plugin to create responsive, infinite, and high-quality justified image galleries. J1 Theme combines the Gallery with lightboxes to enlarge the Gallery’s images and adds support for video-based content.

J1 Integration

The configuration file of the JustifiedGallery module is called j1_modules.yml. It includes the default values used for the initialization.

enabled:                      true
thumbnailPath:
rowHeight:                    120
maxRowHeight:                 false
...

Module sources

The sources for J1 JustifiedGallery are stored within the asset path of J1Template. You’ll find all necessary data files under /assets/themes/j1/justified_gallery:

Structure of the J1 JustifiedGallery application tree (base components)
├── css
│   ├── lightbox.css
│   └── lightbox.min.css
├── images
│   ├── close.png
│   ├── loading.gif
│   ├── next.png
│   └── prev.png
└── js
    ├── lightbox.js
    ├── lightbox.min.js
    ├── lightbox.min.map
    ├── lightbox-plus-jquery.js
    ├── lightbox-plus-jquery.min.js
    └── lightbox-plus-jquery.min.map

Configuration

The default values used for the initialization are taken from the module.

YAML Data File

The configuration file of the module is called j1_justified_gallery.yml. It includes the default values used for the initialization.

enabled:                      true
thumbnailPath:
rowHeight:                    120
maxRowHeight:                 false
sizeRangeSuffixes:
  lt100:                      _t
  lt240:                      _m
  lt320:                      _n
  lt500:
  lt640:                      _z
  lt1024:                     _b
thumbnailPath:
lastRow:                      nojustify
margins:                      1
border:                       -1
waitThumbnailsLoad:           true
randomize:                    false
filter:                       false
sort:                         false
selector:                     'a, div:not(.spinner)'
extension:                    '/\.[^.\\/]+$/'
refreshTime:                  200
refreshSensitivity:           0
rel:
target:
justifyThreshold:             0.90
cssAnimation:                 true
imagesAnimationDuration:      500
captions:                     true
captionSettings:
  animationDuration:          500
  visibleOpacity:             0.7
  nonVisibleOpacity:          0.0
                   true                  true

Gallery examples

Stet clita kasd, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Image Gallery and Lightbox2

Sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  <div id="j1_basic_gallery_lb" class="mb-4">
    <a href="/assets/images/gallery/images/justified_gallery/24096687789_c37d45712f_b.jpg"
       data-lightbox="basic-gallery-set"
       data-title="Peace of mind">
      <img alt="Peace of mind" src="/assets/images/gallery/images/justified_gallery/24096687789_c37d45712f_b.jpg"/>
    </a>
  ...
    <a href="/assets/images/gallery/images/justified_gallery/13824674674_ca1e482394_b.jpg"
       data-lightbox="basic-gallery-set"
       data-title="Deep sea">
      <img alt="Deep sea" src="/assets/images/gallery/images/justified_gallery/13824674674_ca1e482394_b.jpg"/>
    </a>
  </div>
  ...
  <script type="text/javascript">
    $(document).ready(function(){
      var justifiedGalleryConf = {
        rowHeight:            120,
        maxRowHeight:         false,
        lastRow:              'nojustify'
      };
      $("#j1_basic_gallery_lb").justifiedGallery( justifiedGalleryConf );
    });
  </script>

Image Gallery and LightGallery

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam

Accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  <div id="j1_basic_gallery_lg" class="mb-4">
    <a href="/assets/images/gallery/images/justified_gallery/24096687789_c37d45712f_b.jpg">
      <img src="/assets/images/gallery/images/justified_gallery/24096687789_c37d45712f_b.jpg"
           alt="Peace of mind" />
    </a>
  ...
    <a href="/assets/images/gallery/images/justified_gallery/13824674674_ca1e482394_b.jpg">
      <img src="/assets/images/gallery/images/justified_gallery/13824674674_ca1e482394_b.jpg"
           alt="Deep sea" />
    </a>
  </div>
  ...
  <script type="text/javascript">
    $(document).ready(function(){
      var gallery = $('#j1_basic_gallery_lg');
      var lightGalleryConf = {
        thumbnail:    true
      };
      var justifiedGalleryConf = {
        rowHeight:            120,
        maxRowHeight:         false,
        lastRow:              'nojustify',
        captions:             true,
        margins:              1,
        border:               -1,
        randomize:            false,
        waitThumbnailsLoad:   false,
        refreshTime:          250,
        refreshSensitivity:   0,
        cssAnimation:         false
      };
      $("#j1_basic_gallery_lg").justifiedGallery( justifiedGalleryConf ).on('jg.complete',
      function() {
        gallery.lightGallery( lightGalleryConf );
      });
    });
  </script>

Library Features

A common problem, for people who create sites, is to create an elegant image gallery that manages the various sizes and aspect ratio of images. Flickr and Google+ manage this situation in an excellent way, the purpose of this plugin is to give you the power of these solutions, with a new fast algorithm.

Initialization

The first step of initialization is to load the CSS data.

CSS load

  1. The CSS data for Lightbox is included by the CSS loader component of J1Template at the top of every page within the <HEAD> section:

Include the CSS
<!-- Styles for J1 JustifiedGallery -->
<link rel="stylesheet" href="/assets/themes/j1/justified_gallery/css/justifiedGallery.min.css">

JS load

As a second step the JavaScript gets loaded. The plugin only needs JQuery. Then you have only to include the JS portion of Justified Gallery’s files as the following:

  1. The Javascript portion of Lightbox is included by the JS loader component at the bottom of a page, before the closing </HTML> tag:

Include the Javascript
<!-- JS components for J1 JustifiedGallery -->
<script src="/assets/themes/j1/justified_gallery/js/justifiedGallery.min.js"></script>

HTML Markup

Justified Gallery accepts a standard format for a gallery: a series of links with a thumbnail inside, where each link leads to the original image.

<div id="my-gallery" >
  <a href="path/to/myimage1_original.jpg">
    <img alt="Title 1" src="path/to/myimage1_thumbnail.jpg"/>
  </a>
  <a href="path/to/myimage2_original.jpg">
    <img alt="Title 2" src="path/to/myimage2_thumbnail.jpg"/>
  </a>
  <!-- other images... -->
</div>

JS initialization

Now, you only need to call the plugin that will justify all the images, with the default options.

$("#my-gallery").JustifiedGallery();

Options

Omnis repudiandae est praesentium autem placeat aut ratione sit dolor provident. Nulla numquam animi distinctio consequuntur quam placeat adipisci impedit aspernatur. Odit cumque eos reprehenderit quos voluptatibus error ut eligendi necessitatibus quia expedita voluptate quis. Vel rem itaque nihil est quibusdam eaque. Ut ratione et sapiente repellendus dignissimos enim porro maiores.

Table 1. API options
Parameter Type Default Description

rowHeight

boolean

120

The preferred height of rows in pixel.

maxRowHeight

boolean

false

This option could be a false or negative value to keep it disabled. Could be a number (e.g 200) which specifies the maximum row height in pixel. Alternatively, a string which specifies a percentage (e.g. "200%" means that the row height can’t exceed 2 * rowHeight). Note that with this option can crop the images if they need to be higher to be justified.

sizeRangeSuffixes

hash

{}

Describes the suffix for each size range. By default other thumbnails are not searched.

To agree with the Flickr’s suffixes you should change it in the following way:

{'lt100':'_t', 'lt240':'_m', 'lt320':'_n', 'lt500':'', 'lt640':'_z', 'lt1024':'_b'}

The keys could be specified also as numbers (e.g. {512:'_small', 1024:'_big'} to specify the '_small' suffix for images which are less than 512px on the longest side, and '_big' for the bigger ones).

thumbnailPath

string

undefined

To configure a custom thumbnail selector rather than using sizeRangeSuffixes, to have more flexibility in some particular situations. The function will called giving the following arguments: the current path of the image, the width and the height of the image to show (after it has been resized), and the image element which can be used to get further information.

For example, to select the correct thumbnail changing only a suffix of the current filename (like we can done using sizeRangeSuffixes)

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

Remember that if this option is defined, sizeRangeSuffixes is not considered.

lastRow

string

nojustify

Decide to justify the last row (using justify) or not (using nojustify), or to hide the row if it can’t be justified (using `hide). By default, using nojustify, the last row images are aligned to the left, but they can be also aligned to the center (using center) or to the right (using right).

captions

boolean

true

Decide if you want to show the caption or not, that appears when your mouse is over the image.

margins

integer

1

Decide the margins between the images

border

integer

-1

Decide the border size of the gallery. With a negative value the border will be the same as the margins.

waitThumbnailsLoad

boolean

true

In presence of width and height attributes in thumbnails, the layout is immediately built, and the thumbnails will appear randomly while they are loaded.

randomize

boolean

false

Automatically randomize or not the order of photos.

filter

boolean

false

Can be: * false: for a disabled filter. * a string: an entry is kept if entry.is(filter string) returns true (see jQuery’s .is() function for further information). * a function: invoked with arguments (entry, index, array). Return true to keep the entry, false otherwise. see Array.prototype.filter for further information.

sort

boolean

false

Can be * false to do not sort. * a function to sort them using the function as comparator (see Array.prototype.sort()).

selector

string

'a, div:not(.spinner)'

Used to determines which are the entries of the gallery. Note that the entries of the gallery are always direct children of the gallery.

extension

string

/.[^.]+$/

Specify the extension for the images with a regex. Is used to reconstruct the filename of the images, change it if you need. For example /.jpg$/ is to detect only the ".jpg" extension and no more.

refreshTime

integer

250

The waited time before checking the page size. If the page width has changed the gallery layout is rebuilt.

refreshSensitivity

integer

0

Change in width allowed (in px) without re-building the gallery.

rel

string

na

To rewrite all the links rel attribute with the specified value. For example can be 'gallery1', and is usually used to create gallery group for the lightbox (e.g. Colorbox).

target

string

na

To rewrite all the links target attribute with the specified value. For example, if you don’t use a lightbox, specifying _blank, all the images will be opened to another page.

justifyThreshold

float

0.75

If 'available space' / 'row width' > 0.75 the last row is justified, even though the lastRow setting is 'nojustify'.

cssAnimation

boolean

false

Use or not css animations. Using css animations you can change the behavior changing the justified gallery CSS file, or overriding that rules.

imagesAnimationDuration

integer

300

Image fadeIn duration (in milliseconds).

captionSettings

string

{ animationDuration: 500, visibleOpacity: 0.7, nonVisibleOpacity: 0.0 }

Caption settings. To configure the animation duration (in milliseconds), the caption opacity when the mouse is over (i.e. it should be visible), and the caption opacity when the mouse is not over (i.e. it should be not visible).

Callbacks

Repellat enim magnam incidunt iusto omnis est aut ullam cumque. Tempore nihil sequi laborum earum dignissimos labore adipisci sit ea officia. Iusto minima omnis asperiores animi occaecati temporibus dolore excepturi. Est dicta aut ea laboriosam pariatur incidunt. Aut illum omnis corporis repellendus ab temporibus voluptatem necessitatibus.

Table 2. API Callbacks
Callback Description

jg.complete

Fired when the algorithm finished to create the gallery layout.

jg.resize

Fired when the algorithm finished to resize the gallery.

jg.rowflush

Fired when the a new row is ready.

Example for callback jg.complete
$('#gallery_id').justifiedGallery().on('jg.complete', function (e) {
  alert('on complete');
});

Commands

Sunt quia dolorem eligendi neque dolor ea expedita totam omnis doloremque vel quis nam. Nihil ullam qui omnis unde incidunt in velit aliquid inventore. Sit deleniti sed fuga similique pariatur fugit fugit exercitationem. Et omnis labore libero amet commodi velit voluptate exercitationem eligendi. Iusto qui magnam est nam quisquam optio vitae nesciunt totam est reiciendis.

Table 3. API Commands
Command Description

norewind

Call again justified gallery, but only the newest images will be justified. This command could be used for example with the infinite scroll. Remember that with norewind only the last images will be analyzed, so this means that any filter, sort or shuffle actions will only be done on the last entries. That is a great advantage in terms of performances, but pay attention in case you want a different behaviour.

destroy

Destroy the justified gallery instance. The images justification will be cleared.

Example for command norewind
$('#gallery_id').justifiedGallery('norewind');