Basically i have made a slider in which a user see the image revoving aroound the three Divs. But the schema for this in code is , i have made 3 sliders which changes their images after a particular time . The only problem in this is i am not able to set the proper timing for iterations. Like i have added the fade in and out effects, but after some time the timing collapse, Could you please tell me the proper way to do it?
This is the sample of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image</title>
<meta charset="UTF-8" />
<meta name="description" content="Rotating Image Slider with jQuery & CSS3" />
<meta name="keywords" content="jquery, rotation, slider, images, slideshow, autoplay, play, pause, css3"/>
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<style>
.quotes{
display:none;
float:left;
}
.quotes1{
display:none;
float:left;
}
.quotes2{
display:none;
float:left;
}
</style>
</head>
<body>
<div class="content">
<img src = "images/3.jpg" class="quotes2">
<img src = "images/1.jpg" class="quotes2">
<img src = "images/2.jpg" class="quotes2">
</div>
<div class="content">
<img src = "images/2.jpg" class="quotes1">
<img src = "images/3.jpg" class="quotes1">
<img src = "images/1.jpg" class="quotes1">
</div>
<div class="content">
<img src = "images/1.jpg" class="quotes">
<img src = "images/2.jpg" class="quotes">
<img src = "images/3.jpg" class="quotes">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
//js and 3 functions start here
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2700)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
(function() {
var quotes = $(".quotes1");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2500)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
(function() {
var quotes = $(".quotes2");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2200)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
</script>
</body>
</html>
Related
i made slider that changes images every 1 sec, but i cant figure how to make the if statement loop, the images just stays on the first slide i tried to loop with while and for but i cant make it work. Can you please help me :)
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
document.getElementById("currentImage").src = images[counter-2];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
<script src="script.js"></script>
</body>
When counter>=2 condition, you are not changing the counter variable.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
counter -= 1; // modify the counter variable
document.getElementById("currentImage").src = images[counter];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
I have created this snippet so you can have as many images as you want in the array.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg"];
let count = 0;
const displayImage = () => {
document.getElementById("currentImage").src = images[count];
if( count >= (images.length-1)) count = 0;
else count++;
}
setInterval( displayImage, 1000 );
<img src="" id="currentImage" />
This is a working example, using recursion.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var sliderElement = document.getElementById("currentImage");
(function slider(counter, len){
sliderElement.src = images[counter];
counter ++;
if(len === counter){
counter = 0;
}
setTimeout(slider, 1000, counter, len);
})(0, images.length);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
I tried to change the width of div dynamically while scrolling.But it is not working.I have jquery-1.11.3.min.js in my directory and connect it with HTML file.The scrollfunction in my script appears in brown color instead of black.
This is my HTML file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="BooksExchanger.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<script src="BooksExchanger.js"></script>
<div id="packet"style="position:fixed">
<h1 id="welcome" >Welcome</p>
<h2 id="about">You Are Now Entering Into BBE</h2>
</div>
<img src="1.jpg"/>
<img src="2.jpg"/>
</body>
</html>
THis is my JS file(BooksExchanger.js)
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos < 10 ) {
$("#welcome").css('width', 75);
} else if(scroll_pos > 25 && scroll_pos < 75) {
$("#welcome").css('width', 100);
} else if(scroll_pos > 75 && scroll_pos < 100){
$("#welcome").css('width', 125);
}else if(scroll_pos > 100){
$("#welcome").css('width', 150);
}
});
});
try adding the scroll event to $(window) instead of $(document)
I am trying to display one of two images using a click button using random number generator by assigning each image to an if and else statement. I'm not sure where the problem is. Here is what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 9</title>
<link href="images/avatar.png" rel="shortcut icon" type="image/png">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/javascript.js" type="text/javascript"></script>
<style type="text/css">
.auto-style1 {
text-align: center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<header>
</header>
<aside>
</aside>
<div id="main">
<h1> Arrays and Coditional Statements</h1>
<h2 class="auto-style1">Flip a coin </h2>
<script>
function myFunction1() {
var result = doucment.getElementById("pic");
var x = Math.floor(Math.random() * 2);
console.log(x);
if (x == 0) {
document.getElementById("Coin").innerHTML = "Heads"
result.innerHTML="<img alt=\"the frontside of a coin\" src=\"images/heads.jpg\" />"; }
else {
document.getElementById("Coin").innerHTML = "Tails";
result.innerHTML= "<img alt=\"the backside of a coin\" src=\"images/tails.jpg\" />";
}
}
myFunction1();
</script>
<button type="button" onclick="myFunction1()" id="Coin">CLick ME</button>
<p id="pic"> </p>
</div>
<footer>
</footer>
</body>
</html>
You have a very simple typo. You wrote:
var result = doucment.getElementById("pic");
document is spelled wrong
I have been working on my carousal slider I have got images showing now.
But can not get it to slide the first image should fade and reset slide.
I have the current Ajax / jquery from Google. It should be able to slide. Not sure whats wrong.
Live Example: http://codepen.io/riwakawebsitedesigns/pen/CEgdm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/responsive.css" media="screen" type="text/css" media="all" />
<link rel="stylesheet" href="css/carousel.css" media="screen" type="text/css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function () {
$(".carousel #1").show("fade", 500);
$(".carousel #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = $(".carousel img").size();
var count = 2;
setInterval(function() {
$(".carousel #"+count).show("slide",function(){direction: 'right', 500});
$(".carousel #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1
}
}, 1700);
})
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="carousel">
<img id="1" class="active" src="images/image1.jpg" border="0" alt="" />
<img id="2" src="images/image2.jpg" border="0" alt="" />
<img id="3" src="images/image3.jpg" border="0" alt="" />
</div>
</div>
</div>
</div><!-- . Container -->
</body>
</html>
Slider CSS
.carousel {
width: 100%;
height: 350px;
overflow: hidden;
background-image: url('../images/loading.gif');
background-repeat: no-repeat;
background-position: center;
}
.carousel img {
width: 100%;
height: 350px;
display: none;
}
I believe the problem is due to this line of code:
$(".carousel #"+count).show("slide",function(){direction: 'right', 500});
You are actually returning a function reference instead of an object there, I think the right line should be:
$(".carousel #"+count).show("slide",{direction: 'right'}, 500);
Still, I would simply use jQuery.animate() instead, and perhaps a whole different approach. Check the updated code, I've made some enhancements too:
$(document).ready(function() {
var images = $(".carousel img");
var timeout = 5000; // 5 seconds
var max = images.length;
var slide = function(index) {
var img = $(images[index]);
// first show the image
img.animate({left: "0"}, 500, function() {
// specify timeout to change image
setTimeout(function() {
// hide current image
img.animate({left: "100%"}, 500, function() {
// reset state to start over
img.css("left" , "-100%");
});
if (++index == max) {
index = 0; // start over
}
// recursive call
slide(index);
}, timeout);
});
};
slide(0);
});
I changed this CSS rules too:
.caoursel {
position: relative;
}
.carousel img {
position: absolute;
width: 100%;
height: 350px;
left: -100%;
}
Live demo: http://codepen.io/riwakawebsitedesigns/pen/CEgdm
I recommend using some third party carousel, like Bootstrap's carousel: http://getbootstrap.com/javascript/#carousel
So I have this code (below) that will replace one image. I need this to be modified so it will replace four separate images, and is triggered after a button (image) is clicked.
Can someone help me do this, and also make it so it is triggered after clicking a button (image). Thanks x
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
function callback(imageLoader){
$('#image').attr('src', imageLoader.nextImage());
}
function ImageLoader(images){
this.images = images;
this.current = 0;
this.nextImage = function(){
this.current = (this.current+1) % this.images.length;
return this.images[this.current];;
}
}
imageLoader = new ImageLoader(['img/wallpaper/2.png', 'img/wallpaper/3.png', 'img/wallpaper/6.png', 'img/wallpaper/10.png']);
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
</body>
</html>
If it helps here is my Design
It's hard to understand what you're trying to do here, but it does seem like a complicated way to swap out some images? Maybe something more like this would be easier :
$(document).ready(function() {
var images = ['img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
];
$('#buttonID').on('click', function() {
$('.image').attr('src', function(i, src) {
return images[i];
});
});
});
example HTML:
<body>
<img class="image" src="img/wallpaper/1.png" />
<img class="image" src="img/wallpaper/4.png" />
<img class="image" src="img/wallpaper/7.png" />
<img class="image" src="img/wallpaper/9.png" />
<input type="button" id="buttonID" value="Change images" />
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageLoader;
function ImageLoader(images)
{
this.images = images;
this.current = 0;
this.nextImage = function()
{
this.current = (this.current+1) % this.images.length;
return this.images[this.current];
}
}
$(document).ready(function()
{
imageLoader = new ImageLoader(
[
'img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
]);
$('#change').on('click', function()
{
$('#image').attr('src', imageLoader.nextImage());
});
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
<input type="button" id="change" value="Change" />
</body>
</html>