Fancybox thumbnail position

[ndl]

Hello everyone,

 

I am using oscommerce 2.3.3. I've got a minimaly modified (image size) fancybox in my product_info.php. I managed to enlarge the main image so it takes more space and now i want all thumbnails to be on the right side.

 

This is what i've got:

http://s16.postimg.org/pi5pd6u3p/slep1.jpg

 

This is how I want it to be:

http://s16.postimg.org/6ojwg6vvp/slep2.jpg

 

Current code:

<div id="piGal" style="float: right;">
<h3 style="float: right;"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'cart', null, 'primary'); ?></h3>
<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: 558,
maxheight: 372,
thumbwidth: <?php echo (($pi_counter > 1) ? '76' : '0'); ?>,
thumbcontainer: 558,
load_image: 'ext/jquery/bxGallery/spinner.gif'
});
</script>

 

Any help or guildlines will be much appreciated.

 

Thank You.

Edited August 9, 2013 by ndl

[Bobber]

This is what I did to achieve what you are looking for:

              <div class="span1">
                    <div class="more-views">

                        <ul>
                        <?php
                            if (tep_db_num_rows($pi_query) > 0) :
                                while ($pi = tep_db_fetch_array($pi_query)) {
                                    $pi_counter ++;

                                    if (PRODUCT_IMAGE_SCRIPT == 'fancybox') {
                                    $pi_entry = '
                                      <li>
                                         <a class="fancybox" rel="group" href="'.tep_href_link(DIR_WS_IMAGES . $pi['image']).'" >'.
                                            tep_image(DIR_WS_IMAGES . $pi['image']) . '
                                          </a>
                                      </li>';
                                    } else {
                                        $pi_entry = '
                                      <li>
                                         <a class="cloud-zoom-gallery" data-rel="useZoom:\'zoom1\', smallImage: \''.tep_href_link(DIR_WS_IMAGES . $pi['image']).'\' " href="'.tep_href_link(DIR_WS_IMAGES . $pi['image']).'" >'.
                                            tep_image(DIR_WS_IMAGES . $pi['image']) . '
                                          </a>
                                      </li>';

                                    }
                                    echo $pi_entry;
                                }
                            endif;
                        ?>
                            <?php if (isset($products_video)) : ?>

                            <li>
                                <a class="video various fancybox.iframe" href="<?php echo $products_video; ?>">
                                    <i class="icon-video"></i>
                                </a>
                            </li>

                            <?php endif; ?>

                        </ul>


                    </div>
                </div>

Good Luck @@ndl