Justify first instead of last row when odd number of images

[godfatherjohn]

First of all, thank you very much for this marvellous plugin! It comes in very handy and clearly does the job!

This is a feature request.

Currently, when justify is enabled and the number of images is odd, the last image is displayed big. Example:

| 1st image | | 2nd image|
| T h i r d _____ i m a g e |

The thing is, it would be much nicer to display the first image bigger and the others smaller, hence the other way around.

| F i r s t _____ i m a g e |
| 2nd image | | 3rd image|

[clanmills]

I agree with you, @godfatherjohn. This is very good work by @miromannino

I have a patch (below) to enable you to invoke the "last-row" code on any gallery line. You request this with the code class="end-of-row" on the a object:

    <div id="liveDemo">
        <a href="/Justified-Gallery/photos/24096687789_c37d45712f_b.jpg" class="end-of-row">
            <img alt="Peace of mind" src="/Justified-Gallery/photos/24096687789_c37d45712f_m.jpg"/>
        </a>
        
        <a href="/Justified-Gallery/photos/23753792354_bd75d8dabc_b.jpg">
            <img alt="Abu Dhabi" src="/Justified-Gallery/photos/23753792354_bd75d8dabc_m.jpg"/>
        </a>
    </div>

Here's my patch $ diff jquery.justifiedGallery.js jquery.justifiedGallery.orig.js Usual excuses and guarantees: it works for me! https://clanmills.com/2023/Runs/CaesarsCamp/

@miromannino Please consider refining/polishing/integrating this capability into a future release of your library.

369d368
<    * @param endOfRow  undefined or false for normal behavior. endOfRow = true to pack and display row.
372c371
<   JustifiedGallery.prototype.prepareBuildingRow = function (isLastRow, hiddenRow,endOfRow) {
---
>   JustifiedGallery.prototype.prepareBuildingRow = function (isLastRow, hiddenRow) {
382c381
<     if (hiddenRow || ((isLastRow||endOfRow) && this.settings.lastRow === 'hide' && !justifiable)) {
---
>     if (hiddenRow || (isLastRow && this.settings.lastRow === 'hide' && !justifiable)) {
396c395
<     if ((isLastRow||endOfRow) && !justifiable && this.settings.lastRow !== 'justify' && this.settings.lastRow !== 'hide') {
---
>     if (isLastRow && !justifiable && this.settings.lastRow !== 'justify' && this.settings.lastRow !== 'hide') {
433c432
<   JustifiedGallery.prototype.flushRow = function (isLastRow, hiddenRow,endOfRow) {
---
>   JustifiedGallery.prototype.flushRow = function (isLastRow, hiddenRow) {
437,438c436,437
<     buildingRowRes = this.prepareBuildingRow(isLastRow, hiddenRow,endOfRow);
<     if (hiddenRow || ((isLastRow||endOfRow) && settings.lastRow === 'hide' && buildingRowRes === -1)) {
---
>     buildingRowRes = this.prepareBuildingRow(isLastRow, hiddenRow);
>     if (hiddenRow || (isLastRow && settings.lastRow === 'hide' && buildingRowRes === -1)) {
448c447
<     if ((isLastRow||endOfRow) && (settings.lastRow === 'center' || settings.lastRow === 'right')) {
---
>     if (isLastRow && (settings.lastRow === 'center' || settings.lastRow === 'right')) {
473c472
<     if (!isLastRow || (this.buildingRow.height <= settings.rowHeight && buildingRowRes) || endOfRow) {
---
>     if (!isLastRow || (this.buildingRow.height <= settings.rowHeight && buildingRowRes)) {
794d792
<       var endOfRow = $entry[0].classList.contains('end-of-row');
804d801
<         var hidden = this.settings.maxRowsCount > 0 && this.rows === this.settings.maxRowsCount;
807c804
<           this.flushRow(false, hidden,false);
---
>           this.flushRow(false, this.settings.maxRowsCount > 0 && this.rows === this.settings.maxRowsCount);
813,814d809
<         } else if ( endOfRow ) { // force endOfRow
<           this.flushRow(false, hidden,endOfRow);
823c818
<       this.flushRow(true, false,false);
---
>       this.flushRow(true, this.settings.maxRowsCount > 0 && this.rows === this.settings.maxRowsCount);