Picture display containment size

Is it possible to put PG on a web page and contain it to a maximum width of 680px?

You can definitely adjust the css to fit the width, but depending on the image size you may get some overlapping images. If you use the grid + lightbox preset this one might be a bit more flexible to bring down to a custom size. There is also a PowerStore preset that is a little bit smaller than the standard one, you may want to give this one a look as well.

I've had a quick play adjusting the 'Ribbon_Fullsize common.css file' and I still have a few issues.

Some images overlap, I was wondering if it might be better to physically reduce the dimensions of the pictures and upload again.

The backgound fits the page now, but I need to get the images to fit the background.

With the thumbs set to 6 the forward arrow drops a line, set at 5 and it's OK, there must be a 'width' set somewhere but I can't seem to find it.

In the index.php file under 'Ribbon_Fullsize' what does line 23 control?
#outerWrapper { width: 895px; margin: 20px auto; }

By altering the width I didn't see any changes.

My attempt is here: pics.php

It looks as though you may have done some more editing to this. When I view the thumbs area I can see that there are widths defined inline for them. Adjusting the width here will allow you to fit in the number of images you need. Once you get it adjusted correctly you will need to go into your ribbon_fullsize > js > gallery.js file and adjust the perPage setting at the top of this file. You need to make it match the number of thumbs you can see when you get the width adjusted properly.

I was able to get 6 images to show on a single line by making these adjustments:

.pg-rf .ribbon .thumbs-wrapper .thumbs img {
border:4px solid #1C1C1C;
cursor:pointer;
float:left;
margin:0 0 0 3px;
}
/*changed this from 9 to 3*/

<div class="thumbs-wrapper" style="width: 433px;">
<!-- this was 475 -->

<div class="thumbs" style="width: 440px;">
<!-- this was 474 -->

Give this a try and let us know if it works for you. As for adjusting the main image you should adjust the width of this image to make it fit in the background.

Eric, I can't see that HTML Code, where is it?

Sorry about that, this code is going to be in your index.php file referenced in your Power Gallery include code on the page. You can add in the styling inline to the divs in this index page.

Hi,

I was having the same problem, and was already using the PowerStore grid, but it was still too big for the content size that I had. The PowerStore grid shows 8 images across, and they were getting cut off.

I read all the posts here, and was concerned about the issue of resizing all the thumbnail images, which really wouldn't be convienent when you are adding images all the time.

So, I went in to the gallery's javascript file, gallery.js, and found, right at the top:

options: {
initial: 0,
perPage: 8
},

I changed that to...

options: {
initial: 0,
perPage: 6
},

...and everything worked perfectly!!! No tweaks to CSS, one simple change!

Hope that helps others.