I'm using isotope js https://isotope.metafizzy.co/ and can't understand how to make my layout with flat bottom as here https://diefinnhutte.qodeinteractive.com/masonry-portfolio/.
I can't set fixed height for my blocks, but in example above I think isotope giving its own height.
How to make it?
I have simple code:
<div class="grid">
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
<div class="grid-item">...</div>
</div>
My css:
.grid-item {width: 33%}
and js:
$('.grid').isotope({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
percentPosition: true,
});
Inside grid-items I have img and they can be different height, so what should I do?
Thanks in advance!
Isotope is great for creating these layouts, but it has some quirks to work with. In your case you are working with images, and those images could dictate how the layout is calculated. I'd advise you to use the imagesLoaded library from the same author to first check if the images are loaded and then render the layout. Otherwise the items in the masonry layout would not have any height before the images are loaded.
If you want to have a layout that is flat on the top and on the bottom then you'll need some fixed height values. If the intact ratio of the images is more important than the height then it will simply not be possible.
You can use the object-fit property in CSS to give images a background-size: cover type of effect. It will make sure that any given image will be covering the entire space of an item in the masonry grid.
In these examples I've used multiple differently sized images that all work as they should despite their differences.
Check out the snippet with Isotope and imagesLoaded here below.
var $grid = $('.grid').imagesLoaded( function() {
$grid.isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.grid-item',
}
});
});
*, *::before, *::after {
box-sizing: border-box;
}
.grid-item {
position: relative;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 33.3333333%;
height: auto;
}
.grid-item.is-wide {
width: 66.6666666%;
}
.grid-item::before {
content: "";
grid-area: 1 / 1 / 2 / 2;
display: block;
}
.grid-item::before,
.grid-item.is-wide.is-high::before {
padding-top: 100%;
}
.grid-item.is-wide::before {
padding-top: 50%;
}
.grid-item.is-high::before {
padding-top: 200%;
}
.grid-item img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 5px;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/360/640" alt="360x640"/>
</div>
<div class="grid-item is-high">
<img src="https://www.fillmurray.com/420/420" alt="420x420"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item ">
<img src="https://www.fillmurray.com/640/800" alt="640x800"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/480/320" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/360/640" alt="360x640"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/420/420" alt="420x420"/>
</div>
<div class="grid-item is-high">
<img src="https://www.fillmurray.com/640/360" alt="640x360"/>
</div>
<div class="grid-item">
<img src="https://www.fillmurray.com/640/800" alt="640x800"/>
</div>
<div class="grid-item is-wide">
<img src="https://www.fillmurray.com/480/320" alt="640x360"/>
</div>
</div>
Related
Im trying to get a grid-item of masonry fixed on the top right of grid container. If I scroll the window, and the item is no more visible, it gets fixed on the top right.
Im trying to apply this CSS to the third grid-item:
.fixed-top-right{
position: fixed;
top:0;
right:0;
}
This is my html:
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item fixed-top-right">
<img src="<?php echo get_template_directory_uri().'/img/submergedbp.jpg'; ?>" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
<div class="grid-item">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
</div>
The CSS:
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
/* ---- grid ---- */
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 32.683%;
}
.grid-item {
float: left;
margin-bottom: 10px;
}
.grid-item img {
display: block;
max-width: 100%;
}
And the call of masonry:
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
gutter: 10,
columnWidth: '.grid-sizer'
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
This is the base code from Masonry page that I'm editing.
If I just apply my CSS, the element goes left and it doesnt stay on the top. Is there a way to make the position of a grid-item fixed top-right inside the grid container if the element is no more visible on the screen?
I'm trying to include the .js plugin, Isotope into my wordpress install, at the bottom of the page here:http://webserver-meetandengage-com.m11e.net/test-2/
Im using this example over at codepen: https://codepen.io/desandro/pen/mEinp
I have enqueued the script from a CDN like so:
wp_enqueue_script( 'isotope', 'https://npmcdn.com/isotope-layout#3/dist/isotope.pkgd.js');
I can include my whole enqueue file if it helps?
Here's the template HTML im trying (I have placed the initialisation script at the bottom for now but will move it to its own .js file):
<h1>Isotope - masonry layout mode</h1>
<div class="grid">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<script type="text/javascript">
// external js: isotope.pkgd.js
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
</script>
Heres the CSS:
* { box-sizing: border-box; }
/* ---- grid ---- */
.grid {
background: #DDD;
max-width: 1200px;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-item {
float: left;
width: 100px;
height: 100px;
background: #0D8;
border: 2px solid #333;
border-color: hsla(0, 0%, 0%, 0.7);
}
.grid-item--width2 { width: 200px; }
.grid-item--height2 { height: 200px; }
The CSS and HTML seem fine - I just don't know if m enquiring it properly or the initialisation .js is correct as it seems to work but its just not sorting as per the codepen.
I just checked the URL that you gave and found this in console:
Uncaught TypeError: $ is not a function
Looking at this, I would replace it like:
jQuery(function($) {
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 100
}
});
});
And that should solve your problem.
I am creating columns inside a row using Foundation CSS front-end framework.
<div class="row small-up-2 large-up-3 food-container">
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
</div>
This is my CSS:
.column, .columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.food-wrap { position: relative; }
.food-wrap > .panel {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }
.food-wrap .thumbnail {
border: medium none;
box-shadow: none;
}
Problem: Each class .foodwrap has a padding to the left and right. I want the class .food-panel-top to be wrapped inside the paddings of .foodwrap. What happens when I give .food-panel-top a width of 100% is that it is going outside the limits. I want the .food-panel-top to have the same width with class="thumbnail"
Any help is appreciated.
I know the answer to this post now. I still to post the answer so it can help out other developers out there.
The key in solving this question is to remove the left and right padding of class="column". After removing the left and right paddings, we can now maximing the width of food panel classes to 100%.
I have a problem in a JavaScript function in which i handle slider properties. I have 3 slide with class .slide and everytime i "choose" one of them i set it with .active-slide class. The problem is that also if the display property of active-slide is table, when i set this class, it automatically changes to block and i can't understand why.
P.s. i'm using also bootstrap.
I'm posting here the part of my code related to this problem:
HTML:
<div class="slider">
<div class="slide active-slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
whatuwant
</div>
<div class="col-md-7" id="first-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
</div>
<div class="col-md-7" id="second-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
</div>
<div class="col-md-7 slide-image" id="third-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
width: 1024px;
}
.up{
display: table-cell;
vertical-align: middle;
max-width: 1024px;
max-height: 470px;
}
.row{
width: 1024px;
margin: 0 auto;
max-width: 1024px;
}
.slider {
position: relative;
width: 100%;
height: 470px;
}
.slide {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide{
display: table;
}
JavaScript:
$(document).ready(function() {
$('.buttonfornextslide').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
$('.buttonforpreviousslide').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
});
I tried to simplify it to the maximum i could.
If the question wasn't clear: how can i hold the .active-slide display property to table?
jQuery automatically assigns "default" styles to elements when using fadeIn, slideDown, etc. Since the default style for divs are "block", that's what is being applied. Instead of using the class "active-slide", try specifically setting the CSS
....
prevSlide.fadeIn(600).css('display','table');
Refs:
jQuery bug
Fiddle - you can see that "display" block was in the class' style, and you have to literally add it after the fadeIn function.
In the fiddle, add
.css('display','block');
and run it, you'll see the changes
I am using bootstrap grid to show a image gallery. Now I want to center the entire bootstrap .container within a div (.abc). Here is the link to the fiddle - http://jsfiddle.net/tn3j2kos/
Code below -
.abc {
margin: auto;
width: 96%;
background-color: #ffffcc;
}
.imgframe {
position: relative;
display: inline-block;
width: 120px;
height: 80px;
margin: 5px;
}
div img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: inline-block;
height: 100%;
max-height: 70px;
max-width: 110px;
margin: auto;
}
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="abc">
<div class="container">
<div class="row">
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/usage-logo.png?2013-06" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://g.twimg.com/About_logoUsage.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://g.twimg.com/About_logoUsage.png" />
</div>
</div>
</div>
</div>
</body>
More details - The sample in fiddle has five thumbnails. I want the thumbnails within the div .row to be left aligned. And the group of thumbnails (inside div .container) to be center aligned inside div .abc.
My several attempts have failed, and I posted the code for my last attempt.
EDIT - Don't bother running code snippet inside SO as it is rendering incorrectly. Use js fiddle I posted at top instead.
EDIT 2 - Perhaps I can explain what I want to achieve through this equation container_width = no_of_thumb*(thumb_width+margin*2).
EDIT 3 - How it appears-
How I want it to appear-
I think you are misunderstanding the workings of bootstrap a bit:
.container should be your outer most wrapper, or you could use .container-fluid in stead
.col- classes determine width and padding/margin of the block they are aplied to. Messing with these values will break the responsiveness. Use a wrapper inside those .col blocks in stead if you need to play with dimensions.
why are you positioning those images absolute? I don't see what you are trying to achieve...
I went ahead and cleaned up your fiddle a bit. I think this may be what you are after: http://jsfiddle.net/tn3j2kos/4/embedded/result/
HTML:
<div class="abc">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-6">
<img class='img-responsive' src=#" />
</div>
....
CSS:
.abc {
background-color: #ffffcc;
padding: 0 4%;
}
just set .container to display: inline-block and call text-align: center on .abc
FIDDLE