Subversion Repositories eFlore/Applications.cel

Rev

Rev 1495 | Rev 3630 | 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="https://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 infos = decouperTitre(titre);
           var lienContact = '<?= $url_widget ?>?mode=contact&nn='+infos.nn+
                                                '&nom_sci='+infos.nom_sci+
                                                '&date='+infos.date+
                                                '&id_image='+item['guid'];
       titre = '<a href="'+item['lien']+'">'+infos.nom_sci+'</a> '+
                   ' par <a class="lien_contact" href="'+lienContact+'">'+infos.auteur+'</a> '+ 
                   ' le '+infos.date+' '; 
           $('#bloc-infos-img').html(titre);
   }
   
   function decouperTitre(titre) {
                var tab_titre = titre.split('[nn');
                var nom_sci = tab_titre[0];
                var tab_titre_suite = tab_titre[1].split(' par ');
                var nn = '[nn'+tab_titre_suite[0];
                var tab_titre_fin = tab_titre_suite[1].split(' le ');
                var utilisateur = tab_titre_fin[0];
                var date = tab_titre_fin[1];
                
                var titre_decoupe = {'nom_sci' : nom_sci, 'nn' : nn, 'date' : date, 'auteur' : utilisateur};
                return titre_decoupe;
        }
   
   function ouvrirFenetreContact(lienImage) {
                var url = lienImage.attr("href");
                window.open(url, '_blank', 'directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no, width='+(400)+', height='+(550));
   }
   
   $(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();
                        }
                });
           
           $('.lien_contact').live('click', function(event) {
                  event.preventDefault();
                  ouvrirFenetreContact($(this)); 
           });
   });
//]]>
</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="https://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="https://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>