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);


    }
Member Avatar for LastMitch

it look good it won’t apply the css and the pictures just come behind the ones that are already there.

I don't understand what issue you are having? Can you post an image what you are talking about? I mean posting the code is good but not explaining clearly what issue you are having is another thing. I think an image would be helpful here.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.