jquery autobrowse loading all the images -
i trying utilize jquery.esn.autobrowse.js plugin infinite scroll ran problem. plugin loading images @ once. problem seems javascript calling url continuously updating offset without scrolling page. below html , php script. in advance help.
gallerypage.html
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.esn.autobrowse.js"></script> <script type="text/javascript" src="js/jquery.json-2.2.min.js"></script> <script type="text/javascript" src="js/jstorage.js"></script> </head> <body> <div id="content"> <div id='gallery'></div> <script type="text/javascript"> $(function () { $('#gallery').autobrowse( { url: function (offset) { homecoming "getgallery.php?album_id=1&page=" +math.round(offset/20); }, template: function (response) { var markup=''; (var i=0; i<response.items.length; i++) { markup+='<a href="'+response.items[i].photoid+'"><img src="'+response.items[i].image+'" /></a>'; }; homecoming markup; }, itemsreturned: function (response) { homecoming response.items.length; }, offset: 0, max: 10000, loader: '<div class="loader"></div>', usecache: false, expiration: 1 } ); }); </script> </div> </body> </html> getgallery.php
<?php $count=20; $offset=0; if (isset($_get['count'])) $count=$_get['count']*1; if (isset($_get['page'])) $offset=$_get['page']*$count*1; $album_id=$_get['album_id']; $arr = array(); $sql="select photo_id photoid,thumbnail_location image photos album_id = $album_id , published=1 order orderid limit $offset,$count"; //logtofile('sql....'.$sql); $rs = mysql_query($sql); while($obj = mysql_fetch_object($rs)) { $arr[] = $obj; } echo '{"items":'.json_encode($arr).'}'; ?> if turn on logtofile , see logged file... see multiple sqls beingness executed @ initial page load below.
sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 0,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 20,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 40,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 60,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 80,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 100,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 120,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 140,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 160,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 180,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 200,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 220,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 240,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 260,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 260,20 sql....select photo_id photoid,thumbnail_location image photos album_id = 1 , published=1 order orderid limit 280,20 jquery
No comments:
Post a Comment