I am trying to make a packery layout that uses the the width of an image. Whether it is 400px or the width of the entire container, I would like to fill up the space with my images. I don't want any whitespace either. Can someone tell where I am going wrong. Code and codepen are below.
<div class="grid" style="width:1200px; height:100%; background:salmon">
<!-- <div class="grid-sizer"></div> -->
<div class="grid-item one"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:200px" /></div>
<div class="grid-item two"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:400px"/></div>
<div class="grid-item three"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:300px"/></div>
<div class="grid-item one"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:600px"/></div>
<div class="grid-item two"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:900px"/></div>
<div class="grid-item three"><img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" alt="" style="width:300px"/></div>
</div>
$('.grid').isotope({
// options
layoutMode: 'packery',
packery: {
columnWidth: '.grid-item'
},
itemSelector: '.grid-item',
percentPosition: true
});
http://codepen.io/Jesders88/pen/GrpqQr
I had the exact same issue and switched to a packery package.
Take a look at this link http://packery.metafizzy.co/
When I tried using isotope with a packery layout mode it didn't work: http://demoserver.co.za/test2.html
When I switched to the above it worked great: http://demoserver.co.za/test3.html
Related
I am currently working on a project of making a web.But after using bootstrap I got some error in spaces in between the pictures its not also responsive in web as well as in app.
The content is divided into two category Y and C the Y is fine in its space the problem is coming from C section.The category label is also not responsive .If you can fix the error please provide me with a layout which is perfect in web and app using bootstrap.
Thanks in advance!
<div class=" secondbtn" style="align-items: center;">
<h4>The Y category</h4>
</div>
<div class="filtr-container galleryContainer d">
<!-- item -->
<div class="col-4 col-md-3 col-lg-3 filtr-item thumbnail" data-category="Malavian,Y" data-sort="">
<img src="images/animals/animals (1).jpg" alt="">
<span class="col-md-3 col-lg-3 item-desc" style="position: initial;">Malavian Cichlids</span>
</div>
<div class="col-4 col-md-3 col-lg-3 filtr-item thumbnail" data-category="Malavian,Tanganyikan,C" data-sort="cat">
<img src="images/animals/animals (4).jpg" alt="">
<span class="item-desc" style="position: initial;">plecos</span>
</div>
</div>
<div class="second" >
<h4><span>The C category</span></h4>
</div>
<section class="container-fluid ">
<div class="layout_M filtr-container galleryContainer d">
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="cat">
<img src="images/animals/animals (4).jpg" alt="">
<span class="item-desc" style="position: initial;" >Barbs</span>
</div>
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="dog">
<img src="images/animals/animals (5).jpg" alt="">
<span class="item-desc">Cory Cats</span>
</div>
<div class="col-4 col-md-3 col-lg-4 filtr-item thumbnail" data-category="Malavian,C" data-sort="dog">
<img src="images/animals/animals (5).jpg" alt="">
<span class="item-desc">Freshwater Plants</span>
</div>
</div>
</section>
</div>
</div>
To make t responsive try to wrap your columns in a div with class name row.
I want to make my theme show the photoset like it does with normal photos, but one under another.
I'm using this theme right now http://theme-neptune.tumblr.com/
And this is the code for the Photoset block
{block:Photoset}
{block:IndexPage}
<div class="photoset">
<div class="box">
<div class="hover">
PHOTOSET
See full set
</div>
</div>
{Photoset-250}
</div>
{/block:IndexPage}
{block:PermalinkPage}
{Photoset-500}
{/block:PermalinkPage}
{block:IndexPage}
{block:ifshowcaption}
{block:Caption}
<div class="caption photo_caption">{Caption}</div>{/block:Caption}
{/block:ifshowcaption}
{/block:IndexPage}
{/block:Photoset}
Im totally new to all this, I need help.
Photoset Photos
You can loop through the photos in a photoset using {block:Photos}:
{block:Photoset}
{block:Photos}
<img src="{PhotoURL-250}">
{/block:Photos}
{/block:Photoset}
This will output each photo as an img element. Below is the markup for the OP's question:
{block:Photoset}
{block:IndexPage}
<div class="photoset">
<div class="box">
<div class="hover">
PHOTOSET
See full set
</div>
</div>
{block:Photos}
<img src="{PhotoURL-250}"{block:Caption} alt="{PlaintextCaption}"{/block:Caption}>
{/block:Photos}
</div>
{/block:IndexPage}
{block:PermalinkPage}
{block:Photos}
<img src="{PhotoURL-500}"{block:Caption} alt="{PlaintextCaption}"{/block:Caption}>
{/block:Photos}
{/block:PermalinkPage}
{block:IndexPage}
{block:ifshowcaption}
{block:Caption}
<div class="caption photo_caption">{Caption}</div>{/block:Caption}
{/block:ifshowcaption}
{/block:IndexPage}
{/block:Photoset}
I'm building a site with susy to allow flexibility with the grids I need, I have not set any settings at the moment so Im only using the defaults.
I want to be able to change the gutters (make them smaller) for a section of the site.
I built it out here:
http://sassmeister.com/gist/89243b68852fdd9cf282
SCSS
.feature-box-container
{
#include container(80em);
.feature-box
{
#include gallery(4 of 12);
img
{
margin-bottom:20px;
width: 100%;
}
}
}
HTML
<div class="feature-box-container container">
<div class="feature-box">
<!-- 450 -->
<div>
<img src="http://placehold.it/355x170" alt="">
</div>
<div>
<img src="http://placehold.it/355x280" alt="">
</div>
</div>
<div class="feature-box">
<div>
<img src="http://placehold.it/355x317" alt="">
</div>
<div>
<img src="http://placehold.it/355x133" alt="">
</div>
</div>
<div class="feature-box">
<div>
<img src="http://placehold.it/355x270" alt="">
</div>
<div>
<img src="http://placehold.it/355x180" alt="">
</div>
</div>
</div>
In the picture it has the sites default, but I need only this section to have at least half the gutter width it has now.
You can use the with-layout mixin to [change your grid settings for a nested block of code]](http://susydocs.oddbird.net/en/latest/settings/#with-layout).
#include with-layout($new-settings) {
// code you want affected...
}
I am trying to fixed the menu in the template, but every time when I use the fixed function in the menu, an error occurs because the menu is misplaced to the right off the page.
The example is here: http://jsfiddle.net/ecram/ddbvg532/1/
Reviewing the code and I think the problem is on the Grid.
<div class="ui inverted page grid masthead segment">
<div class="column">
<div class="ui fixed inverted pointing menu">
<div class="header item"><i class="home icon"></i> Principal
</div>
<div class="right menu">
<a class="item"> About</a>
<a class="item"> People</a>
<a class="item"> Projects</a>
</div></div></div>
</div>
I resolve the problem using:
<style type="text/css">.fijo {position:fixed !important; top:0px; z-index:10 !important} </style>
<div class="fijo">
Content
</div>
When using bootstrap 3 and Desandro's Masonry, I'm getting stuck on a weird issue in which it seems that once Masonry is called, an extra 10px is added to the width of my images, causing the masonry to go from a desired 3 columns to 2 (but still working properly in 2). My best guess is that this must have something to do with Bootstrap's new .img-responsive class.
The issue can be seen here: http://jsfiddle.net/68qxE/2/ (just be sure to expand the width of the result), but if you'd prefer:
Here is my HTML:
<div class="container">
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/260/large/tumblr_msnl3ayMxU1rsnzy2o5_1280.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/257/large/24ekOAH.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/248/large/tumblr_mqeom2a2oU1qbltjyo2_1280.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/244/large/3CjBFlN.jpg" />
</div>
<div class="post-box col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive img-thumbnail" src="http://s3.amazonaws.com/s3.babblin.gs/posts/images/000/000/241/large/OoRsR42.gif" />
</div>
</div>
Here is my Javascript:
$(document).ready(function(){
var $container = $('.container');
$container.imagesLoaded( function() {
$container.masonry({
itemSelector : '.post-box',
columnWidth : '.post-box',
transitionDuration : 0
});
});
});
And here is my CSS:
.img-thumbnail {
padding: 10px;
}
.post-box {
margin: 15px 0 15px 0;
}
Now when the page is originally loaded, and before any of the javascript takes place, the width of col-lg-4's are 350px. But as soon as the javascript is called, the width of the col-lg-4's jumps up to 360px, which I believe is what's causing this to go from a 3-column layout down to a 2-column layout.
The answer was further discussed and solved here: https://github.com/desandro/masonry/issues/405
I don't think it's caused by imagesLoaded. The issue is that there's a padding on .container.
Why don't you just reset that to 0?
.container {
padding: 0px;
}