FLEXIContent glightbox item-gallery.php

item-gallery.php

<?php

$galleryFieldName = 'galleryFieldName';
$galleryfield_id = 99;

FlexicontentFields::getFieldDisplay( $item, "$galleryFieldName" );

if ( FlexicontentFields::getFieldDisplay( $item, "$galleryFieldName" ) != "" ) {

  ?>
<div class="masonry js-masonry">
  <div class="masonry__loader" aria-hidden="true">
    <svg class="icon icon--md icon--is-spinning" viewBox="0 0 32 32">
      <g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" stroke="currentColor" fill="none">
        <circle cx="16" cy="16" r="15" opacity="0.4"></circle>
        <path d="M16,1A15,15,0,0,1,31,16" stroke-linecap="butt"></path>
      </g>
    </svg>
  </div>
  <ul class="masonry__list js-masonry__list">
    <?php

    $fvals = $item->fieldvalues[ $galleryfield_id ];
    $lightGallery = $item->fields[ "$galleryFieldName" ];
    $largePic = $lightGallery->thumbs_src[ 'large' ];
    //$originalPic = $lightGallery->thumbs_src['original'];
    $mediumPic = $lightGallery->thumbs_src[ 'medium' ];
    $smallPic = $lightGallery->thumbs_src[ 'small' ];
    $thumbPic = $lightGallery->thumbs_src[ 'backend' ];

    for ( $i = 0; $i < count( $largePic ); $i++ ):
      $v = JArrayHelper::getValue( $fvals, $i );
    if ( @unserialize( $v ) !== false || $v === 'b:0;' )$v = unserialize( $v );


    ?>
    <?php

    $dataSubTitle = '';
    $dataSubDesc = '';
    $aTitle = '';
    $alt = '';
    
  
    //GET TITLE
    if ( $v[ 'title' ] !== '' ) {
      $dataSubTitle = 'data-title="'.$v[ 'title' ].'"';
      $aTitle = 'title="'.$v[ 'title' ].'"';
    }
    //USE ALT IF TITLE IS MISSING
    if ( $v[ 'title' ] == '' && $v[ 'alt' ] !== '' ) {
      $dataSubTitle = 'data-title="'.$v[ 'alt' ].'"';
      $aTitle = 'title="'.$v[ 'alt' ].'"';
    }
    
    //GET ALT
    if ( $v[ 'alt' ] !== '' ) {
      $alt = $v[ 'alt' ];
    }

    //USE TITLE IF ALT IS MISSING
    if ( $v[ 'alt' ] == '' && $v[ 'title' ] !== '' ) {
      $alt = $v[ 'title' ];
    }

    //GET DESCRIPTION
    if ( $v[ 'desc' ] !== '' ) {
      $dataSubDesc = ' data-description="'.nl2br( $v[ 'desc' ] ).'"';
    }
    
  
    $imgUrls = ' data-srcset="' . JURI::base() . $smallPic[ $i ] . ' 480w, ' . JURI::base() . $mediumPic[ $i ] . ' 1023w, ' . JURI::base() . $largePic[ $i ] . ' 1024w"';
    $imgSizes = ' data-sizes="(max-width: 600px) 480px, (max-width: 1024px), (min-width: 1024px)"';


    //IMG THUMB WIDTHS/HEIGHTS  
    list( $lsource_w, $lsource_h ) = getimagesize( JURI::base() . $thumbPic[ $i ] );
    $imgDims = 'width="' . $lsource_w . '" height="' . $lsource_h . '" ';


    echo '<li class="masonry__item js-masonry__item">';
    echo '<a href="' . $largePic[ $i ] . '" ' . $dataSubTitle . $dataSubDesc . $imgSizes . $imgUrls . ' class="glightbox" '.$aTitle.'>';
    echo '<img data-src="' . JURI::base() . $thumbPic[ $i ] . '" ' . $imgDims . ' src="images/transparent.gif" loading="lazy" alt="' . $alt . '" class="block w100">';


    echo '</a>';
    echo '</li>'
    ?>
    <?php endfor; ?>
  </ul>
</div>
<?php }; ?>