front_idill/src/index.html
changeset 30 45c889eae324
child 31 2c7fc855eba8
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/index.html	Fri Apr 27 14:38:23 2012 +0200
@@ -0,0 +1,96 @@
+<!--
+/*
+* 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>
\ No newline at end of file