Hello,
I’m trying to make a infinite scrolling gallery. I’ve managed to get the data trough ajax and the infinite-part works perfectly. Only when I apply Isotope http://isotope.metafizzy.co/index.html to make it look good it won’t apply the css and the pictures just come behind the ones that are already there.
My script is this:
$(document).ready(function(){
var page = 1;
$('#result').isotope();
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$.get(baseurl + "gallerij/getAfbeeldingen/" + page , function(data){
$('#result').append(data).isotope('appended', data);
});
}
});
});
The html blocks I get from ajax looks like this:
<div class="grid">
<div class="imgholder">
<img src="img1.jpg"/>
</div>
<strong>Testje</strong>
</div>
I’ve tried to do $(‘#result’).isotope(“reLayout”); but it won’t work
getAfbeeldingen:
public function getAfbeeldingen($page)
{
$requested_page = $this->input->post('page_num');
p($page, 'bartjeeuhh');
$limit = (($page - 1) * 12);
$offset = 12;
$afbeeldingen = $this->gallerij_model->getAfbeeldingen($offset, $limit);
$html = '';
foreach($afbeeldingen as $afbeelding)
{
$html .= "<div class='grid'><div class='imgholder'>";
$html .= "<img src='". base_url('uploads/afbeeldingen/'. $afbeelding->Pad) ."'/>";
$html .= "</div><strong>Testje</strong></div>";
}
$this->output->set_output($html);
}