Subversion Repositories eFlore/Applications.cel

Rev

Rev 1495 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="<?=$url_css?>popup.css" media="screen" />
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6/jquery-1.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>]; 
   var infos_images = <?= json_encode($infos_images); ?>;
   var indexImage = 0;
   var urlImage = "<?= $url_image; ?>";
   var tailleMax = 580;
   
   function redimensionnerImage(objet) {
           
           objet.removeAttr("width"); 
           objet.removeAttr("height");
           
           var hauteurImage = objet.height();
           var largeurImage = objet.width();
           var rapport = 1;
           if(hauteurImage > largeurImage && hauteurImage > tailleMax) {
                   rapport = largeurImage/hauteurImage;
                   hauteurImage = 580;
                   
                   largeurImage = hauteurImage*rapport;
                   $('#illustration').attr("height", hauteurImage);
                   $('#illustration').attr("width", largeurImage);
           }
           hauteurFleches = ((hauteurImage+90)/2);   
           $('#info-img-galerie .conteneur-precedent').attr("top", hauteurFleches);
           $('#info-img-galerie .conteneur-suivant').attr("top", hauteurFleches);
           
           window.resizeTo(largeurImage+120,hauteurImage+120);
   }
   
   function imageSuivante() {
           indexImage++;
           if(indexImage >= urls.length) {
                   indexImage = 0;
           }
           afficherTitreImage();
           $('#illustration').attr('src', urls[indexImage]);
   }
   
   function imagePrecedente() {
           indexImage--;
           if(indexImage <= 0) {
                   indexImage = urls.length - 1;
           }
           afficherTitreImage();
           $('#illustration').attr('src', urls[indexImage]);
   }
   
   function afficherTitreImage() {
           item = infos_images[urls[indexImage]];
           var titre = item['titre'];
           var pattern = new RegExp('^(.*\])');
           pattern.compile(pattern); 
           var matches = pattern.exec(titre);
           var remplacement = titre;
           if(matches.length > 0) {
                   remplacement = matches[0];
           }
       titre = titre.replace(remplacement, '<a href="'+item['lien']+'">'+remplacement+'</a>'); 
           $('#bloc-infos-img').html(titre);
   }
   
   $(document).ready(function() {
           $('#precedent').click(function() {
                   imagePrecedente();
           });
           
           $('#suivant').click(function() {
                   imageSuivante();
           });
           
           if(urlImage != "null" && urlImage != "") {
                   indexImage = Array.indexOf(urls, urlImage);
                   $('#illustration').attr('src', urls[indexImage]);
                   afficherTitreImage();
           }
           
           $('#illustration').load(function() {
                        redimensionnerImage($(this));
           });
           
           $("body").keydown(function(e) {
                        if(e.keyCode == 37) { // gauche
                                imagePrecedente();
                        }
                        else if(e.keyCode == 39) { // droite
                                imageSuivante();
                        }
                });
   });
//]]>
</script>

<div id="info-img-galerie">
        <div class="conteneur-precedent">
                <a id="precedent" href="#" title="cliquez ici ou utilisez la flèche gauche pour afficher l'image précédente"> 
                        <img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheGauche.jpg" alt="&lt;" />
                </a>
        </div>
        <div class="img-cadre">
                        <img id="illustration" src="<?=$urls[0]?>" alt="" /><br />
        </div>
        <div class="conteneur-suivant">
                <a id="suivant" href="#" title="cliquez ici ou utilisez la flèche droite pour afficher l'image suivante">
                        <img style="border:none" src="http://www.tela-botanica.org/sites/commun/generique/images/flecheDroite.jpg" alt="&gt;" />
                </a>
        </div>
        <hr class="nettoyage" />
        <div id="bloc-infos-img"></div>
</div>
</body>
</html>