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

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.

   // 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'] ?>"/>
   <?php endforeach ?>
<?php endforeach ?>

<?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

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. 

: )


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.


Tim Forrest
Toledoh Enterprises

Hi Zicky

What I recommend you start with is a hardcoded page where you have the infinite scroll script setup.

I imagine the script you are using will even have some examples you can probably copy and paste into your own template without much modification.

Once you have the hardcoded page setup, it will be more clear where the CMS Builder code needs to go.

Does that make sense?

Let me know when you have the hardcoded page setup.


Ross Fairbairn - Consulting

Hire me! Save time by getting our experts to help with your project.
Template changes, advanced features, full integration, whatever you
need. Whether you need one hour or fifty, get it done fast with
Priority Consulting: http://www.interactivetools.com/consulting/