Search code examples
phpjquerycssjquery-waypoints

Jquery waypoints horizontal scrolling issue

I'm trying to make an infinite horizontal scrolling gallery as below. The problem is, any slight scroll in either direction triggers more images to load. The image loading should not be triggered until the right side of the container div (infinite-container) is visible within the browser window. Code below. Any suggestions please?

enter image description here

PHP

echo('<html><head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="waypoints.js"></script>
<script src="waypoints-infinite.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {
    $(\'.infinite-container\').waypoint(\'infinite\', {horizontal:true});
    });
    </script>


    ');
    echo('<link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css">');
    echo('<link rel="stylesheet" type="text/css" href="mainstyletesthoriz.css" />');

//Get number of animations
$queryNum = "SELECT * FROM Animations WHERE approved='1'";
$resultNum = @mysql_query($queryNum);
$num_results = mysql_num_rows($resultNum);
//echo $num_results;

//Get animations required
$query = "SELECT * FROM Animations WHERE approved='1' ORDER BY animationid DESC LIMIT $minAnimation, $maxAnimation";
$result = @mysql_query($query);
$totalPages = ceil($num_results / $numImagesPerPage);
//echo $totalPages;

echo('<script type="text/javascript" src="script.js"></script></head><body><div class="infinite-container">');   

if ($num_results > 0)
{
    $array = array();
    while ($row = mysql_fetch_assoc($result))
    {
        $array[] = $row;
    }

    for ($i = 0; $i < $numImagesPerPage; $i++)
    {   
        $filePath = "animations/".$array[$i]['animationid'].".gif";
        echo('<img class="infinite-item" src="'.$filePath.'"/>');
    }
}    

echo('</div>');

if($pageNum < $totalPages - 1)
{
    echo('<span><a class="infinite-more-link" href="indextesthoriz.php?p='.$nextPageNum.'"></a></span></body></html>');
}

CSS

body
{
    background-color:#dbdbdb;
    overflow:auto;
}

div.infinite-container
{
    background-color:#db0080; 
    height:180px;
    display:inline-block;
    white-space: nowrap;
}

img.infinite-item
{
width:320px; 
height:180px;
margin-right:8px;
margin-bottom:8px;
display:inline-block;
}

.infinite-more-link 
{
visibility:hidden;
}
Solution

  • You've correctly set the horizontal option for the waypoint to true, but there's another option you'll need to set in this case, offset. That's because the default offset for the Waypoints Infinite Shortcut is bottom-in-view, an offset specific to vertical waypoints. There isn't a "right-in-view" but you will want to set it to the functional equivalent of that, as shown below:

    $('.infinite-container').waypoint('infinite', {
  horizontal:true,
  offset: function() {
    return $(window).width() - $(this).outerWidth();
  }
});

    Update: In Waypoints 3.0 there is a 'right-in-view' offset alias. The Infinite shortcut isn't a jQuery extension anymore though. The code above would now look like this:

    var waypoint = new Waypoint.Infinite({
  element: $('.infinite-container')[0],
  horizontal:true,
  offset: 'right-in-view'
});