close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Picture display containment size

Thread began 1/04/2010 5:05 pm by Alan Shaw | Last modified 2/25/2010 1:37 pm by WilliFixit | 2844 views | 6 replies |

Alan Shaw

Picture display containment size

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

Sign in to reply to this post

Eric Mittman

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.

Sign in to reply to this post

Alan Shaw

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

Sign in to reply to this post

Eric Mittman

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*/



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



html:
<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.

Sign in to reply to this post

Alan Shaw

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

Sign in to reply to this post

Eric Mittman

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.

Sign in to reply to this post

WilliFixit

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.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...