Image gallery - Pinterest like layout with CSS? - javascript

I'm working on a dynamic php gallery.
The thumbnails will all have the same width but various heights. They'll be placed from left to right. So, I don't want to use a five columns pattern.
I guess it's not possible to do it only with CSS, so maybe you know any jquery script that would do the job? I guess this kind of gallery pattern is quite common...
http://i.stack.imgur.com/Xwdx0.png

Here's the pure css solution using css3 columns. This isn't going to work in older browsers, read here (click). Live demo here (click).
You can use masonry.js, isotope.js, or packery.js for more compatible js solutions.
<div class="col-5">
<div class="sm"></div>
<div class="lg"></div>
<div class="sm"></div>
<div class="sm"></div>
<div class="lg"></div>
<div class="lg"></div>
<div class="sm"></div>
<div class="lg"></div>
<div class="lg"></div>
<div class="lg"></div>
</div>
css:
.col-5 {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
.col-5 > div {
display: inline-block;
}
.sm {
height: 75px;
}
.lg {
height: 125px;
}

You could try using/jigging a Jquery plugin like the following:
http://codecanyon.net/item/jquery-tiles-gallery/2281417
or
http://codecanyon.net/item/jbmarket-image-gallery/full_screen_preview/3028128?ref=lamdang

If you're trying to make the layout the 'pintrest' way, you can have an array of x columns and iterate through each column to check for the shortest height, and add the next box in that column.
That way you would know it works for all browsers [unless they have js disabled] and then you can style the width of the columns.

Related

- CSS bootstrap, divs skip row how get neatly in a row dispite height difference -

The problem occurred on other projects, but then I made all the divs the same size. I made a print screen of my problem.
As you can see the the third div is a little longer then the others (and yes I want to keep this). My css or bootstrap wants to skip a row.
html
<div ng-repeat="work in myWork" class="col-lg-3 col-md-3 col-xs-12" id="myWorkHolders">
css
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
}
Problem
DIVS skip a row when the div above is not the same size as the others.
Question
what Css terms can I use so the divs will display under each other despite different sizes.
you can add an extra class with min-height to every div, just match the height of ur largest div and put that into css class.
<style>
.yourclass {
min-height:Xpx; //replace X with the height of your largest div.
}
</style>
and now just put this class into every div as:
<div class="col-md-3 yourclass">.col-md-3</div>
I have run into this problem before; I'm curious what other people say. Not sure if this is the best solution, but what I did that worked for me was assign a min-height to those divs. the min-height you assign will depend on the height of your largest div.
so:
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
/* the exact height specified will have to be experimented with */
min-height: 250px;
}
With bootstrap you need to use the row class to make sure the columns layout correctly no matter the height a particular column.
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
So when creating your loop you need to think about how to add in the row container after every fourth column.

Text Overlay on Image Hover - Responsive

I am using this tutorial to create an overlay on my images with text:
http://codepen.io/pdelsignore/pen/uqenH
It works great, however I have a responsive website and if I try to enter a % as the width / height of the '.box' the image disappears. It appears it can only be a fixed with (i.e. px) which obviously doesn't scale.
.box {
cursor: pointer;
height: 250px;
position: relative;
overflow: hidden;
width: 400px;
font-family: 'Open Sans', sans-serif;
}
Does anyone have any ideas? Thanks in advance!
Try giving min-width and min-height a try.
min-width: 100%;
min-height: 100%;
In live project usually we use any responsive framework. Like bootstrap or foundation. So I think you could ignore as framework will handle this properly. No need to use any % to make it responsive. For Bootstrap we use
<div class="row">
<div class="col-md-4">
<div class="box">
<img src="http://files.room1design.com/oldcity.jpg"/>
<div class="overbox">
<div class="title overtext">
Walk This Way
</div>
<div class="tagline overtext">
Follow the path of stone, a road towards an ancient past
</div>
</div>
</div> <!-- End box -->
</div> <!-- End Col-4 -->
</div> <!-- End row -->
I believe the dimensions of .box as a percentage would be based on the height of the parent. since no height is specified on the body it has no frame of reference. try adding the following to get percentages working on .box.
html, body {
height:100%;
}
here is an updated codepen with a few other changes to illustrate the use of percentages after giving your body dimension.
http://codepen.io/anon/pen/dPREBE

how to stop div wrap in two colomn page

Hello Stack overflow community. I am just getting better at coding and this is probably my first of many questions. I cant post images till I reach 10 rep so the image representation of what i need is in the link below.
https://6ff6bf8640d4ef91208a73a6d9d14f00ce70afa0.googledrive.com/host/0B667ouzaQ0tXbGQ5RXJFaHI2NlU/Stack%20Question%201.png
I have created a div class="tile". and a mobile html page with two columns. Each "tile" div has a image"img" and a button"a href". I want them to wrap as tiles and not cut in half the way they are in the image. Here is my simplified code:
<hmtl>
<body>
<div class="2 columns">
<div class="tile">
<h3 ><img class="tileimg " src="anyimage"></h3>
<button>More</button>
</div>
<div class="tile">
<h3 ><img class="tileimg " src="anyimage"></h3>
<button>More</button>
</div>
</body>
</html>
<style>
.2 column{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;}
</style>
The tile gets split into two part but i just want them to stick together. I am using HTML. CSS. Javacrpt and Jquery and Jquery mobile.1.4.5 Trying to create a mobile web based app.
Can I use JavaScript to force them to stick together? whatever you guys think is the best solution. I've been searching all over the web. and Stackoverflow
Use this CSS. It tells to do its best not to break inside the tile so both elements stock together. Found at http://css-tricks.com/almanac/properties/b/break-inside/
.tile{
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
}
set display:inline-block for .columns
Set display: inline-block; to the tiles.
<div class="tiles">
<div class="tile">...</div>
<div class="tile">...</div>
...
</div>
&
.tiles {
column-count: 2;
...
}
.tile {
display: inline-block;
}
Columns work essentially by automatically wrapping on whatever line of flow content they deem necessary. By telling them the tiles are inline-block (i.e. inline elements), you're basically saying that the whole tile is like a "letter" or a "word" - a single unbreakable item on a "line" of flow content.
On a sidenote, your classes in HTML and CSS don't match. I'd advise against using just numbers and instead suggest using either something like class="columns columns-2", or (better) using semantic markup like class="tiles".
You can use table to put them side by side as in your image...
<table>
<tr>
<td>
<div class="tile">
<h3 ><img></h3>
<button>More</button>
</div>
</td>
<td>
<div class="tile">
<h3 ><img></h3>
<button>More</button>
</div>
</td>
</tr>
</table>

How to create page with multiple pages of data that can be toggled via a sidebar?

I want to create a simple website page that allows my users to flip through a few different sets of data (kind of like mini-pages) but without reloading the page. The data could all be preloaded or requested with Ajax for each selection.
I tried using Bootstrap to create Tabs, but the first screen would never disappear.
I'm not aware of any other way to do this, other than with complicated Javascript that sets visibility to invisible.
Are there any clean, convenient, HTML/CSS-only ways to go about this?
Below, are some prototype screenshots of what the page would look like, and how it changes with each sidebar selection.
You could do it without the use of JavaScript if you are willing to make the data sets change upon hovering the menu, instead of clicking it.
Here's a JSFiddle: http://jsfiddle.net/n8wF4/. It's quite ugly, but it works...
HTML:
<div class="menu">
<div class="menu-item-1">item 1
<div class="content data-set-1">Content 1</div>
</div>
<div class="menu-item-2">item 2
<div class="content data-set-2">Content 2</div>
</div>
<div class="menu-item-3">item 3
<div class="content data-set-3">Content 3</div>
</div>
</div>
CSS:
.menu {
position: relative;
}
.content {
display: none;
position: absolute;
right: 0;
top: 0;
}
.menu-item-1:hover .data-set-1,
.menu-item-2:hover .data-set-2,
.menu-item-3:hover .data-set-3 {
display: block;
}
no need to have complicated javascript.
Have a look at jquery ui tabs.
I believe you can't do the same thing in pure CSS. There are no click events in CSS.

Layout divs in css like table cells in HTML Tables

One more time today i stumbled upon a problem i always have with css layouts. I'd like to have 5 divs in a horizonzontal row. Let's say for example their widths should be:
1 : 60 px,
2 : 30 %,
3 : 40px,
4 : *
5 : 100px
where * stands for "fill up the remaining space". Back in the old days that's been the way we layouted width tables. Nowadays due to accesibility reasons html tables are banned for layouts. This is just an example. I'm searching for a general solution.
Does someone know a generator, a lightweight javascript solution (can be a jQuery plugin), a tutorial, a book, or a magician which can help me to solve this problem for now and forevermore?
Allthough a javascript based solution is possible a non-script solution would be preferred.
You can use display:table to create this effect, I made a quick fiddle
This makes the individual div's act like table cells, and the section is the table, I used a section just to have cleaner code, a div would work too.
You will notice the table cells get smaller than you specified if the window size is too small, this is because of the table's default behaviour. To combat this just add a min-width (with the same value as the width)
http://jsfiddle.net/lnplnp/bFrmD/
#div1 {
width: 60px;
}
#div2 {
width: 30%;
}
#div3 {
width: 40px;
}
#div4 {
}
#div5 {
width: 100px;
}
.layout {
display:table;
}
.cell {
display: table-cell;
}​
<html>
<head>
<title>DIV LIKE TABLE</title>
</head>
<body>
<div class="layout">
<div id="div1" class="cell">1</div>
<div id="div2" class="cell">2</div>
<div id="div3" class="cell">3</div>
<div id="div4" class="cell">4</div>
<div id="div5" class="cell">5</div>
</div>
</body>
</html>
​Cross your finger ! With recent broswers you can do it now !

Categories

Resources