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>
Related
I'm creating slider using flickity and what I'm trying to do is when slide is selected the background color of body change (each slide has a specific color.. the problem is (is-selected) class can't detected in JavaScript even though I clearly see it in console
html:
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="./img/1.jpeg" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="./img/2.jpeg" alt=""
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="./img/3.jpeg" alt="">
</div>
</div>
let cell = document.querySelectorAll(".carousel-cell");
cell.forEach((c) => {
// console.log(c.dataset.color);
if (c.classList.contains("is-selected")) {
document.body.style.backgroundColor = "red";
}
});
how can I solve this?
You might tweak Flickity itself like I do in the snippet below, or if you'd like to keep it clean, you want to use mutationObserver.
const selectFn = [
'var a = fizzyUIUtils;',
(Flickity.prototype.select + '').substring(16).replace(/}$/, ';'),
'document.body.style.backgroundColor = this.cells.find(c => c.element.classList.contains("is-selected")).element.dataset.color;'
].join('');
Flickity.prototype.select = new Function('t', 'e', 'i', selectFn);
.carousel {
height: 80vh;
width: 80vw;
margin: 10vh 0 0 10vw
}
.carousel-cell,
.pic {
height: 100%;
width: 100%;
}
.pic {
object-fit: contain
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel" data-flickity='{ "wrapAround": true }'>
<div class="carousel-cell" data-color="red">
<img class="pic" src="https://picsum.photos/id/21/400/300" alt="">
</div>
<div class="carousel-cell" data-color="blue">
<img class="pic" src="https://picsum.photos/id/16/400/300" alt="">
</div>
<div class="carousel-cell" data-color="green">
<img class="pic" src="https://picsum.photos/id/28/400/300" alt="">
</div>
</div>
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>
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>
This is the code to my carousel (image slider). I would like to know how to reposition the whole slider on my webpage. I basically want to move it a bit to the left as a whole. The website if link to this slider is http://www.menucool.com/javascript-image-slider and i also made a jsfiddle here http://jsfiddle.net/lasquish/cynar4ug/. Website code fiddle http://jsfiddle.net/lasquish/Low0emf1/
-Thanks for the help!
<div class="div1">
</div>
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
your fiddle isn't loading for me, but based in this code it would be like this:
#sliderFrame {
position: relative;
width: 960px;
margin: 0px auto;
left: -30px;
}
where -30px is the amount of pixels to the left you want to move the slider. An even better option would be to add the slider inside a container like
<div class="slide_contain">
<div id="sliderFrame">
<div id="slider" style="text-align: center;">
<a href="file:///C:/Users/alex/Desktop/rootforsite/index.html" target="_blank">
<img src="images/firsttest.jpg" alt="Welcome to IGameX.com" />
</a>
<img src="images/image-slider-1.jpg" />
<img src="images/image-slider-3.jpg" alt="Trade your way to victory!" />
<img src="images/image-slider-4.jpg" alt="#htmlcaption" />
<img src="images/image-slider-5.jpg" />
</div>
<div id="htmlcaption" style="display: none;">
Click me: To start selling and trading!.
</div>
</div>
</div>
Now in your CSS, you add this:
.slide_contain {
position:relative;
width:960px;
height:auto;
min-height:300px
}
#sliderFrame {
position: absolute;
width: 960px;
margin: 0px auto;
left: -30px;
}
This method will allow you to have better control and avoid problems when moving the sliderFrame div
I have one vertical slider page.
in every slide I have one image and I have iphone container.
like
now this page slides vertically show next slides comes in center and its also contains image on center.
now I want something like that image only displayed when its comes in iphone container.
as here in second image my images showing even out of iphone container so I dont want to do that
my code
<div style="display: block; position: fixed; top: 14.5px; left: 684px;" class="iphone_container"><img title="" src="/img/iphon.png"></div>
<div class="port_list">
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
<div class="port_wrap" id="slide_1" style="background-color: #344a18;position: relative">
<div class="proj_brief"></div>
<div class="">
<div class="">
<img src="" />
</div>
</div>
</div>
</div>
You create a container div for your phone and put there a div for the sildes. with overflow:hidden you can hide the additional content.
<div id="phone">
<div id="slides">
<img src="pic1.png" />
<img src="pic2.png" />
<img src="pic3.png" />
</div>
</div>
<input type="button" value="slide up" onclick="slide('up')" />
<input type="button" value="slide down" onclick="slide('down')" />
Check this fiddle: http://jsfiddle.net/qfzBk/2/