Quovolver: Citações Elegantes Em Seu Site

Quovolver logo

É bastante comum, para web sites dos mais diversos gêneros, o uso de citações de pessoas ou trechos de livros para corroborar determinado artigo ou, simplesmente, reforçar as mensagens e conteúdos, em geral, apresentados neste site. Outra situação bem comum é empresas usarem boas citações de seus clientes no site para corroborar a qualidade de produtos e/ou serviços.

Em (X)HTML, existe uma tags específicas para isso, sendo a mais conhecia a blockquote, que, semanticamente, foi projetada para a exibição de citações de pessoas e/ou publicações em páginas (X)HTML. Mas, às vezes, uma apresentação “crua” dessas citações não é o suficiente, e é neste ponto que entra o Quovolver!

O Quovolver interpreta um set de blockquotes e os apresenta de maneira mais elegante e sofisticada, alternando cada um deles e adaptando seu “container” para os respectivos tamanhos. Realmente algo bonito de se ver! E, como não poderia deixar de ser, é muito, muito simples de ser usado!

Usando Quovolver

Em primeiro lugar, faça o download do Quovolver (no momento da escrita deste artigo, está na versão 1.0). Você vai receber um arquivo compactado com 4 arquivos dentro:

  • index.html
  • jquery.quovolver.js
  • readme.txt
  • style.css

O único realmente essencial é “jquery.quovolver.js”, já que os outros são somente para exemplo, explicações e estilização (que, para o uso em sites “de verdade”, deve seguir a “linha visual” de onde o Quovolver será usado).

Então, para começar, é preciso chamar o jQuery juntamente com o arquivo js do Quovolver (usando sua própria estrutura de pastas, claro):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.quovolver.js"></script>

Obviamente, é preciso ter um set de blockquotes para que o plugin funcione corretamente (é para isso que ele serve, certo?), então, em seu (X)HTML, deve existir uma estrutura, mais ou menos, assim:


<div class="widget_content">
  <blockquote>
    <p>
      &#8220;uspendisse potenti. Nam pellentesque, dolor sit amet egestas volutpat, quam leo eleifend mauris, sed blandit nulla odio eu tellus. Etiam dapibus mauris eu felis varius at tincidunt turpis interdum. Aenean vitae odio odio, nec cursus purus. Morbi justo justo, malesuada et consectetur vel, sodales sit amet lacus. &#8221;
    </p>
    <cite>&#8211; Quote Author</cite>
  </blockquote>
  
  <blockquote>
    <p>
      &#8220;Vestibulum pellentesque sagittis tortor, vitae interdum justo mollis gravida. Maecenas vulputate, lacus et lacinia imperdiet, leo orci malesuada ipsum, volutpat aliquam sem augue sit amet mi. Nulla facilisi.&#8221;
    </p>
    <cite>&#8211; Quote Author</cite>
  </blockquote>
  
  <blockquote>
    <p>
      &#8220;Suspendisse potenti. Cras a eros a nulla accumsan sollicitudin. Nulla id suscipit turpis. Nunc posuere vehicula erat, a tempor lorem aliquet ac.&#8221;
    </p>
    <cite>&#8211; Quote Author</cite>
  </blockquote>
</div>

Então, basta 1 linha para ativar o Quovolver (depois de iniciar o jQuery):


$('blockquote').quovolver();

Pronto! As citações serão alternadas de tempos em tempos e o “box” que as envolve se adaptará dinamicamente a cada tamanho!

Uma dica é, quando for mexer no CSS para adaptar as citações dinâmicas, deixe a largura dos elementos de citação com largura fixa, especificando algum valor para a propriedade “width”. Isso garante que a animação ocorra somente no sentido vertical.

Opções do Quovolver

O Quovolver tem somente 2 opções:

  • speed. Velocidade da animação em milissegundos (padrão “500″)
  • duration. Tempo, em milissegundos, antes de trocar de citação (padrão “6000″)

Então, se fosse preciso ativar o Quovolver com velocidade de animação de 350 milissegundos e cada citação ficar disponível para leitura durante 5 segundos, o código seria:


$('blockquote').quovolver(350, 5000);

Conclusão sobre o Quovolver

Obviamente que nem todo site precisa de uma apresentação tão elegante e sofisticada de citações. Entretanto, utilizar o Quovolver para tal função, certamente é um diferencial!

Utilize o Quovolver com sabedoria e faça das citações uma arte!

Be Sociable, Share!

Participa! Comenta...