WM Gridfolio - Plugin jQuery para galeria de conteúdo estilo portfólio.
Opções de configuração do plugin WM Gridfolio.
Objetos principais
Os seguintes objetos são os objetos de primeiro nível para a configuração e customização do plugin WM Gridfolio. Exemplo:
$(document).ready(function(){ $('.my-grid').WMGridfolio({ selectors : {}, thumbnail : {}, details : {}, config : {}, callbacks : {} }); });
- selectors
-
Objeto que configura os seletores dos elementos usados no plugin. Use apenas classes. Se customizar os seletores você deverá editar o css do plugin com as novas classes correspondentes.
Exemplo:$('.my-grid').WMGridfolio({ selectors : { item : "wmg-item", thumbnail : 'wmg-thumbnail', } });
- thumbnail
-
Objeto que configura as opções do thumbnail.
Exemplo:$('.my-grid').WMGridfolio({ thumbnail : { columns : 6, } });
- details
-
Objeto que configura as opções do detalhe.
Exemplo:$('.my-grid').WMGridfolio({ details : { minHeight : 400, } });
- config
-
Objeto que configura as opções gerais do plugin.
Exemplo:$('.my-grid').WMGridfolio({ config : { openToTop : true, } });
Seletores dos elementos
Os seletores para os elementos do plugin devem ser classes css. As seguintes opções são para o objeto selectors
atributo | Descrição |
---|---|
item | Seletor para os itens do plugin. Default "wmg-item" |
thumbnail | Seletor para os thumbnails do plugin. Default "wmg-thumbnail" |
details | Seletor para o box de detalhes do plugin. Default "wmg-details" |
close | Seletor para o botão de fechar o detalhe. Default "wmg-close" |
arrow | Seletor para a seta que liga o detalhe ao thumbnail. Default "wmg-arrow" |
Exemplo:
$('.my-grid').WMGridfolio({ selectors : { item : 'wmg-item', thumbnail : 'wmg-thumbnail', details : 'wmg-details', close : 'wmg-close', arrow : 'wmg-arrow' } });
Configurando o thumbnail
Veja agora como customizar algumas opçoes do thumbnial. As seguintes opções são para o objeto thumbnail
atributo | Descrição |
---|---|
columns | Configura o máximo de colunas para o grid. Default 6 |
minSize | Configura a largura e altura mínimas para o thumbnail. Default 100 |
margin | Configura a margem entre os thumbnail. Default 5 |
Exemplo:
$('.my-grid').WMGridfolio({ thumbnail : { columns : 6, minSize : 100, margin : 5 } });
Configurando o box de detalhe
Veja agora como customizar algumas opçoes do box de detalhe. As seguintes opções são para o objeto details
atributo | Descrição |
---|---|
minHeight | Configura a altura mínima do box de detalhes do grid. Default 400 |
speed | Configura a velociade da animação de abertura do box de detalhe. Default 350 |
full_w | Configura se o box de detalhes respeitará as margens esquerda e direta dos thumbnails (false) ou se terá a largura fullsize (true). Default false |
Exemplo:
$('.my-grid').WMGridfolio({ details : { minHeight : 400, speed : 350, full_w : false } });
Configurações gerais do plugin
Veja agora as configurações gerais para o plugin. As seguintes opções são para o objeto config
atributo | Descrição |
---|---|
open | Configura a classe aplicada em alguns elementos quando o plugin está exibindo algum detalhe. Default "open" |
openToTop | Configura o plugin para rolar a página até o thumbnail clicado. Default true |
hasImg | Caso o thumbnail seja imagem algumas regras css serão aplicadas para centraliza-la vertical e horizontalmente. Default true |
keepOpen | Mantém o box de detalhe aberto ao se clicar em outro thumbnail. Default false |
onlyThumb | Caso você queira apenas a exibição do thumbnail sem a necessidade de mostrar algum conteúdo ao se clicar nele. Default false |
Exemplo:
$('.my-grid').WMGridfolio({ config : { open : 'open', openToTop : true, hasImg : true, keepOpen : false, onlyThumb : false } });
Status dos elementos
Quando um detalhe do grid está aberto o plugin aplica a classe configurada em config.open em alguns elementos, indicando que existe um elemento aberto e qual elemento esta aberto. Dessa forma você poderá customizar o css de acordo com o status dos elementos. Veja um exemplo:
Callbacks
O plugin executa alguns callbacks no carregamento do grid e na visualização do detalhe. As seguintes opções são para o objeto callbacks
Caso você pode configurar funçoes proprietárias para serem executadas nesses callbacks. Para facilitar o plugin disponibiliza os seguintes elementos para serem usadas nessas funçoes.
- this.container
- Retorna o container principal de todos os intens.
- this.element
- Retorna todos os itens caso não haja algum detalhe aberto. Se houver um detalhe aberto retorna o item correspondente.
- this.thumbnail
- Retorna todos os thumbnails caso não haja algum detalhe aberto. Se houver um detalhe aberto retorna o thumbnail correspondente.
- this.details
- Retorna todos os box de detalhe caso não haja algum detalhe aberto. Se houver um detalhe aberto retorna o box de detalhe correspondente.
- this.close
- Retorna todos os botões de fechar caso não haja algum detalhe aberto. Se houver um detalhe aberto retorna o botão de fechar correspondente.
Exemplo:
$('.my-grid').WMGridfolio({ callbacks : { CB_OpenDetail : function(){ console.log(this.container); console.log(this.element); console.log(this.thumbnail); console.log(this.details); console.log(this.close); } } });
atributo | Descrição | Exemplo |
---|---|---|
CB_LoadGrid | Executado após o carregamento do grid. Default false |
$('.my-grid').WMGridfolio({ callbacks : { CB_LoadGrid : function(){} } }); |
CB_ResizeGrid | Executado quando a janela é redimensionada. Default false |
$('.my-grid').WMGridfolio({ callbacks : { CB_ResizeGrid : function(){} } }); |
CB_OpenDetail | Executado quando um detalhe é aberto. Default false |
$('.my-grid').WMGridfolio({ callbacks : { CB_OpenDetail : function(){} } }); |
CB_CloseDetail | Executado quando um detalhe é fechado para a visualização de outro. Na prática é quando se clica em outro thumbnail. Default false |
$('.my-grid').WMGridfolio({ callbacks : { CB_CloseDetail : function(){} } }); |
CB_CloseAll | Executado quando um detalhe é fechado. Na prática é quando se clica no botão de fechar. Default false |
$('.my-grid').WMGridfolio({ callbacks : { CB_CloseAll : function(){} } }); |
Exemplo:
$('.my-grid').WMGridfolio({ callbacks : { CB_LoadGrid : function(){ console.log(this.container); console.log(this.element); console.log(this.thumbnail); console.log(this.details); console.log(this.close); }, CB_ResizeGrid : function(){ console.log(this.container); console.log(this.element); console.log(this.thumbnail); console.log(this.details); console.log(this.close); }, CB_OpenDetail : function(){ console.log(this.container); console.log(this.element); console.log(this.thumbnail); console.log(this.details); console.log(this.close); }, CB_CloseDetail : function(){ console.log(this.container); console.log(this.element); console.log(this.thumbnail); console.log(this.details); console.log(this.close); }, CB_CloseAll : function(){ console.log(this.container); console.log(this.element); console.log(this.thumbnail); console.log(this.details); console.log(this.close); } } });