logo da 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:
<link rel="stylesheet" href="css/slideMosaic.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jsExtended.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.slideMosaic.js"></script>


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

Insira um div com um ID único. Este será o contentor dos mosaicos.
<div id="slideMosaic"></div>


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
diagrama - diagram

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.



Compatibilidade
Compatibility


firefox chrome opera safari internet explorer
3.6+ 10+ 11+ 5+ 6+




Demo




thumbnails thumbnails thumbnails thumbnails




Download

Faça o download do github

Download from github


Bugs

Para bugs e outros assuntos, use a funcionalidade do github.

For bugs and other issues, use github issues.
contactos
 
Arrisco - Publicidade e Design, Lda
Rua Jerónimo Mendonça 262
4200-335 Porto

Telf. +351 222 085 914
email: contactos