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

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.

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.

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">
<img src="http://placehold.it/600x600&text=Slide1" >
<img src="http://placehold.it/600x600&text=Slide2" >
<img src="http://placehold.it/600x600&text=Slide3" >
<img src="http://placehold.it/600x600&text=Slide4" >
</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.

Related

centering image overlaying another with xray effect

The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/

Responsive design - modify image rotation according to media queries

First of all, I don't have any code yet, as I'm asking what's the best way to achieve this.
I'm developing a website which has an image on the left hand side that has a slight 3D rotation:
What I'd like to do is change it's perspective on window width change, until it's like flat:
The idea is that on desktop PCs the image is on the left with the rotation, while on narrower screen widths the image is turned flat.
I've considered using the following methods:
CSS sprite + CSS media queries:
I'm not really convinced about using this, as in this way I think that I will not have a sort of "moving" effect when the window is resized, unless I create a media query for every 5px and create a very long image to cut
CSS transform?
Not sure if it's possible to create a sort of 3D effect to an image using only CSS and change the 3D value on window resize without using the above mentioned method
jQuery plugin
I don't know if there's something that allows my to achive this as jquery plugin, any suggestion?
Parallax.js
I've never used parallax, but it seams like you can move elements on the screen in various way, do you think it will be possible to use parallax for what I need?
I Hope my question is clear enough, sorry again for no code, but this is still in proof-of-concept stage.
Please ask for any clarifications.
Thanks and have a good day.
You can achieve this functionality rather easily combining a few nifty properties of css3: perspective, the vw unit and media queries.
See this Jsfiddle for a quick demo, resize the viewport to see the changes.
body {
-webkit-perspective: 250px;
perspective: 250px;
min-width: 500px;
}
#media (min-width: 500px) {
body {
background: blue;
-webkit-perspective: 50vw;
perspective: 50vw;
}
}
#media (min-width: 700px) {
body {
background: red;
-webkit-perspective: calc(500vw - 3150px);
perspective: calc(500vw - 3150px);
}
}
img {
width: 400px;
height: auto;
transform-style: preserve-3d;
transform: rotateY(1rad);
}
<img src="http://i.imgur.com/qY1SdO0.jpg" />

Change width so height fits in window screen?

I'm working with a responsive site and I want the homepage to not require any scrolling. Right now, it has a header (239px tall) and a footer (94px tall) and then Owl Carousel sliding through images in the middle of the page. The CSS on the Owl Carousel is at 100% width, which shows the whole image. But the way the slider is setup, if I change the container height to be window.innerHeight, it crops the image in the slider (still 100% width).
How can I have the Owl Carousel be a relative height that changes the width to the exact % width so that Header + Owl Carousel + Footer all fit the users browser window without having to scroll?
EDIT:
<div id="post-111" class="post-111">
<div class="sy-box">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul class="ken-slider">
<li class="sy-slide kenburns""><img alt="" src="image.jpg"></li>
<li class="sy-slide kenburns""><img alt="" src="image.jpg"></li>
</ul>
</div></div></div></div>
This is the basic structure of the Owl Carousel. And has the <'header'> of 239px tall and <'footer'> of 94px tall. The images scale to fit the width of the .sy-box, and max-height:none;
Here is a great, very similar example to what I'm working with. Header, footer, Owl Carousel in the middle. How would you take this page and make it fit the screen (without cropping images, simply having them scale so they fit on the page)? http://www.isidrophotographer.com
Easiest way to do this would actually be to use vh and vw units in your CSS. Supported everywhere except of course IE is only partial support and opera.
You should make position as absolute and try these ...
.fit{
width:100%;
height:100%;
position:absolute;
background-color:red;
}
<div class="fit"></div>
From what I understand you'd like your images and divs to respond to the screen size. This is my solution based on what you've said. Hopefully its enough for you to solve your issue. Make sure you try resizing the window to see how your images react.
I would also highly recommend you check into bootstrap.
jsFiddle
css:
img {
width: 100%;
}
.post-111 {
width:100%;
height:100%;
position:absolute;
background-color:red;
}
.sy-box {
background-color: blue;
height:500px;
width:80%;
}
.kenburns {
display: inline-block;
width: 45%;
}
jsfiddle.net/q6rL4jkk/4 . I think that JS tool, imgLiquid, may do it. fixed header/footer, and image scales to be as big as it can without skewing in the middle and no scroll bars. Now just need to figure out how to put that on my site.
$(function() {
$(".sy-slides-wrap").imgLiquid({
fill: false,
horizontalAlign: "center",
verticalAlign: "50%"
});
});

Dynamic margins using css

I'm quite new to web-design, but know most of the basic stuff, but please try to keep it relatively simple) So, I'm designing a web-site, where I want to have grey background on the sides of the main page, which I managed to do. However, I want the page to "eat up" the grey space if the window is resized, just like Marriott hotel uses I have tried looking their code up, but it's a lot and I don't think they use CSS but JavaScript for resizing dynamics. Am I right? If so, is there a way of doing it with CSS? Or java, but relatively simple, I'm very new to it!
Also, I have currently given the wrapper a width of 88% and used the 12% as the grey background. Is using % the best solution for different screen resolutions? (Keeping in mind that it would be for PCs and tablets at the most, no smartphones)
Using percentages can be useful, but if you truly want things to look how you want them to on a smaller screen resolution, you can use media queries.
Media queries work well because they can even change the styles depending on device orientation:
#media (min-width: 700px) and (orientation: landscape) { ... }
Using a media query. (Make the window bigger & smaller to see it in action.)
I think what you want is the following:
Add a background to the body.
Add a div with X px and margin auto, that will center it.
So then, when you resize the window, this will "eat" the margins from the body hidding the grey background.
If what you want is different sizes for the web depending on the width screen, then you are entering to media queries.
You are looking for:
#wrapper { width: 900px; margin: 0 auto; }
This will place your wrapper (with a 900px width) with even margins on the side and then recalculate the margins as the window changes.
I would give your wrapper a set width since setting a width of 88% means that the center content will ALWAYS be 88% of the window which means you will always have margins.
You may do it this way
here is the fiddle: http://jsfiddle.net/fcvbkv5w/
body {
text-align: center;
}
#navbar {
width: 100%;
margin-left:0%;
background-color: black;
text-align: center;
}
#fwcenter {
width: 70%;
position: relative;
text-align: center;
background-color: red;
}
#media (max-width: 700px){
#fwcenter{
width:100%;
}
}
<div id="navbar">
<center>
<div id="fwcenter">
<div id="container">
Website content
</div>
</div>
</center>
</div>

Image no longer responsive as put in table cell layout

I'm trying to center an image on a site. As I want it to be centered both horizontally and vertically I used a table/table-cell layout as following:
<div id="mainContainer>
<div id="horizon">
<img src="url">
</div>
</div>
Here mainContainer ist set to display: table and horizon is set to display: table-cell.
Unfortunately the image is no longer resizing proportionally as it becomes part of this structure. As soon as I move it into the table/table-cell divs it resizes to its original size (instead of being resized proportionally because of max-width: 100% and max-height: 100%)
see: http://jsfiddle.net/U8KcN/
EDIT:
My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).
source: OP Comment
Every time I hear someone talk about the evils of using tables and then see them create a complete table structure out of DIVs with pretty much the same amount of markup -- sometimes more -- it really gets on my nerves.
By the way, have you ever developed a site for someone who wanted to do some of their own layouts in the content area using a CMS like Wordpress? The only way someone with almost no HTML knowledge can do that well is by allowing them to use table tools in Tiny MCE or another editor. So yes, tables are still important.
Recently, I had to do just that for a customer, but the images in the table cells were not responding and shrinking for smaller screen sizes. All I had to add to my CSS to care of that problem was:
table {
table-layout: fixed;
}
Now the images in the table cells are growing and shrinking accordingly, and the horizontal scrollbar is no longer appearing. Oh, of course you have to use percentages in your table width and td widths as well.
How about dropping that "CSS-table" stuff and doing it a bit easier?
<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
<img src="URL">
</div>
At least, that’s how I would handle it...
EDIT:
Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:
<style>
.centerimg {
width:auto;
height:auto;
margin:25%;
text-align:center;
vertical-align:middle
}
</style>
...
<div class="centerimg">
<img src="#">
</div>
EDIT 2:
Replying to the related comment, here's the update to make the image fit it's parent proportionally:
If your image has a bigger width than height...
<style>
...
img{
max-width:100%;
height:auto
}
</style>
or, if your image has a smaller width than height...
<style>
...
img{
max-height:100%;
width:auto
}
</style>
EDIT 3:
Looking at your fiddle, I came up with this which works like you want it to work:
<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}
img{
width:auto;
height:100%;
}
</style>
I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/
EDIT 3:
As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.
You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:
<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>
Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.
If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.
Using tables (display: table-cell) for layout is a web development anti-pattern these days. Try using the <span> element with display: inline-block to vertically and horizontally center the image, as this method will work all the way back to IE 6. Also, you can change the image size to be a percentage if you want it to resize according to its container:
http://jsfiddle.net/hHWy8/1/
HTML:
<span class="horizontal">
<span class="vertical">
<img src="url" />
</span>
</span>
CSS:
span {
display: inline-block;
}
span.horizontal {
text-align: center;
width: 100%;
}
span.vertical {
vertical-align: middle;
border: 1px solid black; /* put a border on container for display purposes */
line-height: 1000px; /* this sets the vertical height */
overflow: hidden;
white-space: nowrap;
}
span.vertical img {
height: 50px; /* set your image height (could be percent) */
width: 50px; /* set your image width (could be percent) */
}
span.vertical br {
display: none;
}
To resize your image you could use this css:
html,body,div,img{
height:100%;
}
img { width:100%}
It sets the html and body's height to 100%, this is needed so the height of your page takes all available space

Categories