Nextgen Pro image full screen

HTML & CSS
1

So I’m using the nextgen lightbox. One thing that I don’t like about it is that it doesn’t default to having your image fill the whole screen. I can see when I inspect the element that the image has inline styles. It actually appears that a few classes need to be changed. I somewhat got it to work using the firefox inspector tool.

I tried adding these classes to the custom css sheet in the wordpress admin section where NextGen tells you to place your custom styles. I did notice using the firefox inspection tool that a couple of inline styles needed to be changed. For example the left:375px; needed to be removed and the height had to be set to 210% so that the whole image would show. And of course the scroll bar is hidden. It seems like there is a simple solution for this, but I don’t know what it is.

.galleria-container notouch {
     width:100% !important;

}


.galleria-images {
   width:100%;

}

.galleria-image {
   width:100%;

}

.galleria-layer {
    width:100%;

}



.galleria-layer img {
     width:100% !important;
}
2

Hi,

We’d need to see a link to the page concerned to but I doubt that you can make it fill the whole screen easily as that would change the aspect ratio of the image.

Most lightboxes add dynamic styling to position the image in the center of the viewport and may restrict the image size so that the aspect ratio is correct.

A link to the site may help confirm this.

3

Sorry, i forget this too much

http://www.connect4webdesign.com/test/

4

Hi,

That example seems to be at full size?

It expands to the full width or the full height while maintaining the image aspect ratio. There is no other way to scale an image unless you just ignore its aspect and stretch the image to fit which looks really bad.

5

Well, yes I noticed that it expands to the full height which then determines the width by keeping the proper aspect ratio. I was just hoping that there was a way to have the image scale to the maximum width and then determine the height and if they height were greater than the screen size that the light box would allow vertically scrolling.

6

It looks like there is an option for this which I did not see originally. Works great now. Well, I wish it could scroll, but I will settle for this for now.

7

I prefer the previous version.:slight_smile:

That one is too big and I couldn’t work out where I was. I thought I was on another site or another page!

The page is scrolling if you just move the mouse and you can view top and bottom.

That image is way to big a filesize as I assumed the slideshow wasn’t working first time as nothing happened. It was taking so long to load I thought it was broken. The image is 2mbytes which is about 10 times too big a file size for real use. 2mbytes is much more than the resources I would use for a whole page. You should be able to optimise that image down to under 200k without much loss of quality.

8

Yes the mouse scroll works, but is pretty awkward. I did suggest a scroll option on the Nextgen gallery plugin suggestion page.

The problem with the previous view was that people really can’t see the designs very well. I guess that they can just visit the websites.

I will optimize that image. thx

9

Yes it’s a little weird. A scrollbar would be more intuitive.:slight_smile: