Tiles!!!
Idea for a gallery
Magari è un'idea già utilizzata da molti quella della galleria a caselle quadrate, effetto mosaico, ma volevo crearne una anche io senza ausilio di grandi script: tutto in CSS responsive (ridimensionando la finestra potete vedere come il contenuto si adatta) e con eventi touch per mobile!
[in termini cool: jquery responsive tiled gallery plugin]
Le caselle sono animate e si scambiano casualmente il contenuto
Necessario preparare immagini ridimensionalizzate e rese quadrate (in realtà è possibile modificare il foglio di stile per avere aspect-ratio diversi), importante che tutte siano delle stesse dimensioni. In questo esempio sono 180×180px.
Un'esempio puro senza bordi lo vedete qui: micro example!
Istruzioni
HTML
Nella sezione head del documento aggiungiamo i link agli stili e script base:
<head>
...
<script src="JS/square-gallery-lightbox.min.js"></script>
...
<link rel="stylesheet" type="text/css" href="CSS/square-gallery-lightbox.min.css">
...
</head>
Nel body del documento aggiungiamo dei blocchi con id personalizzato, che verranno riempiti dalla galleria:
<body>
...
<div id="custom-gallery-id"></div>
...
<div id="custom-gallery-id-2"></div>
...
</body>
Script
Inizializziamo un array contenente i dati delle immagini:
//the array must contain the thumbnail url and the big image url. Optionally you can include a description too.
//here an example if you named all the files like "face-#", where # = (int) 1,2,3...40
var squares = new Array(40);
for (var i=1;i<=40;i++){
squares[i-1] = ['IMAGES/squares/face-'+i+'.jpg', 'IMAGES/face-'+i+'.jpg'];
}
//obviously you can also create the array manually, and/or with other languages:
squares.push(['IMAGES/squares/face-41.jpg', 'IMAGES/face-41.jpg', "This is a description!\nWith new lines."]);
Passiamo tutte le variabili creando l'oggetto new TA():
var gallery = new TA({
id : "#custom-gallery-id",
//mandatory - no default
//the id of the html element to fill with tiles
images : squares
//mandatory - no default
//array containing arrays with url of thumbnail, url of original image, optional description.
from : 5,
//optional - default = 0
//define from what image create tiles
n : 32,
//optional - default = images length
//how many tiles initialize. For default CSS it should be a multiple of 8 for better visualization.
//If you want to use other multiples, then the last row wouldn't be filled.
//For using other multiples it's recommended to change the CSS accordingly.
fill : 2,
//optional - default = 3
//0 : image fully contained in screen with margins
//1 : as 0, but without margins
//2 : fill the whole screen (if possible)
//3 : auto adapt based on screen area (uses 0, 1, 2 the bigger is the screen)
autostart : true
//optional - default = true
});
API
E' possibile inizializzare la galleria di immagini anche dopo averla dichiarata:
gallery = new TA();
gallery.ini({ /* vedi punto precedente */ });
E' possibile anche modificare le impostazioni di default se avete apportato modifiche agli stili CSS e/o per aumentare la frequenza delle animazioni:
//how many tiles rotate at the same time:
gallery.rotMany = 1; //(int) 0, 1, 2...
//frequency to apply a random rotation:
gallery.rotDelay = 500; //(int) milliseconds
//probability of rotation for each called tile (depends by )
gallery.probability = 0.85; //(int) milliseconds
//minimum delay before apply another rotation to same tile.
//MUST be at least long as the CSS transition (default 600ms)
gallery.rotDuration = 650; //(int) milliseconds
Infine si possono richiamare le funzioni base per controllare la gallery:
//stop tiles sliding:
gallery.stop();
//start tiles sliding:
gallery.rotate();
//toggle (on/off) tiles sliding:
gallery.toggle();
//force a tile rotation
gallery.rotateTile(5);//index must exist, eg. 5th in the array [squares]
Browser support
Per far girare il plugin anche in IE7/8 inserire il polyfill di indexOf
Permissions
Tutto il codice qui presentato è open source, free of charge, gratuito e libero. Potete utilizzarlo come e dove volete: è rilasciato con licenza MIT
Le immagini qui presentate non sono di mia proprietà, ma raccolte random da internet. Per qualsiasi problema su diritti d'autore ed altro contattatemi e provvederò a rimuovere quelle protette.
Github Repository