| New file |
|---|
| 0,0 → 1,145 |
|---|
| <!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="<" /> |
| </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=">" /> |
| </a> |
| </div> |
| <hr class="nettoyage" /> |
| <div id="bloc-infos-img"></div> |
| </div> |
| </body> |
| </html> |