Front IDILL :
Creation of the main parts of the 2 first Modes :
MOSAIC : prezoom/preunzoom, zoom/unzoom.
local mosaic developpement aborted and postponed for the late developpement parts.
VIDEO : moving to a neighbour snapshot.
<!--
/*
* This file is part of the TraKERS\Front IDILL package.
*
* (c) IRI <http://www.iri.centrepompidou.fr/>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
/*
* Projet : TraKERS
* Module : Front IDILL
* Fichier : index.html
*
* Auteur : alexandre.bastien@iri.centrepompidou.fr
*
* Fonctionnalités : Centralise les différents éléments du Front IDILL, tels que les classes javascript, les fonctions jQuery, les css.
*/
-->
<!doctype html>
<html>
<head>
<!-- On inclut les styles et les scripts utilisés. -->
<title>IDILL</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./mosaic/css/reset.css" />
<link rel="stylesheet/less" type="text/css" href="./mosaic/css/mosaic.less" />
<script type="text/javascript" language="javascript" src="../lib/less-1.3.0.min.js"></script>
<script type="text/javascript" language="javascript" src="../lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="./mosaic/js/mosaic.js"></script>
<script type="text/javascript" language="javascript" src="./mosaic/js/localMosaic.js"></script>
</head>
<body>
<!-- Ce div stocke la mosaïque. -->
<div id="mainPanel">
</div>
<!-- SET AN EMPTY DIV TO BE POPULATED WITH CONTENT VIA JQUERY -->
<div class="test" style="color: #FFFFFF"></div>
<!-- Scripts principaux. -->
<script type="text/javascript" language="javascript">
//Longueur de la mosaïques et nombre d'images à afficher (seront importés des paramètres du Middleware).
var length = 7, imagesToShow = 42;
//Temps de chargement du prezoom en ms (seront importés des paramètres du Middleware).
var timePrezoom = 500, timePreUnzoom = 200, timeZoom = 500, timeUnzoom = 400;
var timeNeighbourGlowing = 1000, timeNeighbourUnglowing = 1000, timeMovingToNeighbour = 1000;
var zoomPercentage = 0.90, prezoomPercentage = 0.20;
var zoomedMargin = 42;
//On instancie la mosaïque.
var mos = new mosaic(length, imagesToShow, zoomPercentage, prezoomPercentage, zoomedMargin);
//On spécifie les attributs de temps.
mos.zoomTime = timeZoom;
mos.unzoomTime = timeUnzoom;
mos.preZoomTime = timePrezoom;
mos.preUnzoomTime = timePreUnzoom;
mos.timeNeighbourGlowing = timeNeighbourGlowing;
mos.timeNeighbourUnglowing = timeNeighbourUnglowing;
mos.timeMovingToNeighbour = timeMovingToNeighbour;
//On instancie une mosaïque locale pour le zoom total (pas encore implémenté).
var lMos = new localMosaic(length, imagesToShow, zoomedMargin);
mos.localMos = lMos;
//Tableau d'images de test pour peupler la mosaïque.
var imgs = [];
for(var i = 0 ; i < 42 ; i++)
imgs[i] = i + '.jpg';
//Si on a changé les dimensions de la fenêtre, on raffraichit la mosaïque.
$(window).resize(function ()
{
mos.loadMosaic(imgs);
});
//Si la page a chargé, on raffraichit la mosaïque.
$(document).ready(function ()
{
mos.loadMosaic(imgs);
$('.snapshotDivs').mouseenter(function ()
{
//On effectue un prézoom dès qu'on va sur une image.
mos.preZoom($(this));
});
$('body').keypress(function (event)
{
//Si on a appuié sur la touche 'q' ou 'Q';
if(event.which == 113 || event.which == 81)
mos.unzoom();
});
});
</script>
</body>
</html>