Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Fancybox thumbnail position


ndl

Recommended Posts

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 by ndl
Link to comment
Share on other sites

  • 3 years later...

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...