Infinite Scroll Photo Gallery

5 posts by 4 authors in: Forums > CMS Builder
Last Post: February 14, 2017   (RSS)

By Mikey - February 10, 2017

Anyone have some tips or (code you could share) on how to get this gallery working as an Infinite Scroll Gallery?

I've racked my brains on this, but just can't wrap my head around it.

What I'm trying to achieve is to have 6 gallery photos appear on page load.
Once the page is scrolled down beyond the lowest row of gallery photos - it triggers the $galleryMetaData['prevPage'] to load more photos into the gallery, and continues loading more photos into the gallery as the user continues scrolling. Once the last image loads and the page can't scroll any further, the load action stops.

I don't have any existing jQuery, or javascript to make this work, and haven't had any luck finding anything that I think would work.

<?php
   // load records from 'gallery'
  list($galleryRecords, $galleryMetaData) = getRecords(array(
    'tableName'   => 'gallery',
    'loadUploads' => true,
    'allowSearch' => false,
    'orderBy'     => 'createdDate DESC',
    'perPage'     => '6',
  ));
?>

<div class="container">
<?php foreach ($galleryRecords as $record): ?>
   <?php foreach ($record['photo'] as $index => $upload): ?>
      <div class="infinite_scroll">
         <a href="<?php echo $record['_link'] ?>" title="<?php echo htmlencode($record['title']) ?>">
         <img src="<?php echo $upload['thumbUrlPath4'] ?>" width="<?php echo $upload['thumbWidth4'] ?>" height="<?php echo $upload['thumbHeight4'] ?>"/>
         </a>
      </div>
   <?php endforeach ?>
<?php endforeach ?>
</div>

<?php if ($galleryMetaData['prevPage']): ?>
  <!-- this is hidden and is a component to trigger the load more photos -->
   <div class="hidden_div"><a href="<?php echo $lgalleryMetaData['prevPageLink'] ?>">Load More</a></div>
 <!-- /this is hidden and is a component to trigger the load more photos -->
<?php else: ?>
<?php endif ?>

Thanks, Zicky

By Codee - February 10, 2017

Hi Zicky,

There is another method (that might be acceptable for you) that doesn't rely upon javascript and relies more upon CMSB.  For some of my clients sites (especially certain vehicle-related sites) I build 2 photo upload areas: primary and additional. The primary has either 1 photo that is the master thumbnail, or up to 10 photos with the first one being the master thumbnail (goes near the top of the details page). The additional photo area can list up to unlimited number of photos with smaller thumbnails (and appears closer to the bottom of the details page).

Would this approach suit your needs?

By Mikey - February 10, 2017

Hey Equinox,

Thanks for the suggestion, however the gallery I want to build is associated with the multi-list... showing all records created with a photo in the gallery. I like your suggestion for the details page though. 

: )

Zicky

Hey Zicky.

I've always used https://github.com/infinite-scroll/infinite-scroll, however I see that Paul Irish is no longer maintaining it.  I don't know if this means that it's wrong to use it, or simply that you can no longer get support for it... but I would start there.

Cheers,

Tim (toledoh.com.au)