SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nextgen Pro image full screen

    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.

    Code CSS:
    .galleria-container notouch {
         width:100% !important;
     
    }
     
     
    .galleria-images {
       width:100%;
     
    }
     
    .galleria-image {
       width:100%;
     
    }
     
    .galleria-layer {
        width:100%;
     
    }
     
     
     
    .galleria-layer img {
         width:100% !important;
    }
    Last edited by Mittineague; Jan 21, 2014 at 17:56.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,493
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, i forget this too much

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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,493
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    NextGen_lightbox_fullscreenwidth.png

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,493
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BrianBam View Post
    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.

    NextGen_lightbox_fullscreenwidth.png
    I prefer the previous version.

    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. #8
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,493
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Yes the mouse scroll works, but is pretty awkward.
    Yes it's a little weird. A scrollbar would be more intuitive.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •