Dynamic equal height responsive image gallery - javascript

I need to display thumbnails of various images of different sizes. I wanna display them in equal height and width of responsive divs. But the problem is the images are of different sizes. I have also tried jquery but couldn't reach to a solution.
HTML Code:
<div class="gallery">
<div class="pic">
<img src="http://img.autobytel.com/car-reviews/autobytel/11827-cool-luxury-cars/2015-Tesla-Model-S-90D-black-profile-in-front-of-modern-house.jpg">
</div>
<div class="pic">
<img src="https://imgct2.aeplcdn.com/img/800x600/news/Nissan_XTrail_2015/nissan-x-trail-1.jpg">
</div>
<div class="pic">
<img src="http://media.caranddriver.com/images/14q3/612034/best-sports-cars-2015-editors-choice-for-premium-and-exotic-sports-cars-car-and-driver-photo-634605-s-450x274.jpg">
</div>
</div>
CSS:
.gallery{
max-width:800px;
overflow:hidden;
width:100%;
}
.gallery .pic{
width:33%;
float:left;
max-height:200px;
height:100%;
}
.gallery img{
height:100%;
width:100%;
}
Jquery
var maxHeight = 0;
$('.gallery .pic').each(function(index){
if ($(this).height() > maxHeight)
{
maxHeight = $(this).height();
}
});
$('.gallery .pic').height(maxHeight);
Fiddle: https://jsfiddle.net/1rooxnko/
Note: I am looking for a solution that is without fixed height to pic class.

try this updated responsive code may be it can help you
JSfiddle
HTML:
<div class="gallary">
<div class="pic">
<img src="http://img.autobytel.com/car-reviews/autobytel/11827-cool-luxury-cars/2015-Tesla-Model-S-90D-black-profile-in-front-of-modern-house.jpg">
</div>
<div class="pic">
<img src="https://imgct2.aeplcdn.com/img/800x600/news/Nissan_XTrail_2015/nissan-x-trail-1.jpg">
</div>
<div class="pic">
<img src="http://media.caranddriver.com/images/14q3/612034/best-sports-cars-2015-editors-choice-for-premium-and-exotic-sports-cars-car-and-driver-photo-634605-s-450x274.jpg">
</div>
</div>
CSS:
.gallary{
width:100%;
overflow:hidden;
display:flex;
}
.pic{
width:33.33%;
}
.gallary img{
width:100%;
height:100%;
}

The problem I could find was in your .gallery element, you've set the max-height, but you also need to specify height too.
have a look at this https://jsfiddle.net/ya2za6d1/

Change this
.gallary .pic{
width:33%;
float:left;
max-height:200px;
height:100%;
}
to this
.gallary .pic{
width:auto;
float:left;
max-height:200px;
}
EDIT: I've seen that your code works. But also that images looks distorted.
One suggest that I can give you is to use (if you can) background images to avoid this problem.

You can do this with flexbox (no js required) as follows:
.gallary{
width:100%;
display: flex;
}
.pic {
flex: 1;
}
.pic img {
width: 100%;
}
I've set .gallary's width to 100% so that we can see it's responsive.
As gallery is the parent element I've set this to flex.
I've then added flex: 1 to each .pic element so that they are each the same width. Finally, I've set the width of each image to 100% so that they scale to fit the width of each .pic element.
Using flexbox like this means that each child element (in this case the .pic elements) is automatically the same height.
I've set up a codepen http://codepen.io/alexmagill/pen/ggGVwL with some background colours in place so that you can play around with it and get a sense of what is happening.
Support for it is pretty solid now but you might want to add in fallbacks for older browsers.

Please refer this link https://github.com/liabru/jquery-match-height
1.Apply match height class for the outer div of the image.
2.Then apply this css for the image
<style>
.img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
</style>

Related

Is it possible to achieve this zoom & pan effect on a direct image and not a div with a background-image?

I found this codepen showcasing a zoom and pan effect for images. As far as I can tell, the code works by assigning a background-image to each div based on its data-image attribute. Is there any way that I can do this on a direct img tag instead of a div with a background-image?
EDIT: This is the kind of mark-up I'm talking about. A container div with an actual img tag inside of it.
Take a look at the CodePen now.
Think i got it to look kinda like you want it
<div class="tiles">
<div data-scale="1.1" class="product-single__photos tile" id="ProductPhoto">
<img class="photo" src="//cdn.shopify.com/s/files/1/1698/6183/products/bluza_dama_39377a_large.jpg?v=1487178925" alt="Last Skirt" id="ProductPhotoImg">
</div>
</div>
You can play with the margin to adjust the image position
div{
width:100%;
height:200px;
overflow:hidden;
}
img{
width:100%;
margin:0%;
transition:0.5s;
}
img:hover{
width:120%;
margin:-10;
}
<div>
<img src="https://cdn.pixabay.com/photo/2015/07/06/13/58/arlberg-pass-833326_960_720.jpg">
</div>
Absolutely. It would involve giving the elements some CSS:
div.product-single__photos {
position: relative;
overflow: hidden;
}
div.product-single__photos > img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
And have the Javascript manipulate the <img>'s width, height, top and left properties.

Can I overlap exactly half of an image with another using CSS?

I am trying to overlap exactly half an image in CSS using another image. Thing is I want the height of the images to be say (x=200px). The width of the image will wary depending on the aspect ratio of the image. Can I still write CSS that will overlap exactly half of the resized image with another image.
Following is a code where I have played around with the position of the overlapping image. Can I let CSS do this for me somehow? Or is there some js that can help? In the following code I want the height to be unchanged, but half of any image used should be overlapped widthwise.
<html>
<head>
<style type="text/css">
#collage-container{
width:300px;
height: 200px;
position: relative;
background:#f22;
}
#collage-one, #collage-two{
height:200px;
position:absolute;
}
#collage-one{
z-index:1;
left:100px;
position:absolute;
}
</style>
</head>
<body>
<div id=collage-container>
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-one />
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" id=collage-two />
</div>
</body>
</html>
Since the width of images is vary, you could use CSS transform translate() expression with a percentage value to move images to a side with the respect to their width value:
EXAMPLE HERE
#collage-container {
height: 200px;
position: relative;
}
#collage-container img {
height: 100%; /* As tall as the container */
width: auto;
float: left;
}
#collage-container img + img { /* Move the second image 50% of its width */
transform: translateX(-50%); /* to the left */
}
It's worth noting that CSS transforms are supported in IE9+
I think, it is simple:
<html>
<head>
<style type=text/css>
.container {
float:left;
}
.half-img {
display:inline-block;
width:25%;
}
.clear {clear:left;}
</style>
</head>
<body>
<div class="container">
<span class="half-img">
<img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" width="100">
</span><img src="http://www.hack4fun.org/h4f/sites/default/files/bindump/lena.bmp" width="100">
</div>
<div class="clear"></div>
</body>
</html>

Issue: Horizontal scrolling effect with Skrollr

I want to create an horizontal animation controlled by the skrollr.
Scrolling down, the elements of my page have to move from left to right of my container.
Assuming that my elements have all the same width, I set the scrolling data from 100% to 0% and it works.
But what if my images have different widths?
Also I want to preserve the opacity animation that create this fade-in fade-out effect.
Here's HTML code:
<div id="container">
<div class="bg" style="background-color:red"
data-0="transform:translate3d(0%,0%,0); opacity:1"
data-5000="transform:translate3d(-100%,0%,0); opacity:0">
</div>
<div class="bg" style="background-color:green;"
data-0="transform:translate3d(100%,0%,0); opacity:0"
data-5000="transform:translate3d(0%,0%,0);opacity:1"
data-10000="transform:translate3d(-100%,0%,0);opacity:0">
</div>
<div class="bg" style="background-color:orange"
data-5000="transform:translate3d(100%,0%,0); opacity:0"
data-10000="transform:translate3d(0%,0%,0); opacity:1">
</div>
</div>
And the CSS:
#container {
background-color:black;
width:500px;
height:300px;
overflow:hidden;
}
div {
position:fixed;
}
.bg {
width:500px;
height:300px;
}
Here's a Demo in Fiddle
Just set the widths to 100% and contain your images within:
#container {
background-color:black;
width:100%;
height:300px;
overflow:hidden;
}
div {
position:fixed;
}
.bg {
width:100%;
height:300px;
}
Here's a Demo in Fiddle
I don't see how the different width would be a problem. You could set all width to 100% and overflow: hidden; or use jQuery to check the best way to fit the image in the container.

Responsive Design: Scrolling JS/JQuery Rotating Banner Using Percentages (not px)

I'm almost there. However, there is a bug which I can't work out. I think the problem is to do with using percentages rather than pixels (as I want the banner to resize for different screen widths).
The banner scrolls every 5 seconds, but only gets to the 3rd image before heading back to the beginning. Also - when I resize the window very small, the banner only rotates between the first two images (and sometimes scrolls to a non-existent 5th image, displaying white space).
I've played about with the Javascript. Changing the IF statement to be < -400% (still rotates across 3 images). When I set it to < -800% it goes to 2 images, and < -1000% it never returns to the beginning! I'm very confused, but maybe I'm missing something obvious.
HTML:
<div id="wrapper">
<div id="subwrapper3">
<div class="bannerwrapmain">
<img src="/images/banner-image-1.jpg" />
</div>
<div class="bannerwrapmain">
<img src="/images/banner-image-2.jpg" />
</div>
<div class="bannerwrapmain">
<img src="/images/banner-image-3.jpg" />
</div>
<div class="bannerwrapmain">
<img src="/images/banner-image-4.jpg" />
</div>
</div>
</div>
CSS:
#wrapper
{
width:100%;
overflow:hidden;
margin:0px 0px 0px 0px;
padding:0px;
}
#subwrapper3
{
width:400%;
overflow:hidden;
margin: 0px;
padding:0px;
}
.bannerwrapmain
{
display: block;
width:25%;
margin:0px;
padding:0px;
float:left;
}
.bannerwrapmain img
{
width:100%;
margin:0px;
padding:0px;
height:auto;
border:none;
}
JAVASCRIPT:
window.setInterval(function(){
if ($("#subwrapper3").css("marginLeft") < "-300%") {
$("#subwrapper3").animate({ marginLeft: '0%' });
} else {
$("#subwrapper3").animate({ marginLeft: '-=100%' });
}
}, 5000);
Try setting your main wrapper to a fixed dimension, say 1000px. then your subwrapper to 100%, and your images to max-width:100%;
#wrapper{width:1000px;}
#subwrapper3, .bannerwrapmain{width:100%;}
.bannerwrapmain img{max-width:100%;}
You can then use media queries to change the main wrapper width based on screen size, and the contained elements will scale with it:
#media screen and (max-width:500px){
#wrapper{width:500px;}
}
I created a content slider a few months ago, it may be of some help to you... http://codepen.io/lukeocom/pen/mHyBv

How do I keep an image inside a div with a set width and height, but keep the rest of the image hidden?

It's kind of difficult to word... So I made a picture!
(source: tumblr.com)
I tried giving the div that has a set width and height overflow:hidden; but that didn't work... I searched all over and I probably just didn't word it right.
I gave the tag 'javascript' just because this may require javascript, if it doesn't please comment and tell me to remove the tag! Thankyou!
HTML
<div class="trigger" id="photoTile">
<img id="photoSmall" src="{PhotoURL-500}">
<h5>Photo</h5>
{MonthNumber} {DayOfMonth} {Year}
<br>
{block:NoteCount}{NoteCount} <img
src="http://static.tumblr.com/ux4v5bf/2Z0lf9580/heart.png">{/block:NoteCount}
</div>
CSS
.trigger {
margin:0 20px 20px 0;
float:left;
background:#6f7f7a;
width:115px;
height:105px;
padding:5px;
}
#photoTile {
width:115px;
height:105px;
overflow:hidden;
background:none;
}
#photoSmall {
opacity:0.4;filter:alpha(opacity=40);
position:absolute;
z-index:-1;
}
Putting the image in a <div> with fixed height and width, and "overflow: hidden", most definitely will crop an included <img>.
edit Here is a jsfiddle showing an image much larger than 100x100 in a 100x100 <div> styled with "overflow: hidden". Here's the CSS for the <div>:
#w { height: 100px; width: 100px; overflow: hidden; }
I didn't have to do anything interesting with the <img> at all; it's just lexically nested inside the <div>.

Categories