Jquery Plugin: Simple Gallery - Galeria simples

Existem casos em que é difícil utilizar algumas daquelas maravilhosas galerias em Jquery, muitas vezes criadas por designers cheios de inspiração, que exalam interatividade e qualidade. Pode ocorrer também, de um cliente de um website do qual você é responsável, simplesmente não gostar destes tipos de galerias ou quem leiautou o site simplesmente criou a idéia de uma galeria "maluca" do qual o cliente adorou e não quer trocar por nada. Para estes casos eu desenvolvi um plugin de fácil adaptação que poderá lhe ajudar e salvar um tempo precioso de desenvolvimento.

Download e exemplos

Abaixo você pode baixar o plugin, juntamente com um exemplo de uso:

Download 1: Jquery Simple Gallery Plugin 1.0
Download 2: Exemplo de uso

Agora ficou fácil

O Jquery Simple Gallery é um plugin que permite uma fácil adaptação para diferentes tipos de leaiautes de galerias, não dependendo de complexas estilizações, basta apenas dizer onde você quer que a ampliação apareça, definir os elementos da página que vão servir de botões de navegação e ainda opcionalmente, pode definir a visualização de miniaturas, para melhorar um pouco a interação do usuário com a galeria.

Chamando o plugin

$('#gallery').simpleGallery({
    'data' : 'pictures.php',
    'imagePrev' : '#prevButton',
    'imageNext' : '#nextButton'
});

Bastam três parâmetros para criar a galeria: data, imagePrev, imageNext

Marcação HTML

A única marcação que você precisará declarar em seu documento, serão os elementos que você utilizou como parâmetro:

<div id="imagePrev"></div>
<div id="gallery"></div>
<div id="imageNext"></div>

Só faltam as imagens

Agora a única peça que falta é conseguir uma lista com as imagens que você quer que apareçam em sua galeria, isto é feito por meio de um arquivo com um objeto JSON no seguinte formato:

{
    "images": [
        "caminho/da/imagem/01.jpg",
        "caminho/da/imagem/02.jpg"
  ...
    ],
    "thumbs": [
        "caminho/da/miniatura/01.jpg",
        "caminho/da/miniatura/02.jpg",
  ...
    ]
}

No arquivo disponível para download, você terá uma solução pronta criada em php para conseguir criar este objeto com facilidade.

Extendendo as possibilidades

Abaixo segue a lista de parâmetros disponíveis para este plugin.

• String data:
  • Função: o arquivo responsável por criar o objeto JSON com a lista de imagens e thumbs da galeria;
  • Default: vazio
• String/Bool counter:
  • Função: define um elemento para mostrar um contador de imagens. Ex: 5 / 10
  • Default: false (não será mostrado)
• String imagePath:
  • Função: caminho onde encontram-se as imagens. O valor deste parâmetro será passado para o arquivo definido no parâmetro data via método GET.
  • Default: images/
• String imagePrev:
  • Função: Elemento utilizado para retornar a uma imagem anterior.
  • Default: vazio
• String imageNext:
  • Função: Elemento utilizado para avançar para uma próxima imagem.
  • Default: vazio
• String/Bool filmstrip:
  • Função: Defina o elemento da página onde deseja mostrar as miniaturas, deixe em branco para não mostrar.
  • Default: false (não será mostrado)
• Integer frames:
  • Função: Define quantas miniaturas serão mostradas no elemento definido em filmstrip
  • Default: 6
• String thumbPath:
  • Função: caminho onde encontram-se as miniaturas. O valor deste parâmetro será passado para o arquivo definido no parâmetro data via método GET.
  • Default: thumbs/
• String thumbPrev:
  • Função: Elemento utilizado para retroceder nas miniaturas. Caso não seja definido, este elemento será criado automáticamente.
  • Default: #simple-gallery-filmstrip-prev



• String thumbNext:
  • Função: Elemento utilizado para avançar nas miniaturas. Caso não seja definido, este elemento será criado automáticamente.
  • Default: #simple-gallery-filmstrip-next



• String loadMessage:
  • Função: Defina uma mensagem ou gif padrão para ser mostrada enquanto uma imagem estiver sendo carregada.
  • Default: Carregando ...

Licença de uso

O plugin esta sobre a licença MIT de uso.

Finalizando

Mais um plugin para facilitar nossas vidas, existem ajustes a serem feitos para melhorar um pouco a interface do usuário, mas tenho certeza que da maneira que esta hoje, ele já pode ser utilizado em muitas situações e salvar um tempo precioso.

Plugin: Jquery Endless Page (Infinite scroll)

Um recurso muito utilizado na web 2.0 é permitir que o usuário ao clicar em um botão ou sempre que o scroll chegue ao fim de um conteúdo, possa ver mais resultados de uma busca, substituindo a paginação comum, este plugin permite trabalhar das duas formas.

Download: Jquery Endless Page

Utilizando um gatilho

A chamada do plugin baseado em um gatilho é bem simples, basta informar:

• O seletor utilizado para a chamada do plugin, que deverá ser a div onde o conteúdo será mostrado;
• Um arquivo backend com a lógica para mostrar o conteúdo
• O seletor do gatilho, que poderá ser: div/span/a, ou qualquer elemento onde o texto possa ser capturado com o método .text() do Jquery;

$('#Content').ep({
   'content'  : 'content.php',
   'trigger'  : '#More'
});

Exemplo de chamada do plugin utilizando um gatilho

Utilizando o scroll como gatilho

Por default, o plugin irá definir o gatilho como sendo o scroll, então se o parâmetro trigger for omitido na chamada do plugin, automáticamente o scroll será selecionado como gatilho.

$('#Content').ep({
   'content'  : 'content.php'
});

Para definir o scroll como o gatilho do plugin, basta omitir este parâmetro.

Outros parâmetros

Abaixo segue uma demonstração da utilização do plugin com todos os parâmetros disponíveis sendo declarados:

$('#Content').ep({
   'content'   : 'content.php',
   'trigger'   : '#More',
   'results'   : 10,
   'message'   : 'Loading...',
   'beforeLoad': function(){
      $('#Console').text('Carregando ...');
   },
   'onLoad'    : function(){
      $('#Console').text('');
   },
   'onEnd'     : function(){
      $('#Console').text('Fim dos resultados');
   }
});

Abaixo a função de cada parâmetro:

• String content:
  • Função: o arquivo backend, com a lógica para a visualização dos resultados;
  • Default: não há
• String trigger:
  • Função: O seletor do gatilho, que poderá ser: div/span/a, ou qualquer elemento onde o texto possa ser capturado com o método .text() do Jquery, para utilizar o scroll basta omitir este parâmetro;
  • Default: scroll
• Integer results:
  • Função: o número de resultados que deverão ser mostrados por requisição;
  • Default: 1
• String message:
  • Função: O texto alternativo que substituirá o texto original do trigger enquanto o conteúdo estiver sendo carregado;
  • Default: Carregando...
• Function beforeLoad:
  • Função: uma função para ser executada antes do conteúdo ser carregado;
  • Default: void(0)
• Function onLoad:
  • Função: uma função para ser executada após o conteúdo ser carregado;
  • Default: void(0)
• Function onEnd:
  • Função: uma função para ser executada quando não houver mais conteúdo a ser carregado;
  • Default: void(0)

Exemplos de utilização

Abaixo seguem dois exemplos, o primeiro mostra como fazer para carregar mais conteúdo em uma página e o outro mostra como carregar mais imagens para uma galeria, se quiser baixar os dois de uma vez só, utilize o terceiro link.

Download 1: Plugin EP - Exemplo conteúdo dinâmico
Download 2: Plugin EP - Exemplo galeria dinâmica
Download 3: Plugin EP - Exemplos

A lógica por traz do plugin

Para finalizar, é preciso entender uma pequena característica do plugin, cada vez que ele é chamado, um contador (counter) tem seu valor adicionado com o valor definido no parâmetro results, tanto o valor da variável counter quanto o valor da variável results são passados pelo plugin via GET, para o arquivo backend. Para que o conteúdo seja carregado da maneira correta você precisará trabalhar a lógica em cima destas duas variáveis. Nos exemplos disponibilizados acima, você verá com detalhes como pode fazer isso.

Licença de uso

O plugin esta sobre a licença MIT de uso.

Finalizando

É isto, espero que tenham apreciado, dúvidas e sugestões fique livre para comentar.

Até uma próxima!

Macetes: Comparando data e hora em PHP utilizando MySQL

O PHP não é muito feliz quando o assunto é comparar data e hora, sempre que procuro boas alternativas para fazer isto no PHP, continuo ainda preferindo a versão do MySQL, que uso já há algum tempo. Por incrível que pareça ela ainda consegue ser mais limpa, rápida e acurada do que as soluções feitas somente em PHP.

Para fazer esta comparação em MySQL basta utilizar a função TIMEDIFF dentro de uma query SELECT:

SELECT TIMEDIFF('AAAA-MM-DD HH:MM:SS', 'AAAA-MM-DD HH:MM:SS')

Se o primeiro parâmetro for uma data menor que o segundo, então o valor retornado será negativo, o que pode ser bom para em casos que você tenha que descobrir se algo já passou de algum prazo estipulado.

No PHP você poderia trabalhar da seguinte forma:

$sql = mysql_query("SELECT TIMEDIFF('2011-01-28 09:00:00','2011-01-28 00:00:10') as dif");

$time = mysql_fetch_array($sql);

echo($time[dif]);

O resultado final será a diferença em horas, o que em muitos casos é o suficiente, agora se você precisa de outros formatos, terá que recorrer a outras funções.

Até a próxima!

Macetes: Javascript, substituindo todas as ocorrências dentro de uma string (Replace All)

Ao contrário do PHP, o JavaScript não possui funções que fazem o replace de várias ocorrências de uma substring dentro de uma string, como acontece nas funções muito conhecidas pelos desenvolvedores do elefante azul: preg_replace() e str_replace().

Você pode até procurar e encontrar na net, funções denominadas replaceAll() que fazem este trabalho para você no Java Script, mas nenhuma delas é nativa da linguagem e sim funções criadas por usuários.

Infelizmente, como ocorreu comigo, estas funções geralmente apresentam bugs, principalmente quando você precisa escapar caracteres como \ (contra barra) e " (aspas duplas), que comumente precisam deste tipo de tratamento quando estamos trabalhando com strings.

O único método nativo do Java Script para fazer substituição dentro de strings é o método replace(), ele por padrão substitui apenas o primeiro valor encontrado e é ele quem serve de base para aquelas funções customizadas citadas anteriormente. Para felicidade geral, este método esconde um pequeno segredinho, que faz ele mudar seu comportamento e substituir todas as ocorrências dentro de um string. Confira abaixo:

//Uma string qualquer
var str = 'Vou incomodar você com estas "aspas duplas"';

//A primeira aspas duplas encontrada ganhará uma contra barra grátis
str = str.replace(/\"/,'\\"');

//Resultado: Vou incomodar você com estas \"aspas duplas"
document.write(str);

Como dito, apenas a primeira aspas duplas ganhou a contra barra, agora vamos utilizar o modificador g para fazer um Global Match e substituir todas as " por \".

//Uma string qualquer
var str = 'Vou incomodar você com estas "aspas duplas"';

//Repare onde você deve colocar o modificador (destacado em azul)
str = str.replace(/\"/g,'\\"');

//Resultado: Vou incomodar você com estas \"aspas duplas\"
document.write(str);

Espero que este macete possa lhe ajudar como me ajudou, apesar do "lance" das aspas ser apenas um exemplo, ele pode causar vários problemas, principalmente quando você esta criando uma string para criar um objeto JSON e dentro desta string você precisa permitir que sejam passados valores com aspas duplas, se elas não forem devidamente escapadas antes de você concatenar seu valor na string JSON, com certeza o Java Script vai berrar.

Abraço!

Macetes - Regex no Notepad++ - Reescrevendo valores

Vamos explicar este macete com uma pequena historinha, se quiser pulá-la e ir direto ao ponto, clique aqui.

Digamos que seu chefe passou hoje por você, te achou meio ocioso e decidiu sacanear você um pouco. Trouxe então uma planilha do Excel com uma lista interminável de clientes e pediu que você excluísse do sistema da empresa, todos os clientes que estão marcados como "desativado" na planilha.

Você sacando a jogada do seu chefe, aceitou de boa e ainda exclamou: "Meu, isso vai levar a tarde inteira, senão um dia inteiro!". Seu chefe, vendo seu desespero apenas respondeu: "Então, boa sorte!"

Como você já havia lido o post: "Macetes - Regex no Notepad++ - Reescrevendo valores" no Programação de Resultado, você calmamente acessou a já conhecida planilha e sabiamente ordenou todos os registros pelo id do cliente, que felizmente é igual tanto na planilha quanto no sistema. Selecionou então a coluna e colou todos os ids no seu Notepad++.

Em seguida com grande familiaridade, deu um CTRL+F na janela do Notepad++ e abriu a janela de Localizar, selecionou Expressão regular no canto inferior esquerdo da janela e digitou a seguinte expressão no campo Localizar : ([0-9]+), conferiu então se a expressão funcionou corretamente clicando no botão Localizar próximo e constatou que tudo ocorre bem.

Na sequência, ainda na janela Localizar, clicou na aba Substituir, posicionou o cursor do mouse no campo Substituir por e então digitou: DELETE FROM clientes WHERE id = \1;. Por fim clicou no botão Substituir todos e o Notepad++ fez a mágica de criar uma query para cada número encontrado no arquivo, você apenas executou a query no banco de dados e "Voilà", todos os clientes desativados foram excluídos do sistema como seu chefe pediu.

Agora, de duas uma, ou você chega para o seu chefe 5 minutos depois de te passar esta tarefa e diz que esta pronto fazendo "mó média" e ele apesar de espantado percebe que você sabia que ele tava te sacaneando e então você se aproveitou para sacanear ele também, mostrando o quanto você é bom e que não pode ser enrolado com essas tarefas frívolas, portanto ele decide contra sacanear e te passa mais trabalho (que frase longa), ou você faz tudo em 5 minutos e enrola um dia inteiro para entregar e chega para ele dizendo: "Aquela tarefa, esta pronta!", ele te questiona "Ok! Deu muito trabalho?", você fazendo aquela cara de "Ufa!", diz: "Que nada chefe, precisando estamos aí!".

A decisão é sua.

Explicando o macete

No notepad++ digite entre parênteses, uma expressão regular qualquer, isto informa ao Notepad++ que você esta procurando um grupo de caracteres em particular, estando a expressão entre parênteses você consegue utilizar o valor encontrado na hora de substituí-lo por outro, é como se nós concatenássemos o valor encontrado ao novo valor que queremos escrever.

No exemplo nós utilizamos: ([0-9]+), para encontrar todos os números possíveis no arquivo, o valor encontrado para esta expressão, ficará armazenado pelo Notepad++ e você poderá acessá-los por meio de uma série de palavras reservadas: \1, \2, \3, \4, \5 ..., sendo que \1 representa o valor encontrado no primeiro grupo, \2 o valor encontrado para o segundo grupo encontrado e assim por diante.

Espero que tenham apreciado o post. Até a próxima.