LinkBack URL
About LinkBacks
My PHP/Java code causes the images to overlap. Why?
I combine between Isotope and Jquery in addition to PHP, and for some reason something goes wrong and causes item elements to overlap.
I tried solutions like Imagesloaded but i had no luck.
Everything on the page seem to be arranged properly until i start to scroll down.
This is a view for the result i get before scrolling down
Untitled-2.jpg
This is a view for the result i get after scrolling down
Untitled-1.jpg
This is the code, i appreciate your help.
<?php $limit = 15; $page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p']; # sql query $sql = "SELECT * FROM `table` ORDER BY `id` DESC"; # find out query stat point $start = ($page * $limit) - $limit; # query for page navigation if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){ $next = ++$page; } $query = mysql_query( $sql . " LIMIT {$start}, {$limit}"); if (mysql_num_rows($query) < 1) { header('HTTP/1.0 404 Not Found'); echo 'Page not found!'; exit(); } ?> <html> <head> <title>My Title</title> <link rel="stylesheet" "link/to/style.css"> <link rel="stylesheet" type="text/css" "link-to-Droid+Sans" /> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="link/to/jquery.min.js"></script> <script type="text/javascript" src="link/to/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="link/to/isotope.pkgd.min.js"></script> </head> <body> <div id="container"> <?php while ($row = mysql_fetch_array($query)): ?> <div class="item item-<?php echo $row['img_id']?>"> <?php echo '<div class="ent_wrap">'; $image_file = '../uploads/previews/'.$row['img_name'].'-'.$row['img_id'].'.'.$row['img_ext']; echo '<div class="preview_wrap">'; echo '<img src="'.$image_file.'" />'; echo '</div>'; echo '</div>'; ?> </div> <?php endwhile?> <!--page navigation--> <?php if (isset($next)): ?> <div class="nav"> <a href='thisPage.php?p=<?php echo $next?>'>Next</a> </div> <?php endif?> </div> <script type="text/javascript" src="link/to/jquery-ias.min.js"></script> <script type="text/javascript" src="link/to/isotope.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $container = $('#container'); $container.isotope({ filter: '*', animationOptions: { duration: 750, easing: 'linear', queue: false, } }); var page = 1; $(document).ready(function() { jQuery.ias({ container : '#container', item: '.item', pagination: '.nav', next: '.nav a', loader: 'Loading More Items. . .', triggerPageThreshold: 3 }); }); }); </script> </body> </html>
Reply With Quote
Related threads:
Originally Posted by copeg
