A paginação é uma técnica utilizada para criar quebras em conteúdos extensos, fazendo assim com que grandes quantidades de conteúdo possam ser assimiladas mais facilmente pelos visitantes e além disso remover alguma carga do servidor, evitando que o conteúdo seja carregado todo de uma só vez, sem necessidade. A paginação pode ser feita tanto de forma numérica, como com texto de seguinte e anterior. No entanto, nos últimos tempos a paginação ganhou um novo look com a utilização do scrolling infinito, que basicamente remove a necessidade de se utilizar a paginação pois o conteúdo é carregado todo na mesma página, mas só à medida que o usuário vai fazendo o scroll, não sobrecarregando o servidor. Este artigo é baseado no artigo dos colegas do 1st Web Designer, e é uma técnica é utilizada por vários dos grandes websites da atualidade, como é o caso do Facebook, Pinterest, Twitter, Google Reader, entre outros. Neste artigo irá aprender como criar o scrolling infinito e poderá desde logo introduzi-lo nos seus websites!

Como criar uma página com scrolling infinito

1. SCROLLING INFINITO?

O scrolling infinito, tal como o nome deixa antever, é uma técnica utilizada para remover a paginação mas mantendo o conteúdo a ser carregado à medida que o usuário quer. Isto significa que o conteúdo não será todo carregado quando a página é aberta, mas sim carregado à medida que o usuário faz o scroll na página. Para que o conteúdo seja carregado, basta o usuário fazer scroll na página e assim que chega ao final da primeira tranche de conteúdo, outra tranche de conteúdo será carregada automaticamente sem necessidade de fazer nada além do scroll. Isto irá acontecer até que não haja mais conteúdo e chegue ao final da página.

2. CRIAR BANCO DE DADOS

Como criar uma página com scrolling infinito

Para completar este tutorial é necessária a utilização de um banco de dados onde irão ser inseridos os nomes das imagens que vamos utilizar para criar um scrolling infinito com várias imagens. Para criar um banco de dados siga os passos incluídos no artigo Como criar uma base de dados PHP/MySQL através do phpMyAdmin e crie um banco de dados com o nome scroll_images. De seguida faça download deste arquivo e faça a importação para a sua base de dados.

3. PHP

O próximo passo é criar a página onde será utilizado o scroll infinito, e para fazer o carregamento das imagens é necessário criar a ligação ao banco de dados para retornar o nome das imagens e a sua sequência. Para isso, comece por inserir o seguinte código:

<?php
$con = mysql_connect("localhost", "usuario", "password");
mysql_select_db("nome_bando_de_dados");

$result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 12");

$row_object = mysql_query("Select Found_Rows() as rowcount");
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;
?>

Será necessário introduzir as alterações nos campos usuario, password e nome_banco_de_dados. O usuário e password é o usuário associado ao banco de dados e a password correspondente, e o nome_banco_de_dados é o nome do bando de dados com o qual estamos a trabalhar.

De seguida passamos a começar a delinear o layout básico da página para que possamos inserir as imagens, em que serão mostrados os primeiros 12 resultados presentes no banco de dados. Começamos por introduzir algum código na secção <head> que iremos explicar de seguida:

<html lang='en'>
    <head>
        <title>Scrolling Infinito</title>
        <script src="jquery-1.7.2.js" type="text/javascript"></script>
        <style>
            #result div{
		border: 10px solid #EEEEEE;
    		float: left;
    		height: 300px;
    		margin: 20px;
    outline: 1px solid #CFCFCF;
    width: 300px;

	    }
	    #more{
		background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #CFCFCF;
    color: #000000;
    display: none;
    font-weight: bold;
    left: 1100px;
    padding: 5px;
    position: fixed;
    top: 100px;

	    }
	    #no-more{
		background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #CFCFCF;
    color: #000000;
    display: none;
    font-weight: bold;
    left: 1100px;
    padding: 5px;
    position: fixed;
    top: 100px;

	    }
	    #result{

	    }
        </style>
        <script type="text/javascript">
            var page = 1;

            $(window).scroll(function () {
                $('#more').hide();
                $('#no-more').hide();

                if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                    $('#more').css("top","400");
                    $('#more').show();
                }
                if($(window).scrollTop() + $(window).height() == $(document).height()) {

                    $('#more').hide();
                    $('#no-more').hide();

                    page++;

                    var data = {
                        page_num: page
                    };

                    var actual_count = "<?php echo $actual_row_count; ?>";

                    if((page-1)* 12 > actual_count){
                        $('#no-more').css("top","400");
                        $('#no-more').show();
                    }else{
                        $.ajax({
                            type: "POST",
                            url: "data.php",
                            data:data,
                            success: function(res) {
                                $("#result").append(res);
                                console.log(res);
                            }
                        });
                    }

                }

            });

        </script>

    </head>

Neste trecho de código além de criarmos a secção <head> no nosso documento, inserimos a ligação ao ficheiro javascript, inserimos alguma estilização através da utilização de CSS e de seguida inserimos efeitos jquery que irão ser utilizados no scrolling infinito, de forma a melhorar e aprimorar um pouco a interface. No código jQuery, o primeiro passo que é dado é definir a variável para manter o número de página atual, sendo a inicial o número 1. De seguida definimos que as caixas de mensagem que irão ser apresentadas ao usuário estão escondidas inicialmente.

Depois temos um IF que faz com que a mensagem “A carregar conteúdo” seja mostrada quando o scroll estiver a chegar ao final e estiver mais conteúdo a ser carregado. Podemos definir o local onde esta mensagem será apresnetada ao alterarmos o valor -200 para outro valor – neste caso será mostrado 200px acima do final do scroll. Ainda dentro do if, depois de carregado mais conteúdo o número da página irá ser somado +1. Ainda dentro do javascript, é feita a chamada ao ficheiro data.php que iremos explicar de seguida, e que em termos básicos faz a chamada do conteúdo do banco de dados.

O próximo passo é inserir mais alguns elementos para completar o documento, nomeadamente a parte do body onde irão ser inseridas as imagens e onde estão as mensagens que irão ser mostradas aos usuários. Para isso, insira o seguinte código no documento, logo a seguir ao código acima:

<body>
        <div id='more' >A carregar conteúdo</div>
        <div id='no-more' >Sem mais conteúdo</div>
        <div id='result'>
            <?php
            while ($row = mysql_fetch_array($result)) {
                echo "<div><img src='images/" . $row['name'] . ".jpg' /></div>";
            }
            ?>
        </div>

    </body>
</html>

4. CHAMADA DO CONTEÚDO

Para fazer o retorno do conteúdo neste caso vamos utilizar AJAX para fazer o pedido da continuação do scrolling ao servidor, e para isso crie o ficheiro data.php e insira o seguinte código:

<?php

$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";

$con = mysql_connect("localhost", "usuario", "password");
mysql_select_db("nome_banco_de_dados");

$result = mysql_query("select  * from scroll_images order by id asc limit $set_limit");

$html = '';

while ($row = mysql_fetch_array($result)) {
    $html .= "<div><img src='images/" . $row['name'] . ".jpg' /></div>";
}

echo $html;
exit;
?>

Neste ficheiro é feita mais uma vez a ligação ao banco de dados, no qual terá de inserir os seus dados de usuario e password e o nome do banco de dados.

5. RESULTADO FINAL E FICHEIROS FONTE

O resultado final é o esperado, em que são carregadas 12 imagens de cada vez que o usuário faz scroll e termina a uma tranche de conteúdo, até que não haja mais imagens para carregar. Você poderá aplicar esta técnica não só utilizando imagens, como também utilizando largas quantidades de texto ou conteúdo diverso que não queira carregar todo de uma só vez.

Como criar uma página com scrolling infinito

Poderá baixar os ficheiros fonte aqui.

Abraços!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Walter
    29 de agosto de 2012

    Poderia ter uma pagina mostrando o resultado final.. Não entendi a proposta de fazer isso



  2. Guilherme Cruz
    30 de agosto de 2012

    Boa Noite.Muito bom o tutorial,era exatamente o que eu procurava!
    Segui os passos mas,quando desço o scrol não carrega mais imagens.
    O que eu posso estar fazendo de errado ?

    o link do teste é esse : http://www.divulgazine.com/galeria/



    • Diogo Espinha
      24 de setembro de 2012

      Olá Guilherme, peço desculpa pela resposta tardia. Para fazer o carregamento de mais imagens é necessário que estas estejam no servidor e que estejam inseridas no banco de dados.

      Abraço



  3. Henrique
    21 de outubro de 2012

    Parabéns pelo tópico. Tenho só uma dúvida, eu não manjo de javascript, então, como eu faço para passar uma variável pro data.php?

    quero enviar um id para o data.php

    Obrigado.



  4. Lesley
    28 de dezembro de 2012

    Procurei muito na internet e só aqui achei um tutorial bacana sobre o scroll infinito.

    O meu projeto esta nesse link http://ativa.antissocial.com/infinit/
    mas ele só funciona quando eu rolo a partir do topo da página fora isso não carrega as imagens.

    Alguém que fez pode me ajudar?

    Eu usei os ficheiros fonte e a respeito do banco de dados esta tudo OK, pois funciona, só que no momento errado

    Abraço



  5. Leonardo
    11 de março de 2013

    Blz.. conseguir fazer certinho, só que queria que quando clica-se na imagem , abra maior.

    como faço isso???



  6. Nilberto
    1 de outubro de 2013

    Funcionou perfeitamente, o problema do Lesley é apenas a versão do Jquery, use a versão 1.7.2, a mesma que foi usada no exemplo!! Abraços e valeu!


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz