Button that increases the limit of mysql_query

Question

Hello guys I’m wanting that when I press in the div with the class "boot" the following line change:

$albuns = mysql_query("SELECT * FROM albuns ORDER BY id DESC limit 4");

making the limit increase +4 for each time tightening, appearing 8,12,16 boxes.

<ul>
                    <?php
                $albuns = mysql_query("SELECT * FROM albuns ORDER BY id DESC limit 4");
                while($lista_albuns = mysql_fetch_array($albuns)){
                    $id_album = $lista_albuns['id'];
                    if($lista_albuns['tipo'] == 'album'){
                        $capa = mysql_fetch_array(mysql_query("SELECT * FROM fotos_album WHERE id_album = '$id_album' AND capa = 1"));
            ?>
                <a rel="prettyPhoto[<?=$lista_albuns['id'];?>]" href="images/aconteceu/<?=$capa['foto'];?>" class="mosaic-block bar item" title="<?php
                                if($capa['comentario'] == ''){
                                    echo $lista_albuns['descricao'];
                                }
                                else{
                                    echo $capa['comentario'];
                                }
                            ?>">
                    <li class="mosaic-block">
                        <img src="images/aconteceu/<?=$capa['foto'];?>" />
                         <p><?=$lista_albuns['nome'];?></p> 
                    </li>



                    <?php
                        $fotos = mysql_query("SELECT * FROM fotos_album WHERE id_album = '$id_album' AND capa = 2");
                        while($lista_fotos=mysql_fetch_array($fotos)){
                    ?>
                            <a rel="prettyPhoto[<?=$lista_albuns['id'];?>]" class="ocult" href="images/aconteceu/<?=$lista_fotos['foto'];?>" title="
                            <?php
                                if($lista_fotos['comentario'] == ''){
                                    echo $lista_albuns['descricao'];
                                }
                                else{
                                    echo $lista_fotos['comentario'];
                                }
                            ?>"></a>
                    <?
                        }
                    ?>
                </a> 
            <?
                    }
                    else if($lista_albuns['tipo'] == 'video'){
                        $video = mysql_query("SELECT * FROM fotos_album WHERE id_album = '$id_album' LIMIT 1");
                        $row_video = mysql_fetch_array($video);
                        $url = $row_video['foto'];
                        preg_match("#(?<=v=)[a-zA-Z0-9-]+(?=&)|(?<=v\/)[^&\n]+|(?<=v=)[^&\n]+|(?<=youtu.be/)[^&\n]+#", $url, $output);
            ?>
                        <a rel="prettyPhoto" href="<?=$url;?>" class="mosaic-block bar item" title="<?=$lista_albuns['descricao'];?>">
                            <img src="images/__video.png" class="play_video" />
                            <li class="mosaic-block">
                                <div class="opacity_album">
                                </div>
                                <img src="http://img.youtube.com/vi/<?=$output[0]?>/0.jpg"  />
                                 <p><?=$lista_albuns['nome'];?></p>
                            </li>
                        </a>
            <?
                    }
                }
            ?>
            </ul>

!

 <a href="#"><div class="botao"><p>veja mais</p></div></a>

Answer 1

You must use OFFSET or use some other alternative, as shown here, making some minimal adaptations.

SELECT * FROM albuns ORDER BY id DESC LIMIT 4 OFFSET 0
// Irá listar todos os itens de id 0 até 3.

SELECT * FROM albuns ORDER BY id DESC LIMIT 4 OFFSET 4
// Irá listar todos os itens de id 3 até 7

So just use your imagination to alter the OFFSET dynamically, based on "see more" and collect

As this will depend on case by case, one thing you can do in your situation is calculate the amount of existing items.

For example:

Note: This is an example and requires changes!

$('div .botao').click(function(){

    var numeroExistente = $('a [rel]').size();

    $.post("api/proximo.php", {numero: numeroExistente}, function(data) {

      //...

    });    

});

<?php

  $numeroExistente = (int)$_POST['numero'];
  mysql_query("SELECT * FROM albuns ORDER BY id DESC limit 4 OFFSET ".$numeroExistente);

  //...

?>

Note: Do not use mysql_*!