jQuery.slideMosaic - Arrisco

jQuery slideMosaic

Salvo indicação em contrário todos os módulos serão disponibilizados sob a licença MIT.

Unless otherwise stated all modlules are released un the MIT license.

Dependências

jQuery 1.4 (poderá funcionar com outras versões)
jsExtended.js (versão 0.0.1 ou superior) - incluído no download

Dependencies

jQuery 1.4 (may work with other versions)
jsExtended.js (versão 0.0.1 or superior) - included in the download

Instalação

Inserir as seguintes linhas na secção do documento:

Install

Insert the following lines in the section of the document:

Insira um div com um ID único. Este será o contentor dos mosaicos.

Edite o CSS para formatar o contentor dos mosaicos:

Edit the CSS to format the mosaic container:

#slideMosaicContentor{
    position: absolute;
    margin-top: 36px;
    margin-left: 288px;
    border: 1px solid silver;
    background-color: #242424;
    overflow: hidden;
    width: 674px;
    height: 249px;
    z-index: 1;
}

Insira links para as imagens que pretende mostrar como mosaico

Insert links with the images to show as mosaics

      <a href="javascript:void($('#slideMosaic').slidemosaic({'
               currentImage' : 'img/image_01.jpg',
               'lines': 4,
               'columns': 3}));">
                  <img src="img/thumb_image_01.jpg" alt="thumbnails" />
      </a>
    });

O diagrama seguinte explica a forma de funcionamento do plugin

Next diagram explains how the pplugins works

A – Contentor - Container

Marca o espaço do slideMosaic. Pode conter 'border'

Marks the slide Mosaic space. Can have a border.

B – Capa - Overlay

Mantem a imagem anterior como fundo. É gerado automaticamente.

Keeps previous image as backgroud-image. It’s automatically generated.

C – Mosaicos - Mosaics

Os mosaicos. É gerado automaticamente.

The mosaics. It’s automatically generated.

Opções do plugin

A tabela seguinte indica quais as opções do plugin

Plugin options

Next table explains the plugin options

Opção Option	Valor por defeito Default value	Explicação Explanation
currentImage	''	É a imagem passada ao plugin para ser partida em mosaicos. It’s the image passed to the plugin in order to be broken into mosaics.
lines	3	Número de linhas para os mosaicos. Number of lines for the mosaics
columns	3	Número de colunas para os mosaicos. Number of columns for the mosaics
containerTime	200	Duração de animação de redimensionamento do contentor. Em milésimos de segundo. Duration of the container animation when resizing is needed. In miliseconds.
mosaicTime	200	Espera entre mosaicos. Em milésimos de segundo. Delay between mosaics. In miliseconds.
slideLeft	200	Deslocamento da esquerda da entrada dos mosaicos. em pixéis Left offset of entering mosaics. Value in pixels.
slideTop	200	Deslocamento do topo da entrada dos mosaicos. em pixéis Top offset of entering mosaics. Value in pixels.