Develop Reference

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>

How to make a horizontal thumbnail scrollable carausel in Vue?

I am trying to replicate this sort of a thumbnail container which is horizontal scrollable.
I have a GARMENTS button in my Vue.js Code that returns thumbnails as follows.
I am getting my thumbnails from the firebase storage and I want the carousel to look more like the first image with the horizontal scroll. What should I add to make it like so?
Here is the code for the Buttons Component:
<template>
<div class="gallery-container gallery-garments hide">
<div v-for="gar in allGarments" :key="gar.id" class="gallery-item">
<img :src="getImgUrl(gar.thumbnailLink)" height="150" width="100">
<span style="display:block">{{gar.name}}</span>
</div>
</div>
<v-btn color="primary" v-on:click="toggleGallery('garments')">Garments</v-btn>
<v-btn>Templates</v-btn>
<v-btn>Download</v-btn>
<v-btn>Share</v-btn>
</template>
<script>
export default {
name: "Buttons",
data () {
return {
garments: [],
}
},
methods: {
toggleGallery(type) {
document.querySelectorAll(".gallery-container").forEach(el => {
if (!el.classList.contains(`gallery-${type}`)) {
el.classList.add("hide")
}
})
document.querySelector(`.gallery-${type}`).classList.toggle("hide")
},
getImgUrl(url){ return url; }
}
}
</script>
<style>
</style>

In your CSS, a good start would be:
.gallery-container {
display: flex;
flex-direction: row;
height: 200px;
overflow-x: scroll;
}
Demo:
.gallery-item {
display: inline-block;
}
.gallery-container {
display: flex;
flex-direction: row;
height: 200px;
overflow-x: scroll;
}
<div class="gallery-container gallery-garments hide">
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
<div class="gallery-item">
<img src="" height="150" width="100">
<span style="display:block">Name</span>
</div>
</div>

Slick-Slider image inside a div container not resize based windows size

I use slick-slider at my website to show the 6 newest posts. Normally, on slick-slider content, there are image, post title, category, share and so on (I refer to iflscience homepage).
The problem is, if the image is put exact after slick-slider, the image size will responsive to window size.
I am using 2 slideToShow Setting that will reponsive to 1 slideToShow after below certain width at slick-slider
<div class="container-body">
<div class="slider your-class">
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
</div>
But if I create a container to warp the post newest post content, the image size wouldn't responsive to window size.
<div class="container-body">
<div class="slider your-class">
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
<div>
<img src="https://www.w3schools.com/bootstrap/la.jpg"/>
</div>
</div>
</div>
I want the image inside the "div" is dynamically changed like when I didn't use "div".
I have tried to create a script to dynamically change the image width with height: auto, but sometime it doesn't work and depend on how fast we are resizing.
I understand, the div size will depend on image size, so the slick slider height won't change at all. But I haven't any clues to solve it.

https://developer.mozilla.org/en-US/docs/Web/CSS/display
Div's default display is block, img default position is inline we can resolve this by setting the container to inline or inline block and setting the width to 100%
I've got a loop that sets the width of the img-con and the width of the img container.
document.querySelectorAll('.con').forEach(el => {
el.style.width = `${el.children.length * 100}%`;
Array.from(el.children).forEach(img => {
img.style.width = `${100 / el.children.length}%`
})
})
.slider {
overflow: hidden;
padding: 0 10px;
width: 50%;
}
.img-con {
width: 100%;
display: inline-block;
position: relative;
float: left;
}
.con {
display: inline-block;
height: auto;
}
.img-con>img {
width: 100%;
position: absolute;
top: 0;
}
.img-con:before {
content: '';
width: 100%;
padding-bottom: 64%;
display: block;
}
.container-body {
display: flex;
flex-direction: row;
}
<div class="container-body">
<div class="slider your-class active">
<div class="con">
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
</div>
</div>
<div class="slider your-class active">
<div class="con">
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
<div class="img-con">
<img src="https://www.w3schools.com/bootstrap/la.jpg" />
</div>
</div>
</div>
</div>

Replacing div with div while having few buttons on the same page

I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.

Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)

Javascript&Css - Image modifications on onclick()

The webpage: http://www.honlapkell.hu/room/fooldal/
The problem: the problem I want to solve is: when I clicked all of the 7 menu pictures upstairs, I would like to change the background elements' class, because in the CSS the new class's property redefines the color of the class elements (from grayscale to normal)
The html:
<div style="position:relative;">
<div class="aszoba" style="background-size: contain; position: relative; background-image: url(http://www.honlapkell.hu/room/wp-content/uploads/2015/01/hatterr.jpg); box-shadow: 0px 40px 40px #323131;"><img src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/3d-view-blue-minimalistic-wall-szines1.png" alt="3d-view-blue-minimalistic-wall-szines" width="1920" height="1197" class="alignnone butorok size-full wp-image-377" />
<div class="element" style="position: absolute; top: 41%; left: 75.5%;">
<div class="title" style="margin-bottom:14px; width:240px;">The Room in the Media</div>
<img class="nagyul teve" onclick="className='leesikk';i=i+1;" style="height:125px; margin-left:40px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/tev.png" alt="tev" class="alignnone size-full wp-image-65" />
</div>
<div class="element" style="position: absolute; top: 41%;">
<div class="title" style="width:150px; margin-bottom:-0px;">Guestbook</div>
<img class="nagyul" onclick="className='leesikk'" style="width:80px; margin-left: 32px; height: 65px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/visitor.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 21%;">
<div class="title" style="width:100px; margin-left:10px;">Contact</div>
<img onclick="className='leesikk'" class="nagyul" style="height:70px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/redphone.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 1%;">
<div class="title" style="width:75px; margin-left:30px; margin-bottom:10px;">Gallery</div>
<img class="nagyul" onclick="className='leesikk'" style="height:110px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/tumblr_lv3yt6QIMz1ql6a52o1_1280.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 61%;">
<div class="title" style="width:75px; margin-left:30px; margin-bottom:10px;">FAQ</div>
<img class="nagyul" onclick="className='leesikk'" style="height:78px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/faq.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 81%;">
<div class="title" style="width:75px; margin-left:10px; margin-bottom:10px;">Booking</div>
<img class="nagyul" onclick="className='leesikk'" style="height:130px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/calendar2.jpg" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 101%;">
<div class="title" style="width:170px; margin-left:45px; margin-bottom:20px;">Our Rooms</div>
<img class="ajto" onclick="className='leesikk'" style="width:203px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/Door-Skin-HD-8008-.jpg" alt="pen" class="alignnone size-full wp-image-76" /></div>
</div>
the javascript:
<script>
function myfunction()
{
var x = element.onclick(); var y=0;
if (x&&element.className==='leesikk') {y=y+1};
console.log(x);
if (y===7) {aszoba.className=leesikk}
}
</script>

Have a look at the following article. Particularly, the "removeClass" and "addClass" jQuery functions.
jQuery - Get and Set CSS Classes

Why not use something like this to change the class of the elements on click.
$('.element-you-click-here').on('click', function(){
$('#change-this').removeClass('current');
$(this).addClass('this-is-class-to-add');
});
JSfiddle
Note: This is jQuery and you will need the jQuery library for this.