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);
									}
								}
							});