WebSVN – eFlore/Applications.eflore-consultation – /trunk/modules/popup_galerie/squelettes/popup_galerie_illustrations.tpl.html

<script type="text/javascript">
<!--
   var urls = [<?= '"'.implode($urls, '","').'"'; ?>]; 
   var ids = [<?= '"'.implode($ids, '","').'"'; ?>]; 
   var meta = new Array();
   var indexImage = 0;
   var urlImage = "<?= $url_image; ?>";
   var tailleMaxHauteur = 580;
   var tailleMaxlargeur = 680;
   var titre = "<?= $titre; ?>";
   var urlMeta = "<?= $url_meta; ?>";
   var urlContact = "<?= $url_contact; ?>";
   var referentiel = "<?= Registre::get('parametres.referentiel'); ?>";
   var metadonneesOuvertes = false;
   var hauteurSansMeta = null;
   
   function redimensionnerImage(objet) {
           
           objet.removeAttr("width"); 
           objet.removeAttr("height");
           
           var hauteurImage = objet.height();
           var largeurImage = objet.width();
           var rapport = 1;
           if(largeurImage > hauteurImage && largeurImage > tailleMaxlargeur) {
                   rapport = hauteurImage/largeurImage;
                   if(screen.width < 800) {
                        largeurImage = 540;
                        configurerAffichagePetiteTaille();
                   }
                   
                   hauteurImage = largeurImage*rapport;
                   $('#illustration').attr("height", hauteurImage);
                   $('#illustration').attr("width", largeurImage);
           }

           if(hauteurImage > largeurImage && hauteurImage > tailleMaxHauteur) {
                   rapport = largeurImage/hauteurImage;
                   if(screen.height < 800) {
                        hauteurImage = 340;
                        configurerAffichagePetiteTaille();
                   } else {
                        hauteurImage = 580;
                        $("#info-img-galerie").height('100%');
                   }
                   
                   largeurImage = hauteurImage*rapport;
                   $('#illustration').attr("height", hauteurImage);
                   $('#illustration').attr("width", largeurImage);
           }

           var facteurResize = 90;
           if($(window).height() < 800) {
               facteurResize = 10;
           }
           hauteurSansMeta = hauteurImage+facteurResize;
           window.resizeTo(largeurImage+260,hauteurImage+facteurResize+90);
   }

   function configurerAffichagePetiteTaille() {
        $("#info-img-galerie").height('100%');
        $('html').css('height', '100%');
        $('body').css('height', '100%');
        $("#zone-corps").height('100%');
        $("#zone-conteneur").height('100%');
   }
   
   function imageSuivante() {
           indexImage++;
           if(indexImage >= urls.length) {
                   indexImage = 0;
           }
           cacherMetadonnees();
           $('#illustration').attr('src', urls[indexImage]);
   }
   
   function imagePrecedente() {
           indexImage--;
           if(indexImage <= 0) {
                   indexImage = urls.length - 1;
           }
           cacherMetadonnees();
           $('#illustration').attr('src', urls[indexImage]);
   }
   
   function ouvrirFenetreIllustrationResultat(url, titre) {
                var fenetre = window.open('', titre+" - zoom ");
                var tmp = fenetre.document;
                tmp.write('<html><head><title>'+titre+" - zoom "+'</title>');
                tmp.write('</head><body>');
                tmp.write('<p style="height="100%";text-align:center;line-height="100%"><img id="image_agrandie" style="vertical-align:middle;" src="'+url+'" /></p>');
                tmp.write('</body></html>');
                tmp.clos();
        }
   
   function obtenirUrlContact(idImage, IdAuteur) {
           return urlContact.replace('{id_auteur}',IdAuteur).replace('{id_img}',idImage);
   }
   
   function formaterDate(string) {  
            var date = new Date();  
            var parts = String(string).split(/[- :]/);  
          
            date.setFullYear(parts[0]);  
            date.setMonth(parts[1] - 1);  
            date.setDate(parts[2]);  
            date.setHours(parts[3]);  
            date.setMinutes(parts[4]);  
            date.setSeconds(parts[5]);  
            date.setMilliseconds(0);  
            return (("0" + date.getDate()).slice(-2))+"/"+(("0"+(date.getMonth()+1)).slice(-2))+"/"+date.getFullYear();
   }
   
        function formaterMetadonnees(data) {
                data.contact_url = obtenirUrlContact(ids[indexImage], data['auteur.id']);
                data.id = ids[indexImage];
                data.date = formaterDate(data.date);
                return data;
        }
   
        function chargerEtAfficherMetadonnees() {
           $('#info-obs-meta').remove();
           indexImage = Math.max(indexImage, 0); // parfois on a -1 => wtf
           if(meta[ids[indexImage]] == null) {   
                        var urlMetaImage = urlMeta.replace('{projet}','cel').replace('{id}',ids[indexImage]).replace('{referentiel}',referentiel);
                        $.get(urlMetaImage, function(data) {
                                data = formaterMetadonnees(data);
                                afficherMetadonnees(data);
                                meta[ids[indexImage]] = data;
                        });
           } else {
                   afficherMetadonnees(meta[ids[indexImage]]);
           }    
        }
   
        function afficherMetadonnees(data) {
                $("#tpl-obs-meta").tmpl(data).appendTo('.img-cadre');
                //if($(window).height() > 800) {
                    window.resizeTo($(window).width(),hauteurSansMeta+300);
                //}
                $("#lien-voir-meta").html('Cacher les informations');
        }
   
   function cacherMetadonnees() {
           //if($(window).height() > 800) {
                    window.resizeTo($(window).width(),hauteurSansMeta);
           //}
           $('#info-obs-meta').remove();
           $("#lien-voir-meta").html('Informations sur cette image / Contacter l\'auteur');
           metadonneesOuvertes = false;
   }
   
   $(document).ready(function() {
           $('#precedent').click(function() {
                   imagePrecedente();
           });
           
           $('#suivant').click(function() {
                   imageSuivante();
           });

            if(!Array.indexOf){
                Array.indexOf = function(array, search){
                  for(var i=0; i<array.length; i++){
                      if(array[i]==search){
                        return i;
                      }
                  }
                  return -1;
                }
            }
           
           if(urlImage != "null" && urlImage != "") {
                   indexImage = Array.indexOf(urls, urlImage);
                   $('#illustration').attr('src', urls[indexImage]);
           }
           
           $('#illustration').load(function() {
                        redimensionnerImage($(this));
           });
           
           $('#illustration').click(function() {
                        ouvrirFenetreIllustrationResultat($(this).attr("src").replace("L","X3L"), titre);
           });
           
           $("#lien-voir-meta").click(function() {
                   metadonneesOuvertes = !metadonneesOuvertes;
                   if(metadonneesOuvertes) {
                                chargerEtAfficherMetadonnees();  
                   } else {
                                cacherMetadonnees();
                   }
           });
           
           $("body").keydown(function(e) {
                        if(e.keyCode == 37) { // gauche
                                imagePrecedente();
                        }
                        else if(e.keyCode == 39) { // droite
                                imageSuivante();
                        }
                });
             
           $('#zone-pied').hide();
   });
 // -->
</script>

<!-- Squelette du contenu du tableau des observation -->
<script id="tpl-obs-meta" type="text/x-jquery-tmpl">
        <div id="info-obs-meta" class="importance1">
                <dl>
                        <dt>Photo n°</dt><dd>${id}</dd>
                        <dt>Titre</dt><dd>${$data["determination.nom_sci"]}</dd>
                        <dt>Description</dt><dd>${$data['determination.libelle']}</dd>
                        <dd><a target="_blank" title="Signaler une mauvaise identification sur IdentiPlante"
                                           href="http://www.tela-botanica.org/appli:identiplante#obs~${$data["observation.id"]}">
                                                Signaler une mauvaise identification
                                        </a><br /></dd>
                        <dt>Localisation</dt><dd>${$data['station.commune']}</dd>
                        <dt>Auteur</dt>
                        <dd>
                                ${$data['auteur.libelle']}
                                <a class="mailto" href="${contact_url}">(Contacter ...)</a>
                        </dd>
                        <dt>Date d'observation</dt><dd>${date}</dd>
                        <dt>Licence</dt><dd><a class="lien-externe" href="https://www.tela-botanica.org/page:licence">CC-BY-SA 2.0 FR</a></dd>
                </dl>
        </div>
</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="" title="cliquez pour voir cette image dans son format original" /><br />
                        <a id="lien-voir-meta" href="#" title="cliquez ici pour voir les métadonnées de l'image et contacter l'auteur">Informations sur cette image / Contacter l'auteur</a>
        </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>
Subversion Repositories eFlore/Applications.eflore-consultation

(root)/trunk/modules/popup_galerie/squelettes/popup_galerie_illustrations.tpl.html – Rev 1579
