View gallery on demand

Asked

Viewed 22 times

0

I have a PHP code that searches images in subfolders, but I would like to do it with that it was loaded slowly because they are many photos, I tried in ways understand AJAX, but I was not successful. Please! I ask for help.

The js file is in another file, which you should post to the PHP file called loadAjax.php

<script>
        //variavel para controle de registros retornados
        var pagina = 0;
        var pesquisa = true;
        //function carrega
        function carrega(){
            $('#loading').html("<img src='img/loader.gif'/> Carregando Feeds...").fadeIn('fast');
            $.ajax({
                type: "POST",
                url: "loadAjax.php",
                data: "page="+pagina,//variavel passada via post 
                cache: false,
                success: function(html){
                if(html){ 
                    $('#loading').fadeOut('fast'); 
                    $("#result").append(html); 
                    //mostra resultado na div result 
                    pesquisa = true; 
               }else{ 
                      
                    $('#loading').html("Fim da pesquisa...").fadeIn('fast'); 
                    pesquisa = false;  
               }
                },
                error:function(html){
                    $('#loading').html("erro...").fadeIn('fast');
                }
            });
        };
        //chama minha funcao ao carregar a pagina
        $(document).ready(function(){
            carrega();
        });
        //funcao de controle do scroll da pagina, na qual ela chega ao fim é acionada chamando
        //minha function carrega novamente para trazer mais dados dinamicamente
        $(window).scroll(function(){
             
            if($(window).scrollTop() + $(window).height() >= $(document).height()){
                pagina += 1;
                carrega();
            };
        });
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$dir = new DirectoryIterator( './images/portfolio/sem_categoria' );

// array contendo os diretórios permitidos    
$diretoriosPermitidos = array("portfolio","sem_categoria");
foreach($dir as $file)
{
      // verifica se $file é diferente de '.' ou '..'
      if (!$file->isDot())
      {
         // listando somente os diretórios
         if  ( $file->isDir() )
         {
            // atribui o nome do diretório a variável
            $dirName = $file->getFilename();

            // subdiretórios
            $caminho = $file->getPathname();
            // chamada da função de recursividade
            recursivo($caminho, $dirName);
         }

         // listando somente os arquivos do diretório
         if  ( $file->isFile() )
         {
            // atribui o nome do arquivo a variável
            $fileName = $file->getFilename();
            // print
            //echo "Arquivos: ".$fileName."<br>";
         }
      }
}

function recursivo( $caminho, $dirName ){

      global $dirName;

      $DI = new DirectoryIterator( $caminho );

      foreach ($DI as $file){
         if (!$file->isDot())
         {
            if  ( $file->isFile() )
            {
                  //
                  $fileName = $file->getFilename();
                  //
                  //echo $dirName.": ".$fileName."<br>";
                  echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3 mb-2 d-flex justify-content-center' alt=''>
            <a href='{$fileName}' class='fresco' data-fresco-group='example' data-fresco-caption='ARJ SERVICE'>
            <img class='eni-img-thumb' src='images/portfolio/sem_categoria/{$dirName}/{$fileName}'>
            </a>
         </div>";
            }
         }

  }
}

php ajax

1 answer

0

I made this script using jquery n I know if it meets what you want pq n understood right anything tells me that I can change, if php n is ready I can do it too.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<div id="result">
    <div id="loading">
        <img src='img/loader.gif'/> Carregando Feeds...
    </div>
</div>
<button id="mais_img">Carregar mais</button>
<script>
    //variavel para controle de registros retornados
    var pagina = 0;
    
    $('#mais_img').click(function () {
        $.post('link da pagina', {
            page: pagina
        }, function (html) {
            if (html) {
                $('#loading').css('display', 'none');
                $("#result").append(html);
                //mostra resultado na div result

            } else {
                $('#loading').append("Fim da pesquisa...");
                $('#mais_img').css('display', 'none');
            }
        });
        pagina++;
    });
</script>
</body>
</html>

Browser other questions tagged php ajax

You are not signed in. Login or sign up in order to post.