Centering Fancybox

[linus1]

Hello there! :)

 

How you center the main tumbnail in fancybox (OSC 2.3.1)?

 

 

The code in product_info.php is the following:

  <?php

   //// 
   // BILD
       if (tep_not_null($product_info['products_image'])) {
         $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");

         if (tep_db_num_rows($pi_query) > 0) {
   ?>


       <div id="piGal" style="float: left;">
         <ul>

   <?php
           $pi_counter = 0;
           while ($pi = tep_db_fetch_array($pi_query)) {
             $pi_counter++;

             $pi_entry = '        <li><a href="';

             if (tep_not_null($pi['htmlcontent'])) {
               $pi_entry .= '#piGalimg_' . $pi_counter;
             } else {
               $pi_entry .= tep_href_link(DIR_WS_IMAGES . $pi['image']);
             }

             $pi_entry .= '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $pi['image']) . '</a>';

             if (tep_not_null($pi['htmlcontent'])) {
               $pi_entry .= '<div style="display: none;"><div id="piGalimg_' . $pi_counter . '">' . $pi['htmlcontent'] . '</div></div>';
             }

             $pi_entry .= '</li>';

             echo $pi_entry;
           }
   ?>

         </ul>
       </div>



   <script type="text/javascript">
   $('#piGal ul').bxGallery({
     maxwidth: 300,
     maxheight: 200,
     thumbwidth: <?php echo (($pi_counter > 1) ? '75' : '0'); ?>,
     thumbcontainer: 300,
     load_image: 'ext/jquery/bxGallery/spinner.gif'
   });
   </script>

   <?php
         } else {
   ?>

       <div id="piGal" style="float:left;">
         <?php echo '<a  href="' . tep_href_link(DIR_WS_IMAGES . $product_info['products_image']) . '" target="_blank" rel="fancybox">' . tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), null, null, 'hspace="5" vspace="5"') . '</a>'; ?>
       </div>

   <?php
         }
   ?>

   <script type="text/javascript">
   $("#piGal a[rel^='fancybox']").fancybox({
     cyclic: true
   });
   </script>

   <?php
       }

       //// 
   // BILD END
   ?>