Is it possible to convert this image grid into a gallery?
I've tried many times with no success.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
img {
width: 100%;
}
.header {
text-align: center;
padding: 32px;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
}
.column img {
margin-top: 12px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media (max-width: 800px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media (max-width: 600px) {
.column {
width: 100%;
}
}
<div class="header">
<h1>Responsive Image Grid</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="row">
<div class="column">
<img src="/w3images/wedding.jpg">
<img src="/w3images/rocks.jpg">
<img src="/w3images/falls2.jpg">
<img src="/w3images/paris.jpg">
<img src="/w3images/nature.jpg">
<img src="/w3images/mist.jpg">
<img src="/w3images/paris.jpg">
</div>
<div class="column">
<img src="/w3images/underwater.jpg">
<img src="/w3images/ocean.jpg">
<img src="/w3images/wedding.jpg">
<img src="/w3images/mountainskies.jpg">
<img src="/w3images/rocks.jpg">
<img src="/w3images/underwater.jpg">
</div>
<div class="column">
<img src="/w3images/wedding.jpg">
<img src="/w3images/rocks.jpg">
<img src="/w3images/falls2.jpg">
<img src="/w3images/paris.jpg">
<img src="/w3images/nature.jpg">
<img src="/w3images/mist.jpg">
<img src="/w3images/paris.jpg">
</div>
<div class="column">
<img src="/w3images/underwater.jpg">
<img src="/w3images/ocean.jpg">
<img src="/w3images/wedding.jpg">
<img src="/w3images/mountainskies.jpg">
<img src="/w3images/rocks.jpg">
<img src="/w3images/underwater.jpg">
</div>
</div>
Related
I have a grid image gallery for a collection of projects. By clicking each image, I want it to have a pop-up image slideshow that shows more images that are not in the gallery. So people can see more details about a particular project.
Is it possible to do that with hrml/css/javascript? I'm building it on Tumblr so functions are limited.
Below is the very basic html/css of the grid image gallery. How should I continue from that on?
div.gallery {
border: 20px solid #ccc;
}
div.gallery:hover {
border: 20px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_1.jpg">
<img src="iimg_1.jpg" alt="Cat" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_2.jpg">
<img src=""img_2.jpg"" alt="Forest" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_3.jpg"">
<img src="img_3.jpg" alt="Lights" width="600" height="600">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_4.jpg">
<img src="img_4.jpg" alt="Sea" width="600" height="600">
</a>
</div>
</div>
<div class="clearfix"></div>
if you want to open new gallery by clicking on a button/link you can write a JavaScript function which will display every element you want in the DOM.
So, on click add new element to HTML from JS and display provided elements.
So I am designing a webpage, and I have three images aligned next to each other:
html :
<div id="imgs">
<img src="img/img_2.jpg" alt="">
<img src="img/img_1.jpg" alt="">
<img src="img/img_0.jpg" alt="">
</div>
css :
#imgs img {
width: 29%;
margin: 1.5%;
}
On desktop I want to keep the three images next to each other but when on mobile I want then into a slider.
A simple solution is to make two elements and display the first one if the width of the page is > 600px. Else you display the other.
<div id="imgs-flex">
<img src="img/img_2.jpg" alt="">
<img src="img/img_1.jpg" alt="">
<img src="img/img_0.jpg" alt="">
</div>
<div id="img-mobile">
<img src="img/img_2.jpg" alt="">
<img src="img/img_1.jpg" alt="">
<img src="img/img_0.jpg" alt="">
</div>
And then in the CSS :
#img-flex{
display: flex;
}
#img-mobile{
display: none;
}
/* You use Media Queries for the responsive */
#media screen and (max-width: 600px){
#img-mobile{
display: block;
}
#img-flex{
display: none;
}
}
And you add Javascript to do your slider.
Have you tried using display: flex; and a media query for with a min-max?
If the screen is smaller then 600px the three images are displayed one below the other. Larger than 600px are all images placed side by side.
I hope this is what you are searching for...
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 50%; /* for fullscreen take 100% */
}
}
<div class="row">
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%;">
</div>
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
</div>
<div class="column">
<img src="https://www.zdnet.de/wp-content/uploads/2017/08/stackoverflow.jpg" alt="" style="width:100%">
</div>
</div>
I want my images in an image carousel to scale when I change the size of the window. If I add the following to the CSS,
.carousel-slide img {
display: block;
width: 100%;
}
then for some reason I think the browser is taking the div class="carousel-slide" as the parent of the img instead of the figure, and I get all 4 images displaying in the width of the figure. Or perhaps it is because I am using the CSS Grid? How do I fix this behaviour?
HTML:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<main>
<section id="image-carousel">
<button id="leftButton">
PREV
</button>
<div id="carousel">
<div class="carousel-slide">
<figure>
<img id="lastClone" src="image-4.jpg" alt="">
<br>
<figcaption>
figcap1
</figcaption>
</figure>
<figure>
<img src="image-1.jpg" alt="">
<br>
<figcaption>
figcap2
</figcaption>
</figure>
<figure>
<img src="image-4.jpg" alt="">
<br>
<figcaption>
figcap4
</figcaption>
</figure>
<figure>
<img id="firstClone" src="image-1.jpg" alt="">
<br>
<figcaption>
figcap5
</figcaption>
</figure>
</div>
</div>
<button id="rightButton">
NEXT
</button>
</section>
</main>
</body>
</html>
CSS:
#image-carousel{
display: grid;
grid-template-areas:
". leftButton carousel rightButton .";
grid-template-columns: 0.4fr 0.5fr 60vw 0.5fr 0.4fr;
grid-template-rows: auto;
}
#carousel{
grid-area: carousel;
overflow: hidden;
}
.carousel-slide{
display: flex;
width: 100%;
height: 550px;
}
.carousel-slide img{
z-index: 1;
/*width: 100%; this is treating carousel-slide as parent instead of figure? why?*/
}
.carousel-slide figure{
width: 100%;
}
#leftButton{
grid-area: leftButton;
z-index: 3;
}
#rightButton{
grid-area: rightButton;
z-index: 3;
}
#carousel figcaption{
background-color: rgba(15, 27, 27, 0.7);
text-align: center;
height: 50px;
width: auto;
position: relative;
bottom: 50px;
z-index: 2;
}
When I use Material Box from Materialize along with Muuri grid items, the maximized Material Box will still display behind the subsequent Muuri grid items even though the Material Box's z-index is set high.
Here's my plunker example https://plnkr.co/edit/aM2427AEwuWIqV3N9GvE/.
In the example, if you click on box three it appears to work, but if you click on boxes one and two you will see that they will still have the other boxes overlapping them.
Here's the CSS:
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}
Here's the HTML:
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
Here's the JavaScript:
$(function() {
var grid = new Muuri('.grid');
});
I just created a new example from your code and it's working fine. Hope this will help!
here is the link to that example MUURI EXAMPLE
code:
HTML
<div class="grid">
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/ffab91/?text=one" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/90caf9?text=two" />
</div>
</div>
<div class="item">
<div class="item-content">
<img class="materialboxed" src="https://via.placeholder.com/270x350/80cbc4/?text=three" />
</div>
</div>
</div>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
background: #fcfaf9;
}
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
height: 200px;
width: 200px;
line-height: 200px;
margin: 5px;
text-align: center;
z-index: 1;
}
.item.muuri-item-dragging {
z-index: 3;
}
.item.muuri-item-releasing {
z-index: 2;
}
.item.muuri-item-hidden {
z-index: 0;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
color: #fff;
background: #59687d;
font-size: 40px;
text-align: center;
}
.item.muuri-item-dragging .item-content {
background: #8993a2;
}
.item.muuri-item-releasing .item-content {
background: #152c43;
}
JS
const grid = new Muuri(".grid", {
dragEnabled: true
// dragAxis: 'y'
});
I am working on building a website and below is my desired outcome.
Desired: http://i.stack.imgur.com/JI7tQ.png
Note: there is an image on the left making it 5 images in total.
However when I resize the broswer the grid-images stack together like so..
Actual: http://i.stack.imgur.com/tNSLP.png
Below is my code
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>RM</title>
<meta charset="utf-8"
<meta name= "viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/custom.css" >
</head>
<body>
<div class="container">
<div class="port">
<div id="vertical-title" class="column-1">
<img src="http://www.placehold.it/60x650" >
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive">
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
<div class="row-1">
<img src="http://www.placehold.it/550x325" class="img-responsive" >
<img src="http://www.placehold.it/550x325" class="img-responsive">
</div>
</div>
</div>
</body>
<footer>
</footer>
</html>
</html>
CSS CODE
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
div#vertical-title{
display: block;
float: left;
margin-left:0%;
}
img.img-responsive {
display: inline;
max-width: 75%;
height: auto;
}
.column-1 {
display: inline;
max-width:5%;
}
.row-1 .container{
display : inline;
max-width: 95%;
}
img.row-1{
display:inline;
max-width:100%;
}
#media (min-width: 500px) {
div.test h1{
color:blue;
}
img#vertical-title {
border : 8px;
border-color : red;
width : 10%;
}
img.inline-div {
width : 25%;
}
}
Desired Behavior
I would like for the four images to keep their position relative to each other and shrink as the window gets smaller. In other words, I want the 2x2 grid to reduce in size and not become a 4*1 grid.
Also I would like the left most image to have the height equal to the height of the screen.
Note The images are responsive when they are stacked together.
Questions
What is the best way to achieve this behavior ?
My gut is screaming JavaScript.
I cleaned up your code with more reusable and responsive one.
Here's the JsFiddle demo link.
HTML
<div class="container">
<h3>Welcome</h3>
<div class="port">
<div id="vertical-title" class="col-left">
<img src="http://www.placehold.it/60x650" class="img-responsive" alt="" />
</div>
<div class="col-right">
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
<div class="row">
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
<div class="col-half">
<img src="http://www.placehold.it/550x325" class="img-responsive" alt="" />
</div>
</div>
</div>
</div>
</div>
CSS
h3 {
color: blue;
margin: 5px;
}
.row {
width: 100%;
}
.img-responsive {
width: 100%;
}
.col-left {
max-width: 60px;
float: left;
}
.col-right {
max-width: calc(100% - 60px);
float: left;
}
.col-half {
width: 49%;
margin-left: 4px;
float: left;
}
#media (max-width: 500px) {
.col-half {
width: 100%;
}
}
Hope it helps.
Do you need images to be stacked in iPhone? You can add a media query
#media only screen
and (min-device-width : 568px) { img.img-responsive {
max-width: 49%;
}}
So in iPhone it will stack up and in other it will display the desired effect
Thanks to #iam-decoder for this answer.
All I had to do was change img.img-responsive to
img.img-responsive {
display: inline;
max-width: 40%;
height: auto;
}
Thanks to all the took time to respond to my question. I am curious however how this is done in JS.