title: HIGHSLIDE JS : fixed position of the gallery
body: <p>I'm using Highslide for show some images on my website. 
  Look here to know what I'm using : <a href="http://highslide.com" rel="nofollow">http://highslide.com</a></p>
  
  <p>I use autoloading because I want just see the popup without the gallery. It seems to work fine. But I want it to stay in the same place no matter where I am in the page.</p>
  
  <p>How can I fix the popup of my highslide galery (like a div in a relative position) ?</p>
  
  <p>I try it with targetX &amp; targetY elements but that works just when I load the page; when I click on an other image, the popup "follows" the size of the page.</p>
  
  <p>My site is not online but check my code here :
  In the head of my page :</p>
  
  <pre><code>&lt;head&gt;
  &lt;!--HIGHSLIDE - GALERIE D'IMAGES --&gt;
  &lt;script type="text/javascript" src="&lt;?php echo "http://".CHEMIN_HIGHSLIDE."highslide-full.js"; ?&gt;"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="&lt;?php echo "http://".CHEMIN_HIGHSLIDE."highslide.config.js"; ?&gt;" charset="utf-8"&gt;&lt;/script&gt;       
  &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo "http://".CHEMIN_HIGHSLIDE."highslide.css"; ?&gt;" /&gt;
      &lt;!--[if lt IE 7]&gt;
      &lt;link rel="stylesheet" type="text/css" href="&lt;?php echo "http://".CHEMIN_HIGHSLIDE."highslide-ie6.css"; ?&gt;" /&gt;
      &lt;![endif]--&gt;
  &lt;script type="text/javascript"&gt;          
  &lt;!--HIGHSLIDE GALERIE--&gt;
      //GLOBAL
          hs.graphicsDir = 'highslide/graphics/';
          hs.align = 'center';           
          hs.showCredits = true;
          hs.outlineType = null;
          hs.expandDuration = 0;//ms
          hs.outlineWhileAnimating = 1;
          hs.padToMinWidth = true;
          hs.width = 700;
          hs.height = 480;
          hs.allowMultipleInstances = false;
          hs.blockRightClick = true;
          hs.captionOverlay.position = 'above';
          hs.headingEval = 'this.thumb.title';
          hs.targetX = null; //null dc suit le flux
          hs.targetY ='target 5px'; // div="target", 5px à droite
      //FRENCH language strings
      hs.lang = {
          cssDirection: 'ltr',
          loadingText: 'Chargement...',
          loadingTitle: 'Cliquer pour annuler',
          creditsText: 'Propulsé par &lt;i&gt;Highslide JS&lt;/i&gt;',
          creditsTitle: 'Site Web de Highslide JS',
          previousText: 'Précédente',
          nextText: 'Suivante',
          moveText: 'Déplacer',
          playText: 'Lancer',
          playTitle: 'Lancer le diaporama (barre d\'espace)',
          pauseText: 'Pause',
          pauseTitle: 'Suspendre le diaporama (barre d\'espace)',
          previousTitle: 'Précédente (flèche gauche)',
          nextTitle: 'Suivante (flèche droite)',
          restoreTitle: 'Utiliser les touches flèches droite et gauche pour suivant et précédent.'
      }; 
  //AUTOLOAD     
      // Open the first image on page load
      hs.addEventListener(window, "load", function() {       
          // click the element virtually:
              document.getElementById("autoload").onclick();
      });    
      // Prevent closing the image when clicking the dimmed background
      hs.onDimmerClick = function() {
          return false;
      }
      // Keep the position after window resize
      hs.addEventListener(window, 'resize', function() {
          var i, exp;
          hs.page = hs.getPageSize();
          for (i = 0; i &lt; hs.expanders.length; i++) {
              exp = hs.expanders[i];
              if (exp) {
                  var x = exp.x,
                      y = exp.y;
                  // get new thumb positions
                  exp.tpos = hs.getPosition(exp.el);
                  x.calcThumb();
                  y.calcThumb();
                  // calculate new popup position
                  x.pos = x.tpos - x.cb + x.tb;
                  x.scroll = hs.page.scrollLeft;
                  x.clientSize = hs.page.width;
                  y.pos = y.tpos - y.cb + y.tb;
                  y.scroll = hs.page.scrollTop;
                  y.clientSize = hs.page.height;
                  exp.justify(x, true);
                  exp.justify(y, true);
                  // set new left and top to wrapper and outline
                  exp.moveTo(x.pos, y.pos);
              }
          }
      });    
      // Cancel the default action for image click and do next instead
      hs.Expander.prototype.onImageClick = function (sender) {
          return hs.next();
      }
          var galleryOptions = {
              slideshowGroup: 'group1',
              transitions: ['expand', 'crossfade']
          }; 
          // Add the slideshow providing the controlbar and the thumbstrip
          hs.addSlideshow({
              slideshowGroup: 'group1',
              interval: 3000,
              repeat: true,
              useControls: true,
              fixedControls: 'fit',
              overlayOptions: {
                  opacity: 0.85,
                  position: 'bottom center',
                  relativeTo: 'image',
                  offsetX: 0,
                  offsetY: 5,
                  hideOnMouseOut: true
              },
              thumbstrip: {
                  mode: 'horizontal',
                  position: 'below',
                  relativeTo: 'image'
              }
          });
          //place for the thumbstrip
          hs.Expander.prototype.onInit = function() {
             hs.marginBottom = (this.slideshowGroup == 'group1') ? 105 : 15;
          };
  &lt;/script&gt;
  &lt;title&gt;Titre&lt;/title&gt;
  </code></pre>
  
  <p></p>
  
  <p>In the body :</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="container"&gt;
      &lt;div id="content"&gt;
          &lt;div id="en_tete"&gt;
              header
          &lt;/div&gt;
          &lt;div id="contenu"&gt;
              &lt;div id="target"&gt;
                  //target for the place of highslide gallery in the page
              &lt;/div&gt;
              &lt;div class="highslide-gallery"&gt;
              &lt;?php
                  //array of images to show (I keep it otherwhere)
                  $array=array(
                      array('nom'=&gt;'image 1','lien'=&gt;'link_img_1','txt'=&gt;'Text sup image 1'),
                      array('nom'=&gt;'image 2','lien'=&gt;'link_img_2','txt'=&gt;'Text sup image 2'),
                      array('nom'=&gt;'image 3','lien'=&gt;'link_img_3','txt'=&gt;'Text sup image 3')
                  );
                  //...
                  if(isset($array))
                  {
                      $nb=sizeof($array);
  
                      $i=1; 
                      //HIDDING THUMBNAILS
                      echo '&lt;div id="highslide-html" class="hidden-container"&gt;';
                          foreach($array as $arr)
                          {
                              echo '&lt;a href="'.IGES.'big/'.$arr['lien'].'.png" 
                                       id="'.(($i===1) ? 'autoload' : '').'"
                                       class="highslide" 
                                       onclick="return hs.expand(this, galleryOptions);"&gt;
                                      &lt;img src="'.IGES.'minia/'.$arr['lien'].'.png" alt="" 
                                              title="'.mettre_1ere_en_maj($arr['nom']).'"/&gt;
                                  &lt;/a&gt;
                                    &lt;span class="highslide-caption"&gt;
                                      '.$arr['txt'].'
                                    &lt;/span&gt;';
                              $i++;
                          }
                      echo '&lt;/div&gt;';
                  }
              ?&gt;
              &lt;/div&gt;
          &lt;!--ferm contenu--&gt;
          &lt;/div&gt;
      &lt;!--ferm content--&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
          &lt;div id="footer_container"&gt;
              footer
          &lt;/div&gt;
      &lt;!--ferm footer--&gt;
      &lt;/div&gt;
  &lt;!--ferm container--&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p></p>
  
  <p>I really searched the internet. I found some things, but everything is in English, and although I do understand a little, there are many things I do not understand.</p>
  
  <p>I have also seen such a function to be integrated so that targetX &amp; targetY work but I really do not know where.</p>
  
  <pre><code>onclick = "return hs.htmlExpand (this, {contentId: 'highslide-html' targetX: null, targetY 'target 0px', height: 700, width: 480})"
  </code></pre>
  
  <p>May anyone help me please?</p>