I am working on an assignment with the description of:
Create a JavaScript loop using images to get the output as picture below. You can use any images and it is requiring to use maximum 5 images. The images should be loop infinitely. Use your own creativity to design the layout.
But I have no idea how to work on that, I only created a div with three images in it and stuck on the javascript part.
This is my code:
.container {
width: 100%;
height: 27vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
margin: 1px;
}
img {
width: 200px;
height: 200px;
}
<div class="container">
<div class="box">
<img class="car" src="images/car1.jpg">
</div>
<div class="box">
<img class="car" src="images/car2.jpg">
</div>
<div class="box">
<img class="car" src="images/car3.jpg">
</div>
</div>
This is what I've got now:
Here is something to get you started. I changed <div class="container"> to <div id="container"> and added another container within that one: .box-container.
The basic idea is to clone a container with the initial images, and then append (add) them to your original container.
let numberOfRows = 3;
const containerDiv = document.getElementById('container');
// get first element in #container, which is just one child: .box-container
let boxContainerDiv = containerDiv.children[0];
while (numberOfRows) {
numberOfRows--;
// clone the node
let clonedChild = boxContainerDiv.cloneNode(true);
// add the clone node to #container
containerDiv.appendChild(clonedChild);
}
.box-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
margin: 1px;
}
img {
width: 200px;
height: 200px;
border: 1px solid;
}
<div id="container">
<div class="box-container">
<div class="box">
<img class="car" src="https://via.placeholder.com/200.png?text=1">
</div>
<div class="box">
<img class="car" src="https://via.placeholder.com/200.png?text=2">
</div>
<div class="box">
<img class="car" src="https://via.placeholder.com/200.png?text=3">
</div>
</div>
</div>
Related
I am using node.js with the handlebars template engine. Currently, the thumbnail images from the database are displaying at a width and height of 70 which is specified in the code. See below. How can I allow the user to click on the image in handlebars and see a larger rendition of the photo?
The current images are too small to see but I would only like for them to be increased upon clicking them.
I am using handlebars....so a variation of this would help...(without "onClick=" method as I am using node.js and it won't work)
<style>
img.std {
height: 10%;
}
img.big {
height: 40%;
}
</style>
<img id="img" class="std" onClick="(this.className=='std')?this.className='big':this.className='std'" src="/uploads/{{photo_image}}">
You can add an IIFE type function, and use an arrow function so the this keyword refers to the image:
.container{
height: 200px;
border: solid 1px gray;
}
img.std {
height: 60%;
}
img.big {
height: 80%;
}
<div class="container">
<img id="img" class="std" onClick="(() => {
this.className = this.className === 'std' ? 'big' : 'std';
})(); return false;" src="http://placekitten.com/200/200">
</div>
You can do this quite easily with jQuery with:
$(document).on('click','img',function(){
if (this.id == "img") {
this.className=='std' ? this.className = 'big' : this.className='std';
}
});
<img id="img" class="std" src="/uploads/{{photo_image}}">
I would suggest to use unique id for the tag to avoid future ambiguity (potential bugs).
Here's the checkbox hack implemented to your code:
.imgcontainer {
position: relative;
display: inline-flex;
align-items: stretch;
justify-content: stretch;
}
.imgcontainer input[type='radio'] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.imgcontainer input[type='radio'] + img.std {
height: auto;
width: 100px;
}
.imgcontainer input[type='radio']:checked + img.std {
width: 200px;
}
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/any">
</div>
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/arch">
</div>
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/nature">
</div>
I am trying to create a photo gallery app and came across some obstacles. I want to have each image take equal portion of the div, for example if there are two images, each image takes up 50% of the div, and if there are three images, each images takes up 33.33% of the div, etc. Further, is there a way to format those images to be in square dimensions through css?
Also, I have the photos-gallery div that contains h2 and photos-gallery-content div. Currently, I am hardcoding the height for the photos-gallery-content div to fit inside the parent div, but is there a way to make that div take the remainder of the height of its parent div?
Eventually I want the pictures to render dynamically using React so any recommendations/advice on that would help a lot too.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
height: 200px;
overflow: hidden;
float: left;
display: flex;
margin: 0;
padding: 0;
}
.photos-gallery-layout li {
height: auto;
float: left;
list-style: none;
display: flex;
}
.photo {
display: inline-flex;
white-space: nowrap;
}
.photo img {
max-width: 100%;
max-height: auto;
display: inline-block;
vertical-align: middle;
}
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
</div>
<div>
I used your HTML and wrote a little CSS to demonstrate how to:
Have any amount of items fit at equal widths in one row using flexbox (display: flex on the parent and flex: 1 on the children)
Have <img> elements crop to the shape of the tallest element (in this case, a square) using object-fit: cover (note compatibility on CanIUse)
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
I am trying to get 2 images that are side by side centered on the page and I am completely lost. I've included align="center" in div and it does nothing and I have tried positioning absolute and it kicks that image to center but other is still margined left. I have included my code below for you to see. I'm sure it's fairly easy and my brain is just stuck clocking today. Any help would be much appreciated. Thanks
<div>
<div class="item">
<contentful-image url="#Model.EventImages[0].File.Url" #*width="300" height="300" *# style="float:left; width: 30%; margin-bottom: 0.5em; position: absolute " />
</div>
<div class="item">
<contentful-image url="#Model.EventImages[1].File.Url" #*width="300" height="300"*# style="float:left; width: 30%; margin-bottom: 0.5em";/>
</div>
</div>
You can try these two examples and see if any solves your problem, though presented with the img element.
If you want the body element to be the parent, you can do something like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
body {
display: flex;
justify-content: center;
align-items: center;
}
/* Add this if you want to place them horizontally. */
/*
div {
display: flex;
}
*/
img {
display: block;
}
<div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img2">
</div>
</div>
And if you want the div to be the parent, like this:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh}
.parent {
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */ /* Add this if you want to place them vertically. */
width: 100vw;
height: 100vh;
}
img {
display: block;
}
<div class="parent">
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img1">
</div>
<div class="item">
<img src="http://via.placeholder.com/300x300" alt="img2">
</div>
</div>
Where the .parent takes full width & height of the viewport.
Use CSS class instead of inline CSS your CSS goes as follows:
CSS for image tag:
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
CSS for the div you have to contain the image:
.image-container{
display: inline-block;
}
Now the CSS to centre your image:
#image{
text-align:center;
}
Finally how to use it in html:
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="your_image_url"/>
</div>
</div>
<html>
<head>
<style>
.myImg {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
.image-container{
display: inline-block
}
#images{
text-align:center;
}
</style>
</head>
<body>
<div id="images">
<div class="image-container">
<img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/>
</div>
<div class="image-container">
<img class="myImg" alt="No image" src="http://shlesha.co.in/images/demo/logo/logo-blue-white-trans-249x80.png"/>
</div>
</div>
</body>
</html>
Here "display: inline-block" helps you to display two or more images to be displayed side by side and margin as auto helps you to automatically adjust your margin irrespective of the screen size
I hope this solves your need for any further query comment below.
try using flex-box, it's pretty straight forward. Set display:flex for the parent, then you can align the children with align-items: center.
html like:
<div class="parent">
<div class="item">
<contentful-image url="" />
</div>
<div class="item">
<contentful-image url="" />
</div>
</div>
and css like:
.parent {
display: flex;
align-items: center;
}
Try creating parent and child div like this:
.parent-container {
display: flex;
-webkit-flex-wrap: nowrap;
}
.child-container{
padding: 10px;
}
<div class="parent-container">
<div class="child-container">
<img alt="First Image" src=""/>
</div>
<div class="child-container">
<img alt="Second Image" src="" />
</div>
</div>
I have 4 divs with the class .piece-slide that horizontally scroll across the page within the the div #work, which is a flex element. Within the third .piece-slide div the 3 nested elements are absolutely positioned, this renders the width of the third .piece-slide div to 0, so now I want to programmatically set the width of the third .piece-slide div so that it covers the 3 nested elements.
For some reason I am unable to set this width through CSS. I have also tried through jQuery. It would be much appreciated if some pointed me in the right direction as how to rectify this. Here is a jsfiddle as well as the embedded code below.
$("#third-div").outerWidth("100vw");
#wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
}
#work {
height: 100%;
overflow-x: scroll;
display: flex;
background-color: red;
}
.piece-slide {
display: flex;
align-items: center;
position: relative;
padding-right: 5em;
box-sizing: border-box;
border-right: 1px solid black;
}
.piece {
width: 25vw;
margin: 10px;
}
.piece img {
max-width: 100%;
}
#third-div {
/* D0ES NOT WORK */
width: 100vw;
background-color: green;
}
#third-div a {
position: absolute;
}
#third-div a:nth-child(1) {
top: 0;
left: 0;
}
#third-div a:nth-child(2) {
top: 25vw;
left: 25vw;
}
#third-div a:nth-child(3) {
left: 60vw;
}
<div id="wrapper">
<div class="content">
<div id="work">
<div class="piece-slide">
<a class="piece">
<img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
</a>
</div>
<div class="piece-slide">
<a class="piece">
<img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
</a>
<a class="piece">
<img src="https://dummyimage.com/hd1080https://dummyimage.com/hd1080">
</a>
</div>
<!-- THIRD DIV WHERE WIDTH SHOULD BE SET -->
<div id="third-div" class="piece-slide">
<a class="piece" num="1">
Nested Element 1<img src="http://i.stack.imgur.com/yZlqh.png">
</a>
<a class="piece" num="2">
Nested Element 2<img src="http://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder.gif">
</a>
<a class="piece" num="3">
Nested Element 3<img src="http://suplugins.com/podium/images/placeholder-02.jpg">
</a>
</div>
<div class="piece-slide">
<a class="piece">
<img src="https://athlonecommunityradio.ie/wp-content/uploads/2017/04/placeholder.png">
</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Try to remove
flex-direction: column;
from #wrapper.
Or change it to
flex-direction: row;
I am looking for some responsive equal height div by just using CSS. I don't want to specify the height. Looking somewhat similar to the image below but both the divs should adjust based on the other div height.
If the left side div is long then the right side div should adjust to the left side div and vice versa.
Also the right side div has 2 small divs which should also be of same height.
Can this be achieved using only CSS? Or should I make use of JS/jQuery?
Example here on the jsFiddle
img {
width: 100%;
border: 1px solid green;
}
.row {
display: table;
}
.column {
display: table-cell;
vertical-align: top;
}
.w100 {
width: 100%;
}
.w75 {
width: 75%;
}
.w50 {
width: 50%;
}
.w25 {
width: 25%;
}
<body>
<div class="row w100">
<div class="column w75">
<img src="http://placehold.it/500x500" alt="">
</div>
<div class="column w25">
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
<div class="col-row">
<img src="http://placehold.it/250x250" alt="">
</div>
</div>
</div>
You could use flex-box, for example:
.row {
display: flex;
flex-direction:row;
}
.column {
display: flex;
flex-direction:column;
}
And getting rid of the widths the browser does a great job aligning the items:
http://jsfiddle.net/2vLpx9k3/3/
You may need some prefixes for cross-browser support.
I've made something that might possibly be something that you are looking for.
http://jsfiddle.net/2vLpx9k3/4/
It adjusts the widht and height of the inner elements based on the outer element.
HTML:
<div class="outer">
<div class="left">
<div class="right"></div>
<div class="right bottom"></div>
</div>
</div>
CSS:
.outer {
height: 100vh;
}
.left {
background-color: red;
width: 100%;
height: 100%;
margin-right: 50%;
}
.right {
background-color: green;
height: 50%;
margin-left: 50%;
}
.right.bottom {
background-color: black;
}