BS/Edge, changing the lightbox and making main image full width?

[vampirehunter]

Can anyone help!

 

I'm stuck on trying to make the main image of the product info page full width of the div.

 

Ive seperated the product info's image gallery into its own div column, and put the description etc into another column.

 

However, i cannot get the main product image to fill the full width of the container.

 

The smaller images in the rows below go all the way to the full width.

 

I've tried to set the width in the ht_colorbox.php file in modules/headertags

 

 

but this isn't doing anything.

 

This is what i have so far in that code in ht_colorbox.php

 

ive edited the last script line, and put width to 100% and also added in the layout of 1, 3, 3 of how i want the images to show.

 

So 1 main large, then row of small will have 3, then 3 and so on.

 

However, the 1 main large image doesn't fill the width of the div unlike the row below.

How do i do this?

 

I can see in the html output that "data-width" is still 360px. Where can i change the data-width value?

 

 

 

Id also like to change the lightbox to this one on this page here

 

http://stylehatch.github.io/photoset-grid/

 if (in_array(basename($PHP_SELF), $pages_array)) {
          $oscTemplate->addBlock('<script src="ext/photoset-grid/jquery.photoset-grid.min.js"></script>' . "\n", $this->group);
          $oscTemplate->addBlock('<link rel="stylesheet" href="ext/colorbox/colorbox.css" />' . "\n", 'header_tags');
          $oscTemplate->addBlock('<script src="ext/colorbox/jquery.colorbox-min.js"></script>' . "\n", $this->group);
         $oscTemplate->addBlock('<script>var ImgCount = $("#piGal").data("imgcount"); $(function() {$(\'#piGal\').css({\'visibility\': \'hidden\'});$(\'#piGal\').photosetGrid({layout: ""+ ImgCount +"",width: \'100%\', gutter: \'6px\' +"",layout: \'133\' ,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\').substring(9);if ( $(\'#piGalDiv_\' + imgid).length ) {$(this).parent().colorbox({ inline: true, href: "#piGalDiv_" + imgid });}});}});});</script>', $this->group);
        }
      }
    }

[greasemonkey]

@@vampirehunter I believe @@burt has done this work already... In this post http://www.oscommerce.com/forums/topic/407542-tester-required/

[vampirehunter]

Hi thanks

ive done that,

 

but im still having a problem with the photocell rows.

 

ive done following in user.css

#piGal img {

max-width:100%;
}

and added a gutter of 10px in the code line of javascript in ht_colorbox.php in modules/headertags

 

Ive set columns to 13333 in admin

 

however, for some reason, on the 1st row after the main image, the middle of the 3 images is somehow smaller in height than the ones to its left and right.

 

ive tested by uploading the exact same image 3 times and still this middle image is not the same height as the other two.

 

ive tried css, and what not but cant seem to find out why the middle image of the row is not the same height as the other two?