Is there a Vertically Responsive Gallery Plugin? Jquery or Javascript?

Question

Can anyone point me in the direction of a horizontal and vertically responsive gallery slider plugin or Jscript?

I have tried Flexslider1/2, Galleria, various other plugins, but they are all a set width and don't seem to respond to resizing the browser vertically? I have tried changing all the CSS but no luck.

Any help at would be greatly appreciated.

Example (With Flexslider): If you resize the browser horizontally, the images will automatically resize to fit within the browser window. If you resize vertically this will cut off the image vertically.

Aim: When you resize the browser window vertically the image will change width and height to keep ration and fit within the browser window. Same with Horizontal.

Hopefully I have explained this clearly. If you need clarification please ask rather than down voting.

Do you mean as you drag a window to be taller, more images are loaded on screen and when shorter they disappear from display? So you don't get a scroll bar for the windows. — Matt, Oct 07 '12 at 07:27
@mindthemonkey I just updated to make it a bit clearer. Hopefully this helps. — Rhys, Oct 07 '12 at 07:39
I think I get you now, so a set (x,y) number of images to fill a screen. I don't have a solution for you. If Flexslider already does it for X though they have done most of the legwork and it should be a extendable to add a Y to the function without too much hassle. You'd have to add an additional sizing limit to both X based on Y and Y based on X so you don't get out of aspect images. — Matt, Oct 07 '12 at 08:08

score 1 · Accepted Answer · edited May 23 '17 at 10:24

Having a poke around the code in Flexslider I couldn't find anything specifically excluding the possibility of an image resize on vertical window change. The image resize appears to be purely CSS based which then feeds the width/height inforomation into the javascript. It appears you are stuck with a DOM/CSS issue of the browser not resizing an image on a vertical window change and then a little bit of this not being a tested FlexSlider setup.

It'a always been a bit finicky to get all browsers to understand 100% vertical layouts with no vertical scrolling as it's not the normal layout paradigm. Subsequent CSS versions have helped a bit but there's still a big difference between how browsers react and interpret what you mean by 100%.

I took the slider demo and borrowed most of a stack answer to manage the 100% vertical layout and ended up with this with the detail below.

First, change your image CSS properties to scale the height of the layout and set the width auto to keep the correct aspect:

 width: auto;
 height: 90%;

This works on an image by itself but the FlexSlider javascript adds some extra elements into the page and also defaults some CSS width values in the demo for the horizontal layout.

.flexslider .slides img {width: 100%; display: block;}

becomes

.flexslider .slides { width: 100%; display: block;}
.img {display: block; }

Now you have a slideshow working in Chrome.

Firefox won't apply the images 100% height to the elements containing the like Chrome so I had to step back through all the elements and apply the 100% height rule in CSS

.flexslider .slides {height: 100%; width: 100%; display: block;}
.img {display: block; }

.flex-viewport img{ height: 100%;}
.flex-viewport li { height: 100%;}
.flex-viewport ul { height: 100%;}
.flex-viewport { height: 100%;}

You'll see I did the img there as well. And you end up with the page.

One draw back to this solution is you now have an image that will resize past the horizontal size of the screen. You probably need to build something in to cater for this as you will run into issues if you use the basic carousel which is dependendant on the width to work. Also something funky happens when you mouseOut of the screen adding a horizontal scroll bar but I'll leave that one for you. Also try IE at your own risk.

...and this is why I shy away from front end development =)

Sorry that post ended up being a bit of a running commentary of me poking about.

Thanks for your help. That will definitely get me going in the right direction. I really appreciate you taking the time to help me out. — Rhys, Oct 07 '12 at 19:07

score 0 · Answer 2 · answered Aug 09 '13 at 21:19

I also wanted an image slider that was vertically responsive (and horizontally). After not finding anything out-of-the-box that worked they way I wanted I started fiddlin'.

Here's the result.

Here's the key elements (go to the jsFiddle for the full demo). It's not quite perfect but should be enough to get you started.

HTML

<div id="fader">
    <a href="http://url1.com"><img src="http://placehold.it/600x600&text=Slide1" ></a>
    <a href="http://url2.com"><img src="http://placehold.it/600x600&text=Slide2" ></a>
    <a href="http://url3.com"><img src="http://placehold.it/600x600&text=Slide3" ></a>
    <a href="http://url4.com"><img src="http://placehold.it/600x600&text=Slide4" ></a>
</div>

CSS

#fader {
    position: relative; 
    width: auto;
    height: 100%;
}

#fader a {
    display:block;
    width:auto;
    height:100%;    
}

@media screen and (orientation: portrait) {
  img { 
      width: 100%; 
      height:auto !important;
  }
}
@media screen and (orientation: landscape) {
  img { 
      height: 100%;
      min-width:10%;
      max-width:100%;
  }
}

Special thanks to this jsFiddle for the lightweight jQuery rotator.

Is there a Vertically Responsive Gallery Plugin? Jquery or Javascript?

2 Answers2