I have an image gallery in my modal, which is styled using flexbox. The problem is that some pictures which are too large horizontally flow over and make the flexbox stretch, so the item next to it is messed up, eventhough the flex weights are set in css.
<div class="slideshow-container">
<div class="mySlides fade" style="display: block;">
<div class="numbertext">1 / 16</div>
<img src="./img/normal/image.jpg" class="galimg" style="height: 331px;">
<div class="text">Image description</div>
</div>
....
</div>
I want each image to maintain its aspect ratio. Some are landscape, some are portrait. So I thought I'd try the following:
var maxHeight = $('#modal-gallery').height()-39; // need 39px for the gallery navigation.
var maxWidth = $('#modal-gallery').width();
var ratio = maxHeight/maxWidth;
$('.galimg').each(function(i){
if ($(this).height()/$(this).width() > ratio){
$(this).width(maxWidth);
} else {
$(this).height(maxHeight);
}
});
CSS:
#modal-gallery { // this is the div surrounding the gallery
flex: 6;
display: flex;
margin-right: auto;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.slideshow-container {
display: flex;
position: relative;
margin: 0;
}
I know the problem is probably somewhere in my JS, as I tried logging the width and height and often got 0. The html is generated dynamically through JS. I tried adding an onImgLoad function, but didn't get any result.
There is no need to do a js thing. Just fix your css. Add some styles and HTML elements. The following is the most common way to show different size images in many websites (Please also expand the snippet to see how it behaves).
#modal-gallery { // this is the div surrounding the gallery
flex: 6;
display: flex;
margin-right: auto;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.slideshow-container {
display: flex;
position: relative;
margin: 0;
}
.mySlides{
display:block
}
.slide-image{
display:inline-block;
width:220px;
text-align:center;
vertical-align:top;
margin-bottom: 20px;
}
.img-container{
display:block;
width:200px;
}
.img-container .img{
display:table-cell;
vertical-align:middle;
text-align:center;
}
.img-container img{
max-height:200px;
max-width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="http://i.imgur.com/RRUe0Mo.png" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
<div class="slide-image">
<div class="numbertext">1 / 16</div>
<div class="img-container">
<div class="img">
<img src="http://i.imgur.com/RRUe0Mo.png" class="galimg" />
</div>
</div>
<div class="text">Image description</div>
</div>
</div>
</div>
Related
I am trying to create a vertical thumb gallery that controls a main gallery. The issue I'm having is that when some of the thumbs are clicked, the thumb gallery automatically slides. Is there a way to disable that sliding, and make it so that all sliding only occurs when the nav buttons are clicked?
I'm also running into a spacing issue in the thumb gallery, which is evident when viewing the fiddle/snippet below. I need a 6px gap. Also, the thumbs in the second column are being cut off. I don't understand, because I set a width of 166px for the gallery (2 80px media items + 6px gap = 166px).
https://jsfiddle.net/guqsayj3/
let galleryThumbs = new Swiper('.prod-gallery .gallery-thumbs', {
spaceBetween: 6,
slidesPerGroup: 1,
slidesPerView: 5,
slidesPerColumn: 2,
//slideToClickedSlide: true,
//allowTouchMove: false,
//freeMode: true,
//watchSlidesVisibility: true,
//watchSlidesProgress: true,
direction: 'vertical',
noSwiping: false,
navigation: {
nextEl: '.gallery-thumbs-wrap .next',
prevEl: '.gallery-thumbs-wrap .prev',
},
//controller: {
//control: galleryTop,
//},
});
let galleryTop = new Swiper('.prod-gallery .gallery-main', {
spaceBetween: 10,
thumbs: {
swiper: galleryThumbs
}
});
//galleryThumbs.controller.control = galleryTop;
.prod-gallery {
display: grid;
grid-template-columns: 166px minmax(20px, 76px) 300px;
align-items: center;
}
.prod-gallery .gallery-thumbs {
height: 530px;
}
.prod-gallery .gallery-thumbs .swiper-slide {
cursor: pointer;
width: 80px;
opacity: 0.4;
}
.prod-gallery .gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.prod-gallery .gallery-thumbs .media {
width: 80px;
height: 100px;
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
.prod-gallery .gallery-main {
width: 100%;
grid-column-start: 3;
}
.prod-gallery .gallery-main .media {
width: 300px;
height: 300px;
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
<script src="https://unpkg.com/swiper#6.3.4/swiper-bundle.js"></script>
<link href="https://unpkg.com/swiper#6.3.4/swiper-bundle.css" rel="stylesheet"/>
<div class="prod-gallery">
<div class="gallery-thumbs-wrap swiper-no-swiping">
<!-- Nav -->
<div class="nav-btn prev">
<img src="https://via.placeholder.com/30x30">
</div>
<div class="nav-btn next">
<img src="https://via.placeholder.com/30x30">
</div>
<!-- Slider -->
<div class="gallery-thumbs swiper-container">
<div class="swiper-wrapper" style="height: 742px; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide">
<div class="media">1</div>
</div>
<div class="swiper-slide">
<div class="media">2</div>
</div>
<div class="swiper-slide">
<div class="media">3</div>
</div>
<div class="swiper-slide">
<div class="media">4</div>
</div>
<div class="swiper-slide">
<div class="media">5</div>
</div>
<div class="swiper-slide">
<div class="media">6</div>
</div>
<div class="swiper-slide">
<div class="media">7</div>
</div>
<div class="swiper-slide">
<div class="media">8</div>
</div>
<div class="swiper-slide">
<div class="media">9</div>
</div>
<div class="swiper-slide">
<div class="media">10</div>
</div>
<div class="swiper-slide">
<div class="media">11</div>
</div>
<div class="swiper-slide">
<div class="media">12</div>
</div>
<div class="swiper-slide">
<div class="media">13</div>
</div>
</div>
</div>
</div>
<div class="gallery-main swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="media">1</div>
</div>
<div class="swiper-slide">
<div class="media">2</div>
</div>
<div class="swiper-slide">
<div class="media">3</div>
</div>
<div class="swiper-slide">
<div class="media">4</div>
</div>
<div class="swiper-slide">
<div class="media">5</div>
</div>
<div class="swiper-slide">
<div class="media">6</div>
</div>
<div class="swiper-slide">
<div class="media">7</div>
</div>
<div class="swiper-slide">
<div class="media">8</div>
</div>
<div class="swiper-slide">
<div class="media">9</div>
</div>
<div class="swiper-slide">
<div class="media">10</div>
</div>
<div class="swiper-slide">
<div class="media">11</div>
</div>
<div class="swiper-slide">
<div class="media">12</div>
</div>
<div class="swiper-slide">
<div class="media">13</div>
</div>
</div>
</div>
</div>
Add slidesPerColumnFill: 'row' and indents between slides will be correct
There are two options here:
Columns follow a vertical direction
DEMO
1..4
2..5
3..6
Need to add slidesPerColumnFill: 'row'
Columns follow a horizontal direction
DEMO
1..2
3..4
5..6
Need to set a property flex-direction: row; for .swiper-container-multirow-column > .swiper-wrapper
.swiper-container-multirow-column > .swiper-wrapper{
flex-direction: row;
}
I am trying to create CSS slider infinite scroll, but without appending/adding/creating DOM elements. Infinite scroll as in when the last slide is reached, the first slide should be shown again after it.
I have a fixed width slide, so the use of slick and box slider plugin does not work for me.
.slider-wrap {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid red;
}
.slider-wrap .slide {
display: inline-block;
width: 200px;
margin: 5px;
}
.slider-wrap .slide img {
width: 100%;
}
<div class="slider-wrap">
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
Here are two options:
clone the items: you get a more natural approach (cloning isn't that bad). That's the system you would usually find on websites to add more content.
revert the position scroll position to another position to make it seem the slider never ends. Beware this will not make the scroll bar smaller as the content of the slider never gets changed
(a) Cloning
As you said you can clone the images.
The trick is to determine when the scroll has reached the end of the slider to clone more images in:
$(function() {
$('.slider-wrap').scroll(function() {
const slider = $(this);
width = slider.innerWidth()
scrollWidth = slider[0].scrollWidth;
scrollLeft = slider.scrollLeft();
if(scrollWidth - width == scrollLeft) {
slider.children().clone().appendTo(slider);
}
});
});
.slider-wrap {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid red;
}
.slider-wrap .slide {
display: inline-block;
width: 200px;
margin: 5px;
}
.slider-wrap .slide img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-wrap">
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">
<img src="http://via.placeholder.com/350x150">
</div>
</div>
And here's a demo:
$(function(){$('.slider-wrap').scroll(function(){const slider=$(this);var $width=slider.innerWidth()
var $scrollWidth=slider[0].scrollWidth;var $scrollLeft=slider.scrollLeft();if($scrollWidth-$width==$scrollLeft){slider.children().clone().appendTo(slider)}})})
.slider-wrap{white-space:nowrap;overflow-x:auto;overflow-y:hidden;border:1px solid red}.slider-wrap .slide{display:inline-block;margin:5px}.slider-wrap .slide img{height:120px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="slider-wrap"> <div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4e2VF6cfou9oL0cc5OAzVTEbmAgFjIW2r-7lTkpOljG9k38N"> </div><div class="slide"> <img src="https://nbocdn.akamaized.net/Assets/Images_Upload/2018/01/06/0060bbce-f2f2-11e7-bf60-029def90d6d6_web_scale_0.0542636_0.0542636__.jpg?maxheight=460&maxwidth=638&scale=both"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr0xQ-gVF1Sy1a1sHoUyfGdrBwyz-5u0Tirkt-uNCKd-AzNXY1ww"> </div><div class="slide"> <img src="https://cdn.pixabay.com/photo/2017/05/29/15/34/kitten-2354016_960_720.jpg"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJLwVbVu6tjubsduR43je-Muk7p8lAKDu569GuL_yDWGzrZwp2"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRHeW6zNDdDQBwtpuu3RvLW1ihM3Za-OLBoOMRR_4z7GvwYor2eQ"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKeCmurlUrTtd4CjvXYskGVAUAiDq5X49iNb3XhOcMss2vN8c6"> </div></div>
(b) A hack with scrollLeft
You could also go straight back to the first slide container by setting the scrollLeft to the position when it first added a new slide container:
let firstPos = undefined;
$('.slider').scroll(function() {
const slider = $(this);
width = slider.innerWidth()
scrollWidth = slider[0].scrollWidth;
scrollLeft = slider.scrollLeft();
isEndOfSlider = (scrollWidth - width) == scrollLeft;
numberOfWraps = slider.children().length;
if(isEndOfSlider) {
if(numberOfWraps == 1) {
firstPos = scrollLeft;
slider.children().first().clone().appendTo(slider);
} else {
slider.scrollLeft(firstPos);
}
}
});
.slider {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
border: 1px solid red;
}
.slider-wrap {
display: inline-block;
}
.slider-wrap .slide {
display: inline-block;
width: 200px;
margin: 5px;
}
.slider-wrap .slide img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider-wrap">
<div class="slide">1
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">2
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">3
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">...
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">...
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">-2
<img src="http://via.placeholder.com/350x150">
</div>
<div class="slide">-1
<img src="http://via.placeholder.com/350x150">
</div>
</div>
</div>
Here's a demo:
let firstPos=undefined;$('.slider').scroll(function(){const slider=$(this);width=slider.innerWidth()
scrollWidth=slider[0].scrollWidth;scrollLeft=slider.scrollLeft();isEndOfSlider=(scrollWidth-width)==scrollLeft;numberOfWraps=slider.children().length;if(isEndOfSlider){if(numberOfWraps==1){firstPos=scrollLeft;slider.children().first().clone().appendTo(slider)}else{slider.scrollLeft(firstPos)}}})
.slider{white-space:nowrap;overflow-x:auto;overflow-y:hidden;border:1px solid red}.slider-wrap{display:inline-block}.slider-wrap .slide{display:inline-block;margin:5px}.slider-wrap .slide img{width:auto;height:120px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="slider"> <div class="slider-wrap"> <div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTa4e2VF6cfou9oL0cc5OAzVTEbmAgFjIW2r-7lTkpOljG9k38N"> </div><div class="slide"> <img src="https://nbocdn.akamaized.net/Assets/Images_Upload/2018/01/06/0060bbce-f2f2-11e7-bf60-029def90d6d6_web_scale_0.0542636_0.0542636__.jpg?maxheight=460&maxwidth=638&scale=both"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQr0xQ-gVF1Sy1a1sHoUyfGdrBwyz-5u0Tirkt-uNCKd-AzNXY1ww"> </div><div class="slide"> <img src="https://cdn.pixabay.com/photo/2017/05/29/15/34/kitten-2354016_960_720.jpg"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJLwVbVu6tjubsduR43je-Muk7p8lAKDu569GuL_yDWGzrZwp2"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRHeW6zNDdDQBwtpuu3RvLW1ihM3Za-OLBoOMRR_4z7GvwYor2eQ"> </div><div class="slide"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKeCmurlUrTtd4CjvXYskGVAUAiDq5X49iNb3XhOcMss2vN8c6"> </div></div></div>
Want to make it responsive, and the information on the elements in the first line (1-4) is required to show only under the first row, on the mobile it will be two or one element Information about the elements from the second row (5-8) under the second row In the screenshots I tried to show how I would like to see this
$(".items .item").click(function() { // Клик по айтему
$(".items .item").removeClass("active").eq($(this).index()).addClass('active');
$(".hidden-block .item-content").slideUp().eq($(this).index()).slideDown();
});
.items {
font-size: 0px;
}
.item:nth-child(2n) {
background: #e6e4e3;
}
.item {
background: #f2f1f0;
}
.items img {
filter: grayscale(80%);
transition: all 0.4s;
height: 100px;
}
.items img:hover {
filter: grayscale(0%);
}
.items .item {
padding-top: 25px;
display: inline-block;
width: 25%;
height: 150px;
box-sizing: border-box;
font-size: 24px;
text-align: center;
float: left;
cursor: pointer;
}
.item-content {
width: 70%;
margin: 0 auto;
display: block;
height: 400px;
}
.right,
.left {
width: 50%;
float: left;
padding-top: 40px;
}
.hidden-block .item-content {
display: none;
font-size: 16px;
color: #000;
}
.items .item.active {
background: #00000061;
}
.items .item.active+.hidden-block {
display: block;
}
#media screen and (max-width: 320px) {
.items .item {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
</div>
<br clear="all" />
<div class="hidden-block">
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
</div>
<br clear="all" />
<div class="items">
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/html-5.svg"></div>
<div class="item"><img src="https://cdn.svgporn.com/logos/css-3.svg"></div>
</div>
<br clear="all" />
<div class="hidden-block">
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/html-5.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
<div class="item-content">
<div class="left">
<img src="https://cdn.svgporn.com/logos/css-3.svg">
</div>
<div class="right">
<h2>HTML 5</h2>
<span class="href">https://en.wikipedia.org/wiki/HTML5</span>
<p>HTML5[a] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard.</p>
</div>
</div>
</div>
How must ork first row
How must work second row
I'm building an app using jquery mobile.
I want to vertically and horizontally center multiple images using grid, i want the images to be exactly in the center of the page. I'v tried everything but nothing really worked.
I want it exactly to look like whats in this pic:
Sample
and here is my code:
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-a">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
</div>
</div>
</div>
I would love if it can look exactly like the image attached.
Thank you.
You can scale the content div to take the device height:
$(document).on( "pagecontainershow", function(){
ScaleContentToDevice();
$(window).on("resize orientationchange", function(){
ScaleContentToDevice();
})
});
function ScaleContentToDevice(){
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
Then use some CSS on the grid to center everything within the scaled content:
<div id="GridWrapper">
<div class="ui-grid-a centeredGrid">
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-a" >
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
<div class="ui-block-b">
<img alt="" src="http://i.imgur.com/MIK25Fd.png" >
</div>
</div>
</div>
#GridWrapper{
position: relative;
height: 100%;
}
#GridWrapper .centeredGrid{
position: absolute;
width: 380px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO
You can try with flexbox properties.
.ui-block-a,.ui-block-b{
width: 30px;
height: 30px;
margin: 5px;
}
.ui-grid-a{
display: flex;
align-items: center;
min-height: 15em;
justify-content: center;
}
For further information about flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm trying to use Masonry, but it doesn't seem to work well. It leaves a lot of empty spaces. as you can see here
I already tried various other ways to implement Masonry, but this one leans the most to the result. Can someone help this rookie?
Here what I think is important of my HTML/ CSS/ JAVASCRIPT
<script src="masonry-docs/js/masonry.pkgd.min.js"></script>
<script type="text/javascript">// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
// options
columnWidth: 33%,
itemSelector: '.grid-item'
});</script>
.grid-item{width: 33%;}
.grid-item--width2{width: 33%;}
.grid-item--width3{width: 33%;}
*{box-sizing:border-box;}
.box-sizing:border-box;
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-item {
width: 33%;
float: left;
border: 5px solid #FFFFFF;
}
.grid-sizer,
.grid-item {
width: 33%;
}
<section id="werk">
<div class="container">
<div class="grid">
<div class="item">
<div id="masonry-grid">
<div class="grid-item">
<h3>Manifesta 10</h3>
<span class="category">huisstijl</span>
<img src="images/manifesta.jpg" alt="" />
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Deutsche Grammophon</h3>
<span class="category">platenhoezen</span>
<img src="images/GIF_1.gif" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width3">
<h3>Ghent Art Book Fair</h3>
<span class="category">poster</span>
<img src="images/boekposter.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item">
<h3>teaser masterproef</h3>
<span class="category">foto</span>
<img src="images/masterproef.png" alt="" />
</div>
</div>
<div class="item">
<div class="grid-item grid-item--width2">
<h3>Mundaneum</h3>
<span class="category">publicatie</span>
<img src="images/Mundaneum.gif" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Your h3 Element has a margin, add this a the beginning of your CSS-Code:
h3 { margin: 0px; }
Your .grid-item has a border of 5px, change it in your CSS-Code:
.grid-item {
width: 33%;
float: left;
border: 0px solid #FFFFFF;
}