My code is trying to make a slider, that has 2 classes, 'motion1' and 'motion2'. Based on each class, I am trying to apply the transition to each slide at a different time. However, the hasClass function is not detecting the parent with the above class name. Please find the codes here below
$(function(){
let motion1 = $('.motion1');
let motion2 = $('.motion2');
let images = $('.column1 img');
images.each(function(){
if($(this).parents().hasClass(motion1)){
console.log('hi');
} else{
console.log('no');
}
});
});
#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 motion1">
<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 motion2">
<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 motion1">
<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>
If anyone can also help me with the code problem. I would also like to ask for your help in achieving the slide function. Here, the images with motion1 and motion2 need to be fadeIn and fadeOut at different time intervals from each other. If it reaches the last slide, the first slide needs to come
Any help is appreciated.
The function hasClass takes a single string argument as a parameter which represents the CSS class you want to check. If we look at your code, we can see that you aren't passing in a string to the hasClass function but a jQuery object instead:
$(function(){
let motion1 = $('.motion1');//jQuery Object
let motion2 = $('.motion2');//jQuery Object
let images = $('.column1 img');
images.each(function(){
if($(this).parents().hasClass(motion1)){//Bad argument - jQuery Object
console.log('hi');
} else{
console.log('no');
}
});
});
To fix this, simply pass in the class directly to the hasClass method:
$(function(){
let images = $('.column1 img');
images.each(function(){
if($(this).parents().hasClass('motion1')){//correct argument - string
console.log('hi');
} else{
console.log('no');
}
});
});
$(function(){
let motion1 = $('.motion1');
let motion2 = $('.motion2');
let images = $('.column1 img');
images.each(function(){
if($(this).parents().hasClass('motion1')){
console.log('hi');
} else{
console.log('no');
}
});
});
#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 motion1">
<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 motion2">
<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 motion1">
<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>
Related
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>
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);
}
}
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>
Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.
<section id="main">
<div class="inner">
<section>
<div class="box alt">
<div class="row 50% uniform">
<div class="4u"><span class="image fit"><img
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
</div>
</div>
</section>
</div>
</section>
Hover:
.image.fit >img:hover {
width: 1000px;
height: 1000px;
position: absolute;
}
The span elements should be completely removed and its classes placed on the image elements themselves.
Also, you have a nested section element that isn't doing anything for you.
Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:hover {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I've taken Scott Marcus' answer and adapted to click, which was your original request.
The main diffence is the addition of a tags targeting elements on the page and using :target in the css.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:target {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<a href="#image1">
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image2">
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image3">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
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