I have a list of images, those image elements have a attribute like index, which I want to use to sort the element of the images in ascending order. with the help of CSS.
Because that index attribute value will change dynamically, more image will also be added by Ajax. So when it will update, that time it will be arranged in that order without doing anything.
.img_container {
width: 100%;
border: 2px black solid;
}
.img_container img {
margin-bottom: 5px;
margin-right: 5px;
}
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1" index="1">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=10" index="10">
<img src="https://dummyimage.com/110x150/000000/ffffff&text=11" index="11">
<img src="https://dummyimage.com/140x150/000000/ffffff&text=14" index="14">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=2" index="2">
<img src="https://dummyimage.com/120x150/000000/ffffff&text=12" index="12">
<img src="https://dummyimage.com/130x150/000000/ffffff&text=13" index="13">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=3" index="3">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=4" index="4">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=15" index="15">
<img src="https://dummyimage.com/500x150/000000/ffffff&text=5" index="5">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=6" index="6">
<img src="https://dummyimage.com/170x150/000000/ffffff&text=17" index="17">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=7" index="7">
<img src="https://dummyimage.com/160x150/000000/ffffff&text=16" index="16">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=8" index="8">
<img src="https://dummyimage.com/180x150/000000/ffffff&text=18" index="18">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=9" index="9">
</div>
Let me know if there is any easy way to do this in CSS.
There is not a good CSS-only solution yet without modifying the HTML or adding inline styles. In the future, it may be possible to achieve this using the attr() function in CSS, but currently this doesn't have wide support for being able to use it outside of the content property.
If the more advanced usage is adopted, a future solution could look like this. Note, this will not work in most current browsers. And you should also use the data- prefix for custom attributes.
.img_container {
border: 2px black solid;
display: flex;
flex-wrap: wrap;
}
.img_container img {
margin: 5px;
order: attr(data-index); /* will not work yet in most browsers */
}
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1" data-index="1">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=10" data-index="10">
<img src="https://dummyimage.com/110x150/000000/ffffff&text=11" data-index="11">
<img src="https://dummyimage.com/140x150/000000/ffffff&text=14" data-index="14">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=2" data-index="2">
<img src="https://dummyimage.com/120x150/000000/ffffff&text=12" data-index="12">
<img src="https://dummyimage.com/130x150/000000/ffffff&text=13" data-index="13">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=3" data-index="3">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=4" data-index="4">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=15" data-index="15">
<img src="https://dummyimage.com/500x150/000000/ffffff&text=5" data-index="5">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=6" data-index="6">
<img src="https://dummyimage.com/170x150/000000/ffffff&text=17" data-index="17">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=7" data-index="7">
<img src="https://dummyimage.com/160x150/000000/ffffff&text=16" data-index="16">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=8" data-index="8">
<img src="https://dummyimage.com/180x150/000000/ffffff&text=18" data-index="18">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=9" data-index="9">
</div>
Related
How can I adjust the code so that there is no space between each image and also how to keep them from overlapping. I tried to add another image but one ended up overlapping it. I have tried looking it up but no matter what I try it just doesn't work.
.column {
float: left;
width: 33.33%;
padding: 5px;
}
.row::after {
content: "";
display: table;
clear: both;
}
.text {
text-align: center;
}
<!--IMAGES-->
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg" height="300px" width="300px" alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg" height="300px" width="300px" alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg" height="300px" width="300px" alt="" />
</div>
</div>
You could use flexbox
<div class="row_flex">
<div class="column_flex">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg"
height="300px" width="300px" alt="" />
</div>
<div class="column_flex">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg"
height="300px" width="300px" alt="" />
</div>
<div class="column_flex">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg"
height="300px" width="300px" alt="" />
</div>
And the CSS
.row_flex {
display: flex;
justify-content: center;
}
I have changed your class names by adding the word "flex" as it looks like you're using something like Zurb foundation or bootstrap, where you wouldn't want to change the properties of "row" and "column" as the rest of your site will likely depend on them.
If you want images to be a little repsonsive I would suggest the following:
.column {
padding: 5px;
/* flex: 1;
flex-basis: 33%; */
max-width: calc(33vw - 10px);
display: flex;
}
.column img {
max-width: inherit;
}
/* .row::after {
content:"";
// display: table;
clear: both;
} */
.text {
text-align: center;
}
.row {
display: flex;
justify-content: center;
}
<div id="app"></div>
<div class="row">
<div class="column">
<img src="https://i.pinimg.com/originals/a0/4f/0a/a04f0abbac3ebf36f1f302937a45071f.jpg"
alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/originals/5f/09/7c/5f097ceb782476bae9dc15ec1dd364b1.jpg"
alt="" />
</div>
<div class="column">
<img src="https://i.pinimg.com/736x/68/c7/9f/68c79f2f9203f086d70e75985bf258f2--funny-pets-funny-animals.jpg"
alt="" />
</div>
Depending on whether or not you want this to run for other people you could make your own image on paint where you combine all 3 of the other images and then create an indirect path by guiding it to your images file. There are better methods if you want to be able to give the code to other people or have it work for other people on a browser involving more difficult code but if this is just going to be displayed on your computer and will not go to the public, I think that this would be much easier than coding the solution. That is, unless you are using bootstrap or another adapter.
Can someone show me how to put text under every individual image and also images must be in same line which is working? I understand that default display for "a" tag is block and for "img" tag is display inline.
This is my code:
HTML
<div class="other-content">
<div class="search">
<h1>We Offer best experience in the world</h1>
<img src="../Images/beach.jpg" alt="beach" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/desert.jpg" alt="desert" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/evergreen.jpg" alt="maoutin" width="200px" height="150px">
<p>sadasdasd</p>
<img src="../Images/snow-pathway.jpg" alt="snow-pathway" width="200px" height="150px">
</div>
</div>
CSS
.other-content .search {
background: #ffffff;
height: 300px;
text-align: center;
}
.other-content .search p{
display: inline;
}
Just put the picture with the text in separate divs and make the divs width smaller until the text is below the picture. And with these divs, assign display:inline-block;
I'm trying to learn a bit more CSS/HTML to customize xaringan slides and could use some help.
I would like to place a number of GIF's in an image grid like the one shown here into a xaringan slide.
I know that normally one can display two images side-by-side by either using .pull-left[] & .pull-right[] or by defining sections with custom CSS like this:
.left-code {
color: #777;
width: 38%;
height: 92%;
float: left;
}
.right-plot {
width: 60%;
float: right;
padding-left: 1%;
}
Then one would put the images in a xaringan slide with R code like this:
.pull-left[
<img src=figure1.jpg>
]
.pull-right[
<img src=figure2.jpg>
]
For an image grid the custom CSS would be:
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create two equal columns that sits next to each other */
.column {
flex: 50%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
However, it also includes HTML code that specifies all of the images so I'm not quite sure how to integrate the two in a xaringan slide.
<div class="row">
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
You can do this using the extension theme here.
This theme is included the later version of xaringan so you can specify in the YAML by css: "ninjutsu". The layout should look like below:
---
title: "Split to grid in `xaringan`"
output:
xaringan::moon_reader:
css: ["ninjutsu"]
---
class: split-four
.column[
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
]
.column[
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
]
.column[
other images
]
.column[
other images
]
How to remove this space among the pictures?
I'm to learning to create a gallery, but I can't remove the space among the pictures, what should I do?
The code:
body {
background: #E6E6E6;
}
<body class="imagens">
<img src="imagens/imagem1.png">
<img src="imagens/imagem2.png">
<img src="imagens/imagem3.png">
<img src="imagens/imagem4.png">
<img src="imagens/imagem5.png">
</body>
The space between the images is due to the whitespace between the <img> elements in your source code. By default, <img> elements have their CSS display property set to inline, meaning they act as emojis would in regular text (if you leave space between them, they will have space between them; if you don't leave space between them, they won't have any space between them).
So the HTML-based approach to solving this issue is to remove all whitespace characters between the elements:
<body class="imagens">
<img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150">
</body>
A CSS-based approach might be to apply something along these lines:
.imagens {
overflow: hidden;
}
.imagens img {
float: left;
}
You can use float.
.clearfix::after, .container::after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.images img {
float: left;
}
<div class="images clearfix">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
<img src="http://via.placeholder.com/150x150">
</div>
You can use float: left and make them display: block. No need for anything else...
img {
display: block;
float: left;
}
<div>
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
<img src="http://placehold.it/120x120">
</div>
You can use a small hack using HTML comments as spacers between the elements:
<img src="imagens/imagem1.png"><!--
--><img src="imagens/imagem2.png"><!--
--><img src="imagens/imagem3.png"><!--
--><img src="imagens/imagem4.png"><!--
--><img src="imagens/imagem5.png">
The simplest fix will be to set the below CSS property
Although I recommend not using this fix in the body element
.container{
background: #E6E6E6;
font-size:0px;
}
Cause of the problem: Source: here
because white space is significant for inline elements. You can always
float your images if you want to have them line up.
Since there is an enter between the images, we get this problem!
.container {
background: #E6E6E6;
font-size: 0px;
}
<body class="imagens">
<div class="container">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
</div>
</body>
I have 6 images that I want to have at the bottom and one large image above them. I am trying to make an image gallery.
I have set margin-top to the 6 images. I have added the other image which I want larger for the preview image but it seems to be making the other images move down and some out of the div. I know this may have something to do with the images being floated? I am a bit confused on where to put the float I initially just floated the images but it didn't seem to need it I guess because they're inline.I may possibly need to put them in divs? Overall I'm just confused :/
Here is an image to make it clear what I want to achieve:
Here is my code:
HTML
<div class="mainInfo">
<div class="gallery">
<!-----this is the first image I want to be the large preview--->
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery1.png" alt="">
<img src="../assets/images/gallery/gallery2.png" alt="">
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery4.png" alt="">
<img src="../assets/images/gallery/gallery5.png" alt="">
<img src="../assets/images/gallery/gallery6.png" alt="">
</div>
<!--END OF MAIN INFO-->
</div>
CSS
.mainInfo {
height: 650px;
background-color:#FCFCFC;
color:#001D5D;
padding: 100px 0 0 30px;
/* .............Gallery section........... */
.gallery {
float: left;
}
.gallery img {
width:140px;
height:auto;
margin:365px 0 0 15px;
}
.displayImage img {
width:400px;
height: auto;
margin: 0 auto;
padding:10px 0 0 30px;
}
/* .............Gallery section END........... */
Organize
You need to organize your HTML for layout.
Try inserting your big image in a <div class="displayImage"></div> tag. Then you can control it easier with your CSS.
Use CSS to define constraints.
Let's try adding appropriate widths to your images and fixing the margins.
Updated CSS
.gallery {
float: left;
}
.gallery img {
width:80px;
height: 80px;
margin: 10px;
}
.displayImage {
text-align: center;
padding-bottom: 20px;
}
.displayImage img {
width: 400px;
height: auto;
margin: 0 auto;
}
Updated HTML
<div class="gallery">
<div class="displayImage">
<img src="http://images.summitpost.org/original/371959.JPG" alt="" class="displayImage">
</div>
<a href="#">
<img src="http://www.slowtrav.com/blog/chiocciola/IMG_1368.jpg" alt="">
</a>
<a href="#">
<img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
</a>
<a href="#">
<img src="http://images.summitpost.org/original/134465.jpg" alt="">
</a>
<a href="#">
<img src="http://www.domnik.net/topoi/commons/AT/alps/05n_mountain.jpg" alt="">
</a>
<a href="#">
<img src="http://people.hsc.edu/faculty-staff/mhight/Fulbright_Images/ItalySept2007/Cassino01.jpg" alt="">
</a>
<a href="#">
<img src="http://www.nyroute28.com/pics/Thurmond_mountain_fall.jpg" alt="">
</a>
</div>
Just remember, HTML is your friend. Organize it to best parallel with your CSS. This is a small case that could still survive without less structured HTML, but it's a great practice to get started.
Here's a example of it all: http://codepen.io/anon/pen/LjgdF
Do something like this,then you can position first images as per your wish.
Something you will get in Fiddle
<div class="mainInfo">
<div class="gallery">
<div class="bigpic">
<img src="../assets/images/gallery/gallery3.png" alt="">
</div>
<img src="../assets/images/gallery/gallery1.png" alt="">
<img src="../assets/images/gallery/gallery2.png" alt="">
<img src="../assets/images/gallery/gallery3.png" alt="">
<img src="../assets/images/gallery/gallery4.png" alt="">
<img src="../assets/images/gallery/gallery5.png" alt="">
<img src="../assets/images/gallery/gallery6.png" alt="">
</div>
</div>