How to change the lightbox in oscommerce BS?

[vampirehunter]

Has anyone any tips on how to change the lightbox design?

 

Im finding that images are loading slowly and would rather have a swipe style option rather than the small arrows to click.

 

if anyone has an alternate version that would be great.

 

thanks

[clustersolutions]

Look into bxSlider...I use that and it's responsive, too.

[vampirehunter]

Look into bxSlider...I use that and it's responsive, too.

 

im using BS edge version

 

whereabouts do i edit the code in order to use bxslider?

do i simply not use colorbox plugin and use bx slider.

 

i think i would still have to edit the product info page code to work with bx slider.

[♥toyicebear]

you have to add in the scripts from bxslider , eighter in template top or make a header module.

 

as well as editing the product info page to use bxslider for the images

[clustersolutions]

@@vampirehunter...it would be in this block of codes. I would show you mine but it probably wouldn't be very helpful as I pull my images from a products_attributes_images tables. Basically, you would gather all your images from the products_images table and put them in the bxSlider syntax. For example a thumbnail pager...

 

http://bxslider.com/examples/thumbnail-pager-1

 

Do a crawl, walk, and run approach...

 

1) setup a static bxSlider div in your product_info.php so you know you have it configured (header/footer scripts etc.) correctly.

2) modify the codes to incorporate your own images.

 

Make sense?

<div class="contentContainer">
  <div class="contentText">

<?php
    if (tep_not_null($product_info['products_image'])) {

      echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], NULL, NULL, NULL, 'itemprop="image" style="display:none;"');

      $photoset_layout = '1';

      $pi_query = tep_db_query("select image, htmlcontent from " . TABLE_PRODUCTS_IMAGES . " where products_id = '" . (int)$product_info['products_id'] . "' order by sort_order");
      $pi_total = tep_db_num_rows($pi_query);
.
.
.
.
.
    <div class="piGal pull-right">
      <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
    </div>

<?php
      }
    }
?>

<div itemprop="description">
  <?php echo stripslashes($product_info['products_description']); ?>
</div>

im using BS edge version

 

whereabouts do i edit the code in order to use bxslider?

do i simply not use colorbox plugin and use bx slider.

 

i think i would still have to edit the product info page code to work with bx slider.

[SpicyGirl]

Hola,

 

can somebody help me to change the sizes of the ColorBox (the pop-up that shows the pics)?

I dont find the answer. I am desperate.

I use osc2.3.4BS EDGE

 

thanks for help

[♥kymation]

The popup will be sized to fit the image. If you want it to be smaller, make your large images smaller.

 

Regards

Jim

[SpicyGirl]

The popup will be sized to fit the image. If you want it to be smaller, make your large images smaller.

 

Regards

Jim

 

Hola Jim,

 

 

I know that Jimmy, the fact is that it shows (big) pictures smaller then their size.

I think becose there is some margins somewhere.

excample, see screenshot

 

laptopscreen = 1280x800

image = 2048x1340

 

when check with Inspect Element with Firebug first line that concern the Colorbox =

1/ Overlay (background) = 100% = OK

2/ Colorbox dimensions 864x565

3/ cboxWrapper 864x565

4/ cboxcontent 864x565

5/ cboxPhoto 864x565

 

Not sure, but think the other sections after the colorbox will never be larger then the colorbox.

 

I have KissIT installed but before KissIT it was the same.

 

see screenshot how it looks know & how i would like

 

thanks a lot for advice & support

 

saludos

Camella

[♥kymation]

The border on images is there to make the image look good. If you really want to mess with that, you can probably override the CSS in your user.css. Use Firebug to find the correct element(s) to override.

 

Regards

Jim

[SpicyGirl]

oww Jim, no way thats just the result of my try.

dont worry, have backup. But it already looks bigger then it was before, but not enough.

 

well i'm probaely not smart enough, becose i tried everything that firebug gived me as result.

I cant find the settings of colorbox 

 

that's why I beg for help

 

ciao

[vadinux]

Thanks for great knowledge. I try this advices.

[aurelou]

Hi all,

 

I also want to change the lightbox but I want to maintain the photoset grid. I didn't understand how to modify product_info.php.

 

As I don't know how to code it, I tried to simply replace the js and css colorbox files with those of my new lightbox (and I kept the colorbox file names), but it doesn't work. Should it work or not ?

 

If someone can help, it would be very kind.

 

Thanks a lot.

[aurelou]

Hello,

 

To answer @@SpicyGirl 's question I found how to delete those margins.

 

In ht_product_colorbox.php :

 

Change :

$oscTemplate->addBlock('<script>var ImgCount = $(".piGal").data("imgcount"); $(function() {$(\'.piGal\').css({\'visibility\': \'hidden\'});$(\'.piGal\').photosetGrid({layout: ""+ ImgCount +"",width: \'100%\',highresLinks: true,rel: \'pigallery\',onComplete: function() {$(\'.piGal\').css({\'visibility\': \'visible\'});$(\'.piGal a\').colorbox({maxHeight: \'90%\',maxWidth: \'90%\', rel: \'pigallery\'});$(\'.piGal img\').each(function() {var imgid = $(this).attr(\'id\') ? $(this).attr(\'id\').substring(9) : 0;if ( $(\'#piGalDiv_\' + imgid).length ) {$(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });}});}});});</script>', $this->group);

To :

$oscTemplate->addBlock('<script>var ImgCount = $(".piGal").data("imgcount"); $(function() {$(\'.piGal\').css({\'visibility\': \'hidden\'});$(\'.piGal\').photosetGrid({layout: ""+ ImgCount +"",width: \'100%\',highresLinks: true,rel: \'pigallery\',onComplete: function() {$(\'.piGal\').css({\'visibility\': \'visible\'});$(\'.piGal a\').colorbox({maxHeight: \'100%\',maxWidth: \'100%\', rel: \'pigallery\'});$(\'.piGal img\').each(function() {var imgid = $(this).attr(\'id\') ? $(this).attr(\'id\').substring(9) : 0;if ( $(\'#piGalDiv_\' + imgid).length ) {$(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });}});}});});</script>', $this->group);

It changes the maxHeight and maxWidth from 90% to 100%.