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/theme/j1/justified_gallery
:
├── css │ ├── lightbox.css │ └── lightbox.min.css ├── images │ ├── close.jpg │ ├── loading.gif │ ├── next.jpg │ └── prev.jpg └── 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/image/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/image/gallery/images/justified_gallery/24096687789_c37d45712f_b.jpg"/>
</a>
...
<a href="/assets/image/gallery/images/justified_gallery/13824674674_ca1e482394_b.jpg"
data-lightbox="basic-gallery-set"
data-title="Deep sea">
<img alt="Deep sea" src="/assets/image/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/image/gallery/images/justified_gallery/24096687789_c37d45712f_b.jpg">
<img src="/assets/image/gallery/images/justified_gallery/24096687789_c37d45712f_b.jpg"
alt="Peace of mind" />
</a>
...
<a href="/assets/image/gallery/images/justified_gallery/13824674674_ca1e482394_b.jpg">
<img src="/assets/image/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
-
The CSS data for Lightbox is included by the
CSS loader
component of J1Template at the top of every page within the<HEAD>
section:
<!-- Styles for J1 JustifiedGallery -->
<link rel="stylesheet" href="/assets/theme/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:
-
The Javascript portion of Lightbox is included by the
JS loader
component at the bottom of a page, before the closing</HTML>
tag:
<!-- JS components for J1 JustifiedGallery -->
<script src="/assets/theme/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
Nihil sunt facilis et consequatur. Voluptatem culpa molestiae voluptate quia ipsam fuga neque consequatur dolor dolore dicta sequi. Quia et rerum tempora minima et tempora ex voluptatum. Voluptas exercitationem doloremque cumque ipsum eos itaque. Neque sit qui qui dolor molestias nobis eum architecto aperiam ea.
Parameter | Type | Default | Description |
---|---|---|---|
| boolean |
| The preferred height of rows in pixel. |
| boolean |
| This option could be a false or negative value to keep it disabled. Could be a number (e.g |
| 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:
The keys could be specified also as numbers (e.g. |
| string |
| To configure a custom thumbnail selector rather than using For example, to select the correct thumbnail changing only a suffix of the current filename (like we can done using
Remember that if this option is defined, |
| string |
| Decide to justify the last row (using |
| boolean |
| Decide if you want to show the caption or not, that appears when your mouse is over the image. |
| integer |
| Decide the margins between the images |
| integer |
| Decide the border size of the gallery. With a negative value the border will be the same as the margins. |
| boolean |
| In presence of width and height attributes in thumbnails, the layout is immediately built, and the thumbnails will appear randomly while they are loaded. |
| boolean |
| Automatically randomize or not the order of photos. |
| boolean |
| Can be: * |
| boolean |
| Can be * |
| string |
| Used to determines which are the entries of the gallery. Note that the entries of the gallery are always direct children of the gallery. |
| 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 |
| integer |
| The waited time before checking the page size. If the page width has changed the gallery layout is rebuilt. |
| integer |
| Change in width allowed (in px) without re-building the gallery. |
| string | na | To rewrite all the links |
| string | na | To rewrite all the links |
| float | 0.75 | If 'available space' / 'row width' > 0.75 the last row is justified, even though the |
| 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. |
| integer | 300 | Image fadeIn duration (in milliseconds). |
| string |
| 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
Aperiam rerum molestiae sunt fuga incidunt cumque dolores sed debitis esse. Enim eum dolorum culpa quos sed voluptas pariatur. Quo sed vel est sunt sed non. Quo veniam aliquam aperiam esse numquam expedita et voluptatem facilis. Recusandae molestiae non iure quasi.
Callback | Description |
---|---|
| Fired when the algorithm finished to create the gallery layout. |
| Fired when the algorithm finished to resize the gallery. |
| Fired when the a new row is ready. |
jg.complete
$('#gallery_id').justifiedGallery().on('jg.complete', function (e) {
alert('on complete');
});
Commands
Sed est aliquam rerum voluptatem. Voluptas at minus nostrum nobis et qui beatae optio est. Atque ea expedita omnis vitae qui nostrum cum qui odit officiis fuga. Officiis numquam qui et. Facilis fuga fugit minima earum esse quasi enim dicta totam enim.
Command | Description |
---|---|
| 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 the justified gallery instance. The images justification will be cleared. |
norewind
$('#gallery_id').justifiedGallery('norewind');