MOHAMMED MOHAMMED - 4 months ago 18
PHP Question

limit not working on loadmore

this is the script i used for loadmore function and its working and the problem am facing here is am not getting loadmore as per the initial value given and the limit.
this is my script

<script type="text/javascript">
$(document).ready(function () {

size_div = $("#maincontent div").size();
x=5;
$('#maincontent div:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+3 <= size_div) ? x+3 : size_div;
$('#maincontent div:lt('+x+')').show();

if(x == size_div){
$('#loadMore').hide();
$('#alert-msg').html('no more images to show!');
}
});


});


Here the initial images to be displayed is 5 and on clicking each loadmore button 3 more images to be displayed but here initailly single image is displaying and on clicking loadmore each time a image is dispalying.

this is my view page

<div class="row" id="maincontent">

<?php foreach($gallery as $row){?>
<?php $images=json_decode($row->image);{?>

<div class="col-md-3 col-sm-6">
<div class="teacher-item">
<div class="thumb-holder"> <img src="<?php echo base_url();?>uploads/<?php echo $images[0];?>" alt="" style="width: 250px;height: 180px;">
<div class="hover-content">
<a href="<?php echo base_url();?>uploads/<?php echo $images[0];?>" target="_blank" class="impromptu-gallery img-responsive">
<h3>Gallery</h3>
<h4>Photoghaphy Master</h4>
</a>
</div>
</div>
</div>
</div>

<?php }}?>

</div>


my css looks like this

<style>
#maincontent div {
display:none;
}

#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}
</style>

Answer

hi man your selector is wrong, please try following:

size_div = $("#maincontent > div").size();
x=5;
$('#maincontent > div:lt('+x+')').show();
$('#loadMore').click(function () {
   x= (x+3 <= size_div) ? x+3 : size_div;
   $('#maincontent > div:lt('+x+')').show();

   if(x == size_div){
     $('#loadMore').hide();
     $('#alert-msg').html('no more images to show!');
   }
});

go with a css style:

#maincontent > div{display:none;}