Here is the effect I want to achieve:
This is i.e. one image, and the other images should slide diagonally in the way that arrow goes. The effect should not be fade effect. The slide effect has to be achieved.
Here is the html:
<div id="slider_page">
<div style="display: block;">
<img src="img1.jpg">
<img src="img2.jpg">
</div>
</div>
Please for help guys.
Sorry for the mess in the html code.
Thanks in advance
Here is a rough sketch on how to do it on your own, without a library. The code might need some adaption for your particular circumstances. For instance, if you want to slide not only images but elements containing text as well, change from using <img> to <div>. You'll find explanation in the comments.
HTML
<div id="carousel">
<img class="carousel-img" src="img1.jpg" />
<img class="carousel-img" src="img2.jpg" />
<img class="carousel-img" src="img3.jpg" />
</div>
CSS
#carousel {
position: relative; /* So images are positioned relative to it. */
width: 400px;
height: 300px;
overflow: hidden; /* So we clip the other images. */
}
.carousel-img {
width: 100%;
position: absolute; /* Position relative to parent div. */
left: 400px; /* Hide just beyond bottom right corner. */
top: 300px;
}
.carousel-img:first-child {
/* Do not hide the first image. */
left: 0px;
top: 0px;
}
JavaScript
//Some settings.
var animation_time = 500; //Millisecs the animation takes.
var waiting_time = 2000; //Millisecs between animations.
//Some variables.
var images; //A list of the images.
var i = 0; //Index of the current image.
var w; //Width of carousel.
var h; //Height of carousel.
$(function() {
//Runs when the DOM is ready.
//Set the variables.
images = $("#carousel .carousel-img");
w = $("#carousel").css("width");
h = $("#carousel").css("height");
//Start the carousel.
setTimeout(slideToNext, waiting_time)
});
function slideToNext() {
//Get the index of the next image.
var next = (i + 1) % images.length;
//Make sure the new image is on top.
images.css("z-index", 0);
images.eq(next).css("z-index", 1);
//Animate the next image.
images.eq(next).animate({left: "0px", top: "0px"}, animation_time, function() {
//Runs when the animation is compleated.
//Move the old image out.
images.eq(i).css({left: w, top: h});
//Now this is the current image.
i = next;
//Do it again.
setTimeout(slideToNext, waiting_time);
});
}
Here is a working JSFiddle, including some beautiful artwork by Caspar David Friedrich.
It might also be possible to configure an existing carousel library (like Slick or Jssor) to do this.
Related
I’m having some trouble with the images in one of my pages. They are in a carousel, but as the carousel slides to the next image, it is constantly changing sizes because the images are different sizes. I have tried to set them all to be the same size, but it doesn’t seem to matter, they are still different sizes. What do I need to do to make it so they are the same size so the carousel will remain consistent through each slide?
Using aspect-ratio
So, you can ignore the JavaScript and HTML in the snippet below.
In CSS what I've done is given a fixed width of 150px to all my images and a 1:1 aspect-ratio (because I know all my images are square).
Comment out the aspect-ratio code and you can see the difference.
let
currImg = 0,
totalImgs = 4;
const
container = document.getElementById("container"),
leftBtn = document.getElementById("left-btn"),
rightBtn = document.getElementById("right-btn"),
nav = (delta) => {
container.children[currImg].classList.remove("show")
currImg = (currImg + totalImgs + delta) % totalImgs
container.children[currImg].classList.add("show")
},
navLeft = () => nav(-1),
navRight = () => nav(1)
leftBtn.addEventListener("click", navLeft)
rightBtn.addEventListener("click", navRight)
img {
width: 150px;
aspect-ratio: 1/1;
display: none;
margin-bottom: 0.5rem;
}
.show {
display: block;
}
<div id="container">
<img src="https://placekitten.com/200/200" class="show" />
<img src="https://placekitten.com/300/300" />
<img src="https://placekitten.com/500/500" />
<img src="https://placekitten.com/600/600" />
</div>
<button id="left-btn">Left</button>
<button id="right-btn">Right</button>
I have trying for some time. And I gave a look at the image slider questions already. But I would really appreciate if I get some specific help here. Please tell me where the following code went wrong.
Here's my jQuery code:
function slideMe {
$('.imgcontainer').animate({"margin-left":"-= 100%"}, 2000, function () {
if($('.imgcontainer').css("margin-left") == (-300%)) {
$('.imgcontainer').css("margin-left", "0px");
}
slideMe();
});
}
window.onload = slideMe();
And here's the script on HTML page:
<div class="fitimage">
<div class="imgcontainer">
<img src="img/copywrtng.jpg" class="headerimage" alt="copywriting" />
<img src="img/copywrtng1.jpg" class="headerimage" alt="copywriting" />
<img src="img/copywrtng2.jpg" class="headerimage" alt="copywriting" />
</div>
</div>
And here's what I have on CSS:
div.fitimage {
width:100%;
height:93vh;
overflow: hidden;
}
img.headerimage {
padding: 0;
margin:0 auto;
width:100%;
/*max-height:100%;
max-width:100%;*/
height:93vh;
}
My logic is that as each image takes up 100% width, as the ".imgcontainer" div slides left with margin-left: -100%, each image should come up one by one from the right, until it reaches the last one when it reverts to the first image again.
It's not working!
Please help.
Your "main" issue is in this line:
$('.imgcontainer').css("margin-left") == (-300 % )
// ^^^^^^^^
beside you can only use string format "-300%", .css("margin-left") will give you a px value which you cannot compare with a non-computed %.
Another issue is that the slides set at 100% - will be the width of their container, which might be actually greater (300% for 3 slides).
Solution:
Instead I'd suggest you to use a c counter that goes like 0,1,2, 0,1... etc.
Than calculate the overflow-wrapper width and animate scrollLeft: width * counter (instead of -marginLeft).
Use display:flex on the parent and min-width:100%; on the child DIV elements (than place your images inside those DIVs instead!)
$(".imgcontainer").each(function(){ // Now you can have multiple independent sliders!
var $gal = $(this),
$slides = $gal.children(), // get the slides
tot = $slides.length, // number of slides
c = 0; // the counter we mentioned
(function anim() { // internal animation callback function
var w = $gal.width();
c = ++c % tot; // increment or loop-back counter to 0
$gal.delay(2000).animate({scrollLeft: w*c }, 1000, anim); // anim callback !
}()); // << START!
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;font:14px/1.4 sans-serif;} html,body{height:100%;}
.imgcontainer{
position:relative;
height: 93%; /* or whatever you see fit */
display: flex;
overflow: hidden;
}
.imgcontainer > div {
min-width: 100%;
background: none 50% 50% / cover;
/* Set background-image inline (see HTML) */
/* Or use inner images like you did */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgcontainer">
<div style="background-image:url(http://placehold.it/500x340/0bf);">
Slide 1
</div>
<div style="background-image:url(http://placehold.it/500x340/f0b);">
Slide 2
</div>
<div style="background-image:url(http://placehold.it/500x340/b0f);">
Slide 3
</div>
</div>
I am using the following code which displays images vertically within a div that has 100% height and a auto width. I want the images to be displayed vertically until the end of the page and then start displaying horizontally. I want the content div width to be automated based on how many images are displayed but always have the 100% height. At the moment the images are displayed vertically until the page ends and then the rest of the images are hidden in the overflow.
#content {
min-height: 100%;
display: table;
width: auto;
overflow-y: hidden;
}
#thumbnailgrid {
overflow-y: hidden;
height: 100%;
max-height: 100%;
width: auto;
}
#thumbnailgrid img {
width: auto;
height: 24%;
}
Ok this is what I came up to, you might want to modify it a bit to fit your needs because this one doesn't keep track of margins or paddings, but it should help you solve your problem: http://jsfiddle.net/crbmL7sb/4/
To see it working try resizing the result window and clicking on "Run" again. You might want to add a window resize event listener as well.
Here's the HTML:
<div class="wrapper">
<div class="single">
<img src="http://placehold.it/200x200&text=A1" alt="placeholder" />
<img src="http://placehold.it/200x200&text=A2" alt="placeholder" />
<img src="http://placehold.it/200x200&text=A3" alt="placeholder" />
<img src="http://placehold.it/200x200&text=A4" alt="placeholder" />
<img src="http://placehold.it/200x200&text=A5" alt="placeholder" />
</div>
<div class="single">
<img src="http://placehold.it/200x200&text=B1" alt="placeholder" />
<img src="http://placehold.it/200x200&text=B2" alt="placeholder" />
<img src="http://placehold.it/200x200&text=B3" alt="placeholder" />
<img src="http://placehold.it/200x200&text=B4" alt="placeholder" />
<img src="http://placehold.it/200x200&text=B5" alt="placeholder" />
</div>
</div>
The Javascript:
var CL = function( vals ) {
columns = vals.columns;
var wHeight = $(window).height();
this.init = function() {
this.createColumns();
this.setBodyWidth();
}
this.createColumns = function() {
//loop through all the big columns
for(var i=0, l=columns.length; i < l; i++) {
images = $(columns[i]).find("img"); //get all the images in this column
columnHeight = 0; //set a flag to store the column height
var newDiv = $("<div />").addClass("inner"); //create an inner div inside the column
for (var p=0, n=images.length; p < n; p++) { //loop through all the images in this column
columnHeight += $(images[p]).height(); //add the height of the current image to the column height flag
if (columnHeight >= wHeight) { //compare the column height with the window height, if there's NOT enough room for the new image
newDiv.appendTo($(columns[i])); //append this column to the big parent div
var newDiv = $("<div />").addClass("inner"); //create a new column
columnHeight = $(images[p]).height(); //reset the column height flag
}
$(images[p]).appendTo(newDiv); //add the image to the current column
}
// THIS IS THE LINE I FORGOT
newDiv.appendTo($(columns[i]));
}
}
this.setBodyWidth = function() {
//when moving the images in the appropriate divs is done
var totWidth = 0;
$(".inner").each(function() {
totWidth += $(this).width(); //get the width of all the content
}) //and set it to the main wrapper to create the horizontal scrollbar
vals.wrapper.css({
width: totWidth
})
}
this.init();
}
//You need to somehow preload the images, or this will not work. Maybe add an overlay to cover the page while the images are being loaded and then fade it out. A simple window load even (like I commented out below) should work, but it appears to be broken on jsfiddle.
//$(window).load(function() {
var cl = new CL({
columns: $(".single"),
wrapper: $(".wrapper")
});
//});
And a little bit of CSS
img {
display: block;
}
.inner {
float: left;
}
img {
border: 4px solid white;
}
* {
box-sizing: border-box;
}
HTML:
<html>
<head>
<script type="text/javascript" src="jscript/jquery.js"></script>
</head>
<body>
<div class="slider_b">
<img src="img/frame_wood_back_460_380.jpg">
<img src="img/01_french_train_480_360.jpg">
<img src="img/05_cherries_480_360.jpg">
<img src="img/06_wheat_480_360.jpg">
<img src="img/10_renault_480_360.jpg">
</div>
<div id="button"><img src="img/06_wheat_480_360.jpg" width="48px" height="auto"></div>
<script>
setInterval("switchit()", 3000);
$('.slider_b img:gt(0)').hide();
function switchit() {
$('.slider_b img:first-child').fadeOut(0).next('img').fadeIn(2000).end().appendTo('.slider_b');
}
</script>
</body>
</html>
CSS:
.slider_box img{
position:relative;
top:0px;
left: 0px; }
.slider_box {
position:absolute;
width: 480px;
height: 360px; }
#button {
position: relative;
top: 10px;
left: 500px;}
The slideshow works - I just could not figure out how to switch the slideshow to one of the images by clicking a thumbnail button (id=button) - the slideshow should continue then in the regular circle order.
You could add a data attribute to your <img> elements, and append the button with the first child <img>element to carry over that data attribute. e.g:
<img src="" data-slide="1">
And for the append
var thumbnail = $("div.slider_b").find("img:first");
$("#button > img").replaceWith(thumbnail);
Once this is done, make it so that
("#button").on(click, function() {
var moveTo = $(this).find("img").data(slide);
var item = $("div.slider_b").find("[data-slide='" + moveTo + "']"
$("div.slider_b).prepend(item);
}
I'm not 100% right with the jQuery, but I believe I'm on the right lines. A bit more exploration down this route will get you to where you need to be.
Try making a relation between the slide and its thumbnail to fetch the respective slide, e.g. by using attibutes pairs, like data-slide="slide1" for the thumbnail and id="slide1" for the actual slide
on thumbnail click, adjust the current slide to the respective one and continue auto animation from this point
Point one is just one solution, it's the creativity part ;) You could come up with something else, like e.g. using thumbnails and slides indexes, etc. Good luck.
My goal is to have an image preload while it is loading the actualy image, but I can't quite figure it out. The whole goal for this is that I have a slideshow that displays an image, but sometimes it is slow to load.. lol. Here's my HTML:
<div id="slideshow">
<img src="../images/slideshow/spacer.gif" width="100" height="100" id="myPicture" alt="some image">
</div>
Here's my javascript I have already:
window.onload = choosePic;
function choosePic() {
var myPix = new Array("../images/slideshow/sempiternal.png", "../images/slideshow/cross.png", "../images/slideshow/pentagram.png");
var randomNum = Math.floor((Math.random() * myPix.length));
document.getElementById("myPicture").src = myPix[randomNum];
}
And the CSS:
#slideshow {
height: 100px;
width: 100px;
position: fixed;
bottom: 20px;
right: 20px;
}
Doesn't seem like your function will preload anything. Apart from the random image selected which loads normally, the other images in the array will not be called at all.
You might want to check out JavaScript Preloading Images and Function to preload images? instead.