Infinite Scroll Photo Gallery

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

By Zicky - 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 equinox - 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?

Cheers,

“There are only two ways to live your life. One is as though nothing is a miracle." ~ Albert Einstein

By Toledoh - February 12, 2017

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)

By ross - February 14, 2017

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.

Thanks.

-----------------------------------------------------------
Cheers,
Ross Fairbairn - Consulting
consulting@interactivetools.com

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/