1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
|
<div id="content" class="transitions-enabled infinite-scroll clearfix">
<?php
$curseur = NULL;
mysql_connect("localhost", "root", "password") or die("cannot connect");
mysql_select_db("db")or die("cannot select DB");
$sql=mysql_query("SELECT * FROM rtxposts ORDER BY id DESC LIMIT 11");
while($data=mysql_fetch_assoc($sql))
{
$curseur = htmlspecialchars($data['id'], ENT_QUOTES);
?>
<div id="globalcadre">............</div>
<?php
}
?>
</div> <!-- clearfix -->
</div> <!-- loading -->
<nav id="page-nav">
<a href="2.php?start=<?php echo htmlspecialchars($curseur, ENT_QUOTES); ?>"></a>
</nav>
<script>
$(document).ready(function() {
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#globalcadre',columnWidth: 0
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '#globalcadre', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script> |
Partager