Show/Hide Specific Items/Elements based on selected Category

Show/Hide Specific Items/Elements based on selected Category - javascript

I have couple images inside a div. Each image belongs to a category. I would like to show images of only a single category when that category/group is selected and hide all other images.
So I have several images at the beginning in the category all and if choose blue I only want the images in blue category.
I thought it was necessary to create an object array containing all the images and give them a category. Then with an if/else play on the category number to display. In the end I can't find the desired result. Can you help me, please?
Here is the JSFiddle.
const img1 = `<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue">`;
const img2 = `<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">`;
const img3 = `<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">`
const img4 = `<img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">`;
const img5 = `<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">`;
const color = [
{img1, category: [0, 1]},
{img2, category: [0, 2]},
{img3, category: [0, 2]},
{img4, category: [0, 2]},
{img5, category: [0, 1]}
]
//category 1 = all, 2 = bleu and 3 = red.
function showImg(number) {
}
.link__color {
margin: 10px;
font-size: 24px;
}
.contain {
display: flex;
flex-wrap: wrap;
}
.contain__img {
margin: 15px;
}
.img {
width: 200px;
height: 150px;
}
<div class="link">
<a onclik="showImg()" class="link__color" href="#">All</a>
<a onclik="showImg()" class="link__color" href="#">Blue</a>
<a onclik="showImg()" class="link__color" href="#">Red</a>
</div>
<div class="contain">
<div class="contain__img">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue">
</div>
<div class="contain__img">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">
</div>
<div class="contain__img">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">
</div>
<div class="contain__img">
<img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">
</div>
<div class="contain__img">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">
</div>
</div>

This works without creating any category. Just put the image type in alt attribute of the image.
function showImg(category) {
var elements = document.querySelectorAll('.img');
elements.forEach(function(el){
if(category=='all')el.parentNode.style.display='inline';
else if(el.getAttribute('alt')==category)el.parentNode.style.display='inline';
else el.parentNode.style.display='none';
});
}
.link__color {
margin: 10px;
font-size: 24px;
}
.contain {
display: flex;
flex-wrap: wrap;
}
.contain__img {
margin: 15px;
}
.img {
width: 200px;
height: 150px;
}
<div class="link">
<a onclick="showImg('all')" class="link__color" href="#">All</a>
<a onclick="showImg('blue')" class="link__color" href="#">Blue</a>
<a onclick="showImg('red')" class="link__color" href="#">Red</a>
</div>
<div class="contain">
<div class="contain__img">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue" >
</div>
<div class="contain__img">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">
</div>
<div class="contain__img">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">
</div>
<div class="contain__img">
<img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">
</div>
<div class="contain__img">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">
</div>
</div>

I am not sure why you want to create a constant variable and assign it again. Make it Simple. Apply common class for the blue and red images. Try to target the div based on the classes you applied. Look at the below HTML and Jquery. I have applied the blue and red classes for the respective images and target the same.
HTML
<div class="link" id="mainLink">
<a id="all" class="link__color" href="#">All</a>
<a id="blue" class="link__color" href="#">Blue</a>
<a id="red" class="link__color" href="#">Red</a>
</div>
<div class="contain">
<div class="contain__img blue">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue">
</div>
<div class="contain__img red">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">
</div>
<div class="contain__img red">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">
</div>
<div class="contain__img red">
<img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">
</div>
<div class="contain__img blue">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">
</div>
</div>
JQUERY
$('#mainLink a').on('click', function(){
var cls = $(this).prop('id');
if(cls == 'all') {
$(".contain__img").show();
} else {
$(".contain__img").hide();
$("."+cls).show();
}
});
SNIPPET
$('#mainLink a').on('click', function(){
var cls = $(this).prop('id');
if(cls == 'all') {
$(".contain__img").show();
} else {
$(".contain__img").hide();
$("."+cls).show();
}
});
.link__color {
margin: 10px;
font-size: 24px;
}
.contain {
display: flex;
flex-wrap: wrap;
}
.contain__img {
margin: 15px;
}
.img {
width: 200px;
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link" id="mainLink">
<a id="all" class="link__color" href="#">All</a>
<a id="blue" class="link__color" href="#">Blue</a>
<a id="red" class="link__color" href="#">Red</a>
</div>
<div class="contain">
<div class="contain__img blue">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTn1if-yc-9w3onZhlF9j7eOJEbbH7NY9QoQ0wyuAy33WoH-ml" alt="blue">
</div>
<div class="contain__img red">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFjKqjM52gBUsAisUgVSuGrPMi2kgcZ8lv7DfsiZuYx8KCjCSf" alt="red">
</div>
<div class="contain__img red">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuotUTsRgW-MMvhKc1ZwyDQoamkTut4u-V0_h0bCbxAWMl36A9Xg" alt="red">
</div>
<div class="contain__img red">
<img class="img" src="https://c1.staticflickr.com/4/3823/11294769684_5d4b0d1a23_n.jpg" alt="red">
</div>
<div class="contain__img blue">
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnccHtrN6iwkll-kIreBtv9jTM831XY2-wRvtevpb8ApCtdC27" alt="blue">
</div>
</div>

Related

Change different pictures on click

I have a block where the main picture changes when clicked
$('.img-to-select__item').click(function () {
$('.img-to-select__item').removeClass('selected');
$(this).addClass('selected');
$('.main-image > img').attr('src', $(this).children('img').attr('src'));
$('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});
.custom-carousel {
text-align: center;
}
.main-image > img {
width:50px;
}
.img-to-select > .img-to-select__item > img {
heigh:30px;
width: 30px;
}
.img-to-select {
overflow: hidden;
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item {
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item.selected {
border: 2px solid red;
}
<div class="custom-carousel-section">
<div class="custom-container">
<div class="custom-carousel">
<div class="custom-carousel__title">
<span>Title
</span>
</div>
<div class="main-image">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Now everything works so when you click on img-to-select it becomes main-image. But can it be done a little differently?
Let's say there are two fields main_image and preview_image, they will be exactly the same, the only size is different
Suppose we have one main-test.jpg picture, it is in the main-image class, and exactly the same picture, only with a smaller size preview-test.jpg in class img-to-select
And there are several such pictures
main-test-1.jpg and preview-test-1.jpg
main-test-2.jpg and preview-test-2.jpg
main-test-3.jpg and preview-test-3.jpg
main-test-4.jpg and preview-test-4.jpg
The code will now look like this
<div class="main-image">
<img src="main-test-1.jpg" alt="" data-title="image-a">
//The rest of the pictures are there but will be hidden until we select the desired one
<img src="main-test-2.jpg" alt="" data-title="image-a">
<img src="main-test-3.jpg" alt="" data-title="image-a">
<img src="main-test-4.jpg" alt="" data-title="image-a">
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="preview-test-1.jpg" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="preview-test-2.jpg" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="preview-test-3.jpg" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="preview-test-4.jpg" alt="" data-title="image-a">
</div>
And now when we click on preview-test-1.jpg we display main-test-1.jpg, when we click on preview-test-2.jpg we display main-test-2.jpg and so on
Can this be done?

Similar to how you're handling the data-title, you can add another data attribute to the img tag that defines its "main" image, while the src remains the "preview" image.
<img src="https://www.previewimage.com/" data-main-src="https://placekitten.com/201/301">
Then in JS, instead of pulling the src of the img, read the data-main-src value and set that as the main src:
$('.main-image > img').attr('src', $(this).children('img').data('main-src'));
$('.img-to-select__item').click(function () {
$('.img-to-select__item').removeClass('selected');
$(this).addClass('selected');
$('.main-image > img').attr('src', $(this).children('img').data('main-src'));
$('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});
// trigger this on page load so the "main" image is displayed instead of the preview.
$('.img-to-select__item.selected').click();
.custom-carousel {
text-align: center;
}
.main-image > img {
width:50px;
}
.img-to-select > .img-to-select__item > img {
heigh:30px;
width: 30px;
}
.img-to-select {
overflow: hidden;
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item {
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item.selected {
border: 2px solid red;
}
<div class="custom-carousel-section">
<div class="custom-container">
<div class="custom-carousel">
<div class="custom-carousel__title">
<span>Title
</span>
</div>
<div class="main-image">
<img src="" alt="" data-title="">
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a" data-main-src="https://placekitten.com/200/300">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b" data-main-src="https://placekitten.com/201/301">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c" data-main-src="https://placekitten.com/202/302">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d" data-main-src="https://placekitten.com/203/303">
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Multiple Animations Javascript HTML

I am trying to run 3 different animations side by side at the same time. Currently only the first animation is operating and the other 2 are stationary.
Can anyone advise how to run all 3 at once?
Javascript
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
HTML
<script src="animate.js"></script>
<section>
<div class="row">
<div class="col-md-4" id="animation">
<img src="animations/walk/Armature_walk_00.png">
<img src="animations/walk/Armature_walk_01.png">
<img src="animations/walk/Armature_walk_02.png">
<img src="animations/walk/Armature_walk_03.png">
<img src="animations/walk/Armature_walk_04.png">
<img src="animations/walk/Armature_walk_05.png">
<img src="animations/walk/Armature_walk_06.png">
<img src="animations/walk/Armature_walk_07.png">
<img src="animations/walk/Armature_walk_08.png">
<img src="animations/walk/Armature_walk_09.png">
<img src="animations/walk/Armature_walk_10.png">
<img src="animations/walk/Armature_walk_11.png">
<img src="animations/walk/Armature_walk_12.png">
<img src="animations/walk/Armature_walk_13.png">
<img src="animations/walk/Armature_walk_14.png">
<img src="animations/walk/Armature_walk_15.png">
</div>
<div class="col-md-4" id="animation">
<img src="animations/jump/Armature_jump_0.png">
<img src="animations/jump/Armature_jump_1.png">
<img src="animations/jump/Armature_jump_2.png">
<img src="animations/jump/Armature_jump_3.png">
<img src="animations/jump/Armature_jump_4.png">
<img src="animations/jump/Armature_jump_5.png">
<img src="animations/jump/Armature_jump_6.png">
<img src="animations/jump/Armature_jump_7.png">
<img src="animations/jump/Armature_jump_8.png">
</div>
<div class="col-md-4" id="animation">
<img src="animations/melt/Melt_1.png">
<img src="animations/melt/Melt_2.png">
<img src="animations/melt/Melt_3.png">
<img src="animations/melt/Melt_4.png">
<img src="animations/melt/Melt_5.png">
<img src="animations/melt/Melt_6.png">
<img src="animations/melt/Melt_7.png">
<img src="animations/melt/Melt_8.png">
<img src="animations/melt/Melt_9.png">
<img src="animations/melt/Melt_10.png">
<img src="animations/melt/Melt_11.png">
<img src="animations/melt/Melt_12.png">
<img src="animations/melt/Melt_13.png">
<img src="animations/melt/Melt_14.png">
<img src="animations/melt/Melt_15.png">
</div>
</div>
</section>
CSS
#animation img {
display: none;
width: 50%;
height: auto;
}
#animation img:first-child {
display: block;
width: 50%;
height: auto;
}

You're not supposed to have multiple elements with the same id in a page. You should either give them different ids or give them the same class and use that in your logic. Like this:
<script src="animate.js"></script>
<section>
<div class="row">
<div class="col-md-4 animation">
<img src="animations/walk/Armature_walk_00.png">
<img src="animations/walk/Armature_walk_01.png">
<img src="animations/walk/Armature_walk_02.png">
<img src="animations/walk/Armature_walk_03.png">
<img src="animations/walk/Armature_walk_04.png">
<img src="animations/walk/Armature_walk_05.png">
<img src="animations/walk/Armature_walk_06.png">
<img src="animations/walk/Armature_walk_07.png">
<img src="animations/walk/Armature_walk_08.png">
<img src="animations/walk/Armature_walk_09.png">
<img src="animations/walk/Armature_walk_10.png">
<img src="animations/walk/Armature_walk_11.png">
<img src="animations/walk/Armature_walk_12.png">
<img src="animations/walk/Armature_walk_13.png">
<img src="animations/walk/Armature_walk_14.png">
<img src="animations/walk/Armature_walk_15.png">
</div>
<div class="col-md-4 animation">
<img src="animations/jump/Armature_jump_0.png">
<img src="animations/jump/Armature_jump_1.png">
<img src="animations/jump/Armature_jump_2.png">
<img src="animations/jump/Armature_jump_3.png">
<img src="animations/jump/Armature_jump_4.png">
<img src="animations/jump/Armature_jump_5.png">
<img src="animations/jump/Armature_jump_6.png">
<img src="animations/jump/Armature_jump_7.png">
<img src="animations/jump/Armature_jump_8.png">
</div>
<div class="col-md-4 animation" >
<img src="animations/melt/Melt_1.png">
<img src="animations/melt/Melt_2.png">
<img src="animations/melt/Melt_3.png">
<img src="animations/melt/Melt_4.png">
<img src="animations/melt/Melt_5.png">
<img src="animations/melt/Melt_6.png">
<img src="animations/melt/Melt_7.png">
<img src="animations/melt/Melt_8.png">
<img src="animations/melt/Melt_9.png">
<img src="animations/melt/Melt_10.png">
<img src="animations/melt/Melt_11.png">
<img src="animations/melt/Melt_12.png">
<img src="animations/melt/Melt_13.png">
<img src="animations/melt/Melt_14.png">
<img src="animations/melt/Melt_15.png">
</div>
</div>
</section>
CSS
.animation img {
display: none;
width: 50%;
height: auto;
}
.animation img:first-child {
display: block;
width: 50%;
height: auto;
}
And in your js, do:
onload = function startAnimation() {
var framesContainers = document.getElementsByClassName("animation");
for (const container of framesContainers) {
var frames = container.children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
}

How to prevent jQuery apendTo from duplicating content

I'm trying to move a div(.titleContainer) inside another div(.imageContainer a) by using jQuery prependTo function, but for some reason the the content that was previously appended is also added to the element that's receiving an appended element. Thanks!
$(document).ready(function () {
$('.titleContainer').each(function(){
$(this).prependTo('.imageContainer a');
});
});
.imageContainer{
background: rgb(144, 144, 221);
}
.card{
margin-right: 20px;
flex: 0 0 30%;
}
h3{
color: black
}
body{
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

You need to target .imageContainer within the same .card. Using '.imageContainer a' will target all a
$(document).ready(function() {
$('.titleContainer').each(function() {
$(this).prependTo($(this).closest('.card').find('.imageContainer a'));
});
});
.imageContainer {
background: rgb(144, 144, 221);
}
.card {
margin-right: 20px;
flex: 0 0 30%;
}
h3 {
color: black
}
body {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card">
<div class="titleContainer">
<h3>title1</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title2</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
<div class="card">
<div class="titleContainer">
<h3>title3</h3>
</div>
<div class="imageContainer">
<a href="">
<img src="" alt="">
</a>
</div>
</div>
</body>

$(function(){
$('.titleContainer').each(function(){
$(this).prependTo($(this).next().find('a'));
});
});
Codepen
Note: $(function(){}) === $(document).ready(function(){});

images in grid change in specified time interval using jquery or other javascript

I am trying to develop an image grid that changes some images in random at specified intervals using jquery or any other javascript means. Please be noted that I do not need all the images to change at the same time. One group of an image can change in different time interval compared to others.
The images are positioned absolute to the parent div so that it one can fadeIn while the other fades out until it reaches the last stage.
I am completely stuck without any idea on how to achieve this. Could anyone help me with this? Following is my code
(function(){
let first = $('.column1 img:gt(0)');
first.hide();
let images = $('.column1').find('img');
setInterval(function(){
let current = $('.column1 img:visible');
let next = current.next().length ? current.next():$('.column1 img:eq(0)');
current.fadeOut(300);
next.fadeIn(300);
}, 3000);
});
#main__slider{
width:40rem;
height:25rem;
margin: 0 auto;
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1{
border:1px solid;
position:relative;
}
img{
width:100%;
height:100%;
object-fit:cover;
position:absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>

You need to create a kind of loop like below and also consider random() to have different timing for the fade function:
$('.column1 img:eq(0)').each(function() {
$(this).hide();
});
setInterval(function() {
$('.column1 img:visible').each(function() {
let next = $(this).next().length ? $(this).next() : $(this).parent().find('img:eq(0)');
var t = Math.random()*2000;
$(this).delay(t).fadeOut(500);
next.delay(t).fadeIn(500);
});
}, 3000);
#main__slider {
width: 40rem;
height: 25rem;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr)
}
.column1 {
border: 1px solid;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main__slider">
<div class="column1">
<img src="https://www.arup.com/-/media/arup/images/perspectives/themes/cities/cities-alive/cities-alive-header.jpg?h=1125&la=en&w=2000&hash=415B3F648DFB5F1822DD43328B988A2C78318E7F" alt="">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi" alt="">
<img src="https://d17fnq9dkz9hgj.cloudfront.net/uploads/2018/03/Pomeranian_01.jpeg" alt="">
</div>
<div class="column1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--vHt6tbFa--/c_scale,f_auto,fl_progressive,q_80,w_800/xjmx1csashjww8j8jwyh.jpg" alt="">
<img src="https://www.drdavidludwig.com/wp-content/uploads/2017/01/1-RIS_6IbCLYv1X3bzYW1lmA.jpeg" alt="">
</div>
<div class="column1">
<img src="https://www.railengineer.uk/wp-content/uploads/2017/10/AT300_HULL-TRAINS_with-logo.jpg" alt="">
<img src="https://www.virginexperiencedays.co.uk/content/img/product/large/steam-train-trip-17104839.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.healthline.com/hlcmsresource/images/topic_centers/977-When_do_girls_stop_growing-732x549-thumbnail.jpg" alt="">
<img src="https://images.askmen.com/1080x540/2018/09/06-125712-how_to_talk_to_girls_on_tinder.jpg" alt="">
</div>
<div class="column1">
<img src="https://www.familyeducation.com/sites/default/files/inline-images/baby%20girl%20names%20image.jpg" alt="">
<img src="https://cdn2.momjunction.com/wp-content/uploads/2015/03/Learning-Activities.jpg" alt="">
</div>
<div class="column1">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Team_Korea_Rio_2016_06.jpg/1200px-Team_Korea_Rio_2016_06.jpg" alt="">
<img src="https://expo.advance.net/img/9c4d2bc2c7/width960/30gallery_state_indiv_gym_.jpeg" alt="">
</div>
<div class="column1">
<img src="https://cdn4.sportngin.com/attachments/call_to_action/9127/0843/_7006687_large.jpg" alt="">
<img src="https://cdn.vox-cdn.com/thumbor/4pOVrNf6Ezmge6_VKHgYmAyCNoU=/0x0:3642x2712/1200x800/filters:focal(1275x341:1857x923)/cdn.vox-cdn.com/uploads/chorus_image/image/54106607/usa_today_9864342.0.jpg" alt="">
</div>
<div class="column1">
<img src="https://livability.com/sites/default/files/Great%20Cities%20for%20Filmmakers.jpg" alt="">
<img src="https://media.wired.com/photos/59bafdf204afdc5248726f5c/master/w_2400,c_limit/BMW-TA.jpg" alt="">
</div>
</div>

CSS: Images in different sizes centered inside a list of responsive floating divs

I have a list of product in a responsive page, each row display 4 product, and the size of each product should be constant for all the products in the page, but adjusted to the size of the screen - i.e. 25% of the screen width.
example https://jsfiddle.net/eliaweiss/otLcf1kn/
.prod {
width: 25%;
float: left;
}
img {
width: 100%;
}
<div class="list">
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
</div>
I want to achieve the following:
HTML is responsive - product width is always 25% of the screen
img display as a square
img keep aspect ratio
img not croped
img is centered to the middle of the square
I can achieve it with JS, see https://jsfiddle.net/eliaweiss/fs7jv4o7/2/
$(document).ready(function() {
product_width = $(".prod").width();
$(".prod").each(function(i, o) {
prod = $(o);
prod.width(product_width);
prod.height(product_width);
})
$(".prod img").each(function(i, o) {
img = $(o);
w = img.width() - 1;
h = img.height() - 1;
//console.log("w="+w+", h="+h);
if ( w == h) return;
if (h < w) {
margin = (w - h)/2;
img.css("margin-top", margin);
img.css("margin-bottom", margin);
}
if (w < h) {
img.height();
img.width(w*w/h); // keep ratio
h = w*w/h;
margin = (w - h)/2;
img.css("margin-left", margin);
img.css("margin-right", margin);
}
})
})
.prod {
width: 21%;
float: left;
border: 1px solid black;
padding: 2px;
}
img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
</div>
But I want to know if it's somehow possible to achieve with css

Here is a partial answer with css flex
https://jsfiddle.net/eliaweiss/otLcf1kn/1/
* {box-sizing:border-box;margin:0;padding:0;}
.list {
display: flex;
flex-wrap: wrap;
}
.prod {
width: 25%;
border: 1px solid black;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
}
<div class="list">
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/634-home_default/-Brown-Ethnic-Earrings-with-AquaMarine-Crystal-And-k-gold-filled-Boho-Chic-TRIBAL-Jewelry-Macram-Gypsy-Belly-Dance-Earring.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/641-home_default/-Tribal-earrings-Brown-Tribal-earrings-Macrame-earrings-Red-wine-Boho-earrings-e-Bohemian-earrings-Indian-earrings-Lotus.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/679-home_default/-Sale-tribal-earrings-Silver-and-Red-Classic-macrame-Earrings-with-delicate-GARNET-gemstone-TRIBAL-jewelry-bohemian-gypsy-jewel.jpg" alt="">
</div>
<div class="prod">
<img src="https://esoterica-shop.com/644-home_default/-Sale-tribal-earrings-Green-gold-and-white-pearl-hoops-micro-macrame-hippie-earrings-boho-tribal-earrings-gypsy-earrings.jpg" alt="">
</div>
</div>
This is good enough for most cases, however it generate a rectangle shape instead of a square

Develop Reference

JavaScript is the programming language of the Web.

Show/Hide Specific Items/Elements based on selected Category - javascript

Related

Change different pictures on click

Multiple Animations Javascript HTML

How to prevent jQuery apendTo from duplicating content

images in grid change in specified time interval using jquery or other javascript

CSS: Images in different sizes centered inside a list of responsive floating divs

Categories

Resources