Infinite Scroll Photo Gallery
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.
// load records from 'gallery'
list($galleryRecords, $galleryMetaData) = getRecords(array(
'tableName' => 'gallery',
'loadUploads' => true,
'allowSearch' => false,
'orderBy' => 'createdDate DESC',
'perPage' => '6',
<?php foreach ($galleryRecords as $record): ?>
<?php foreach ($record['photo'] as $index => $upload): ?>
<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 ?>
Would this approach suit your needs?
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.
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/