HEX

File: /home/iestorre/www2/proyectointegrado/2bachA/derivadas/galleryPopup.1.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Galería de imágenes</title>
    <!-- preview mode -->
    <style type="text/css">@import url(/style/base.css);</style>
    <style type="text/css">@import url(/style/default/content.css);</style>
    <!-- export mode -->
    <style type="text/css">@import url(base.css);</style>
    <style type="text/css">@import url(content.css);</style>
    <script type="text/javascript">
//<![CDATA[
  var maxWidth = 320.0;
  var maxHeight = 240.0;
  var thWidth = maxWidth; var thHeight = maxHeight;

  var images = ['MAX.gif']
  var titles = ['']
  var imageIdx = 0;
  var p = window.location.href.search(/=(\d+)$/);
  if (p >= 0) {
    imageIdx = parseInt(window.location.href.substr(p+1));
    if ((imageIdx < 0) || (imageIdx > (images.length - 1))) { imageIdx = 0; }
  }
  var imageExpanded = false;
  var imgObj = new Image();
  imgObj.onload = function () { getShrinkMod(); toggleZoom(); }
  imgObj.src = images[imageIdx];

function getShrinkMod() {
  thWidth = imgObj.width;
  thHeight = imgObj.height;
  if (imgObj.width > maxWidth) {
    thHeight = imgObj.height * maxWidth / imgObj.width;
    thWidth = maxWidth;
  }
  if (thHeight > maxHeight) {
    thWidth = thWidth * maxHeight / thHeight;
    thHeight = maxHeight;
  }
}
function toggleZoom() {
  var imgEle = document.getElementById("the_image");
  if (imageExpanded) {
    imgEle.width = thWidth; imgEle.height = thHeight;
  } else {
    imgEle.width = imgObj.width; imgEle.height = imgObj.height;
  }
  imageExpanded = !imageExpanded;
}

// Goes one image forward (if possible), then updates the screen
function next() {
    if (imageIdx < images.length - 1) {
        imageIdx++;
        imageExpanded = true;
        updateWindow();
    }
}

// Goes one image back (if possible), then updates the screen
function prev() {
    if (imageIdx > 0) {
        imageIdx--;
        imageExpanded = true;
        updateWindow();
    }
}

// Updates the screen
function updateWindow() {
    // Show/hide previous button
    var btnPrev = document.getElementById("btnPrev");
    if (imageIdx > 0) {
        btnPrev.style.display = "block";
    } else {
        btnPrev.style.display = "none";
    }
    // Show/hide next button
    var btnNext = document.getElementById("btnNext");
    if (imageIdx < images.length - 1) {
        btnNext.style.display = "block";
    } else {
        btnNext.style.display = "none";
    }
    // Update image
    var imgEle = document.getElementById("the_image");
    imgObj.src = images[imageIdx];
    imgEle.src = images[imageIdx];
    // Update title
    var title = document.getElementById("nodeTitle");
    if (titles[imageIdx] == "") {
        title.innerHTML = "&nbsp;"
    } else {
        title.innerHTML = titles[imageIdx];
    }
}
//]]>
</script></head>
<body onLoad="updateWindow()">
  <h1 id="nodeTitle"></h1>
  <p align="center">
    <table width="100%">
      <tr>
         <td width="33%" align="right"><a href="javascript:prev()" id="btnPrev">Anterior</a></td>
         <td width="33%" align="center"><a href="javascript:window.close()">Cerrar</a></td>
         <td width="33%" align="left"><a href="javascript:next()" id="btnNext">Siguiente</a></td>
      </tr>
      <tr>
        <td colspan="3" align="center" width="100%"><a href="javascript:toggleZoom()"><img class="gallery" width="320.0" height="240.0" id="the_image" src="MAX.gif" /></a></td>
      </tr>
    </table>
  </p>
</body></html>