I am building a website in which on header div i want to add a slideshow.My code took and display the first Image but the slider did not work i put all the images in images folder here the .html file is
<html>
<head>
<title>slideshow</title>
</head>
<body>
<img scr ="image/slider1.jpg" id = "img"/>
<script language="javascript" type="text/javascript" scr="slideshow.js"></script>
</body>
and my .js file is this
var myImage = doucoment.getElementById("img");
var ImageArray = ["slider1.jpg", "slider2.jpg", "slider3.jpg"];
ImageIndex = 0;
function changeImage() {
img.setAttribute("src", ImageArray[ImageIndex]);
ImageIndex++;
if (ImageIndex >= ImageArray.length){
ImageIndex = 0;
}
}
var ImageHandle = setInterval(changeImage, 3000);
You have a typo in your HTML and JavaScript..
Change
scr to src
And
doucoment to document
Here is modified snippet.
var myImage = document.getElementById("img");
// ^^^^^^^ typo here.
var ImageArray = ["https://www.google.com.pk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif", "http://reservations.life/css/images/bg-01.jpg"];
ImageIndex = 0;
function changeImage(){
img.setAttribute("src", ImageArray[ImageIndex]);
ImageIndex++;
if(ImageIndex >= ImageArray.length){
ImageIndex = 0;
}
}
var ImageHandle = setInterval(changeImage,3000);
img{
width:400px;
height:200px;
}
// ||| typo here.
<img src ="https://www.google.com.pk/logos/doodles/2016/2016-doodle-fruit-games-day-8-5666133911797760.3-hp.gif" id = "img"/>
var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
slides[currentSlide].className = 'slide';
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = 'slide showing';
}
#slides {
position: relative;
height: 300px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: 2;
}
<ul id="slides">
<li class="slide showing">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
<li class="slide">Slide 4</li>
<li class="slide">Slide 5</li>
</ul>
HTML:
scr ="image/slider1.jpg"
scr="slideshow.js"
turn 'scr' into 'src'
JS:
doucoment.getElementById("img")
turn 'doucoment' into 'document'
Related
Hi I am trying to display a loader section.
Which section will increase 0 to 100% during page load.
for that I tried below code.
Problem is that when I tried to page soft reload with browser cache that screen is not moving from bottom to top (with height 0% to 100%).
But in hard refresh after removing browser cache it's ok.
;(function(){
function id(v){return document.getElementById(v); }
function loadbar() {
var ovrl = id("overlay"),
prog = id("progress"),
stat = id("progstat"),
container = id("container"),
img = document.images,
c = 0;
tot = img.length;
var decrease = 100;
function imgLoaded(){
c += 1;
var perc = ((100/tot*c) << 0) +"%";
var percvh = ((100/tot*c) << 0) +"vh";
ovrl.style.height = percvh;
decrease = decrease - perc;
prog.style.width = perc;
stat.innerHTML = "Loading "+ perc;
if(c===tot) return doneLoading();
}
function doneLoading(){
setTimeout(function(){
ovrl.style.height = '100vh';
ovrl.style.transform= "translate3d(0, -100%, 0)";
//ovrl.style.transition = "transform 2s ease-in-out";
}, 1200);
}
for(var i=0; i<tot; i++) {
var tImg = new Image();
tImg.onload = imgLoaded;
tImg.onerror = imgLoaded;
tImg.src = img[i].src;
}
}
document.addEventListener('DOMContentLoaded', loadbar, false);
}());
*{margin:0;}
body{
font: 200 16px/1 Helvetica, Arial, sans-serif;
}
img{width:32.2%;}
#overlay{
background: #ccc;
position: fixed;
z-index: 999;
bottom: 0;
width: 100%;
height: 0vh;
transition: transform 1.5s ease-in-out;
}
#progress{
height:1px;
background:#fff;
position:absolute;
width:0;
top:50%;
}
#progstat{
font-size:0.7em;
letter-spacing: 3px;
position:absolute;
top:50%;
margin-top:-40px;
width:100%;
text-align:center;
color:#fff;
}
<body>
<div id="overlay">
<div id="progstat"></div>
<div id="progress"></div>
</div>
<div id="container">
<img src="http://placehold.it/3000x3000/cf5">
<img src="http://placehold.it/3000x3000/f0f">
<img src="http://placehold.it/3000x3000/fb1">
<img src="http://placehold.it/3000x3000/ada">
<img src="http://placehold.it/3000x3000/045">
<img src="http://placehold.it/3000x3000/b00">
<img src="http://placehold.it/3000x3000/41b">
<img src="http://placehold.it/3000x3000/098">
<img src="http://placehold.it/3000x3000/987">
<img src="http://placehold.it/3000x3000/f25">
<img src="http://placehold.it/3000x3000/526">
<img src="http://placehold.it/3000x3000/826">
<img src="http://placehold.it/3000x3000/ad6">
<img src="http://placehold.it/3000x3000/74c">
<img src="http://placehold.it/3000x3000/b40">
<img src="http://placehold.it/3000x3000/cc7">
<img src="http://placehold.it/3000x3000/112">
<img src="http://placehold.it/3000x3000/113">
</div>
</body>
JSFIDDLE LINK
following to implement like this
https://fillinglife.co/
I have a slider with 3 images and 3 buttons which change the current image 'src' attribute (and hence change the current image), but now I want to add a smooth transition when I change the image and I would like to get this using css transitions.
So when I click on any bullet I need the current image fades out and then the new image fades in. how can I do this?
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
Here is a CODEPEN
PD: I want to do this without Jquery.
CodePen sample
I've added some css transitions to the css
div#image-container {
opacity:1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
div#image-container.fade {
opacity:0;
}
and some function to handle the event:
var image = document.getElementById('image-container');
if(image.className === 'fade'){
image.className = '';
setTimeout(function(){
image.className = 'fade';
},1000)
}else{
image.className = 'fade';
setTimeout(function(){
image.className = '';
},1000)
}
setTimeout(function(){
bulletNumber = index;
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
},1000);
use CSS3 animation with add class in javascript
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
for (i = 0; i < listItemContainer.children.length; i++) {
(function(index) {
listItemContainer.children[i].onclick = function() {
bulletNumber = index;
imageChanger[0].className = "hide";
setTimeout(function(){
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber + 1) + '.png');
},501);
setTimeout(function(){
imageChanger[0].className = "show";
}, 1001);
}
})(i);
};
body {
text-align: center;
}
#carousel-index {
margin: 0;
padding: 0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
#image-container img.show {
animation: show .5s;
animation-fill-mode: both;
}
#keyframes show {
from {
transform:scale(0.7);
opacity:0
}
to {
transform: scale(1);
opacity:1
}
}
#image-container img.hide {
animation: hide .5s;
animation-fill-mode: both;
}
#keyframes hide {
from {
transform:scale(1);
opacity:1
}
to {
transform:scale(0.7);
opacity:0
}
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png" />
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
You can use CSS transition, and i guess that desired property is opacity.
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
imageChanger[0].classList.add('fadeIn');
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].classList.remove('fadeIn');
setTimeout(function(){
imageChanger[0].classList.add('fadeIn');
} , 100);
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
Start image opacity should be 0, of course:
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
And then, on click (remove added class -> set opacity to 0 again), and add it again. You can play with values to get desired effect.
EDIT: fadeOut/fadeIn... it was little tricky, because of one container, and img src changing, but additional timeout solves it:
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
imageChanger[0].classList.add('fadeIn');
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].classList.remove('fadeIn');
imageChanger[0].classList.add('fadeOut');
setTimeout(function(){
imageChanger[0].classList.add('fadeIn');
imageChanger[0].classList.remove('fadeOut');
} , 1000);
setTimeout(function(){
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
} , 1000);
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
img.fadeOut {
opacity:0;
transition:opacity 0.5s ease;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
P.S. Images should be probably preloaded, in order to all work fine on first load.
One more alternative, JS based, didn't change HTML or CSS (explanation as comments in the code):
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img')[0];
var newSrc, fadeDelta=-0.01; //don't change 'delta', change 'fadeoutDelay' and 'fadeinDelay'
(function initImageChanger(i,count){
imageChanger.style.opacity = 1; //set opacity in JS, otherwise the value returns "" (empty)
listItemContainer.children[i].onclick = function(){
var fadeoutDelay=5, fadeinDelay=15, opacity=parseFloat(imageChanger.style.opacity); //change delays to alter fade-speed
function changeSrc(){
var src = imageChanger.getAttribute('src');
var ext = src.substring(src.lastIndexOf('.')); //store extension
src = src.substring(0,src.lastIndexOf('_')+1); //store source up to the identifying number
return src+i+ext; //combine parts into full source
}
function fade(delay){
imageChanger.style.opacity = (opacity+=fadeDelta);
if (fadeDelta<0 && opacity<=0){ //fade-out complete
imageChanger.setAttribute('src',newSrc);
fadeDelta*=-1, delay=fadeinDelay; //invert fade-direction
} else if (fadeDelta>0 && opacity>=1){newSrc=null, fadeDelta*=-1; return;} //fade-in complete, stop function
setTimeout(function(){fade(delay);},delay);
}
//start fade, but only if image isn't already fading, otherwise only change source (and reset)
if (changeSrc() != imageChanger.getAttribute('src')){
newSrc=changeSrc();
if (opacity==0 || opacity==1){fade(fadeoutDelay);}
else if (fadeDelta>0){fadeDelta *= -1;} //reset fade for new source
}
};
if (++i < count){initImageChanger(i,count);} //iterate to next element
})(0,listItemContainer.children.length); //supply start-arguments
body {text-align:center;}
#image-container img {width:auto; height:150px;}
#carousel-index {margin:0; padding:0;}
#carousel-index li {display:inline-block; width:2em; height:2em; border-radius:100%; background-color:#666; cursor:pointer;}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index"><li></li><li></li><li></li></ul>
</div>
codepen: http://codepen.io/anon/pen/xgwBre?editors=0010
It's not a perfect solution, but here's one way of doing it without jQuery:
First create a new function:
function fadeChange(element) {
var op = 0.1;
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 10);
}
Then call that function when setting the new image:
fadeChange(imageChanger[0]);
This is demonstrated through the updated codepen here.
It's a bit clunky, but does fade the images. You may want to consider using a single image for the monitor, and then simply changing the contents of the monitor through this method.
i'm trying to use this code to make an images slider, but the container is stuck to the first image and the jQuery slide dosen't work. I can't find the problem the code seems correct...
Script & CSS
<script type="text/javascript">
'use strict';
$(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
</script>
<style type="text/css">
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
/* helper css, since we don't have images */
.slide1 {background: red;}
.slide2 {background: blue;}
.slide3 {background: green;}
.slide4 {background: purple;}
.slide5 {background: pink;}
</style>
Here the HTML
<body>
<div id="container">
<div id="header">
<?php include ("includes/header.php") ?>
</div>
<div id="sidebar">
<?php include ("includes/sidebar.php") ?>
</div>
<div id="contentMaster">
<div class="container">
<div class="header">
</div>
<div id="slider">
<ul class="slides">
<li class="slide slide1">slide1</li>
<li class="slide slide2">slide2</li>
<li class="slide slide3">slide3</li>
<li class="slide slide4">slide4</li>
<li class="slide slide5">slide5</li>
<li class="slide slide1">slide1</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<?php include ("includes/footer.php") ?>
</div>
</div>
</body>
You can use $( document ).ready()
$(document).ready(function() {
//settings for slider
var width = 720;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});
I am working on this carousel.
I have the carousel moving the way i want now i am trying to add some controls below it, small buttons to link with the carousel images.
So whenever one is active corresponding carousel is active as well.
i am not sure why it is not working..
Any help
here is the code HTML
<div id="carousel">
<div class="clear"></div>
<div class="slider">
<li>
<img src="http://s3.amazonaws.com/contemporaryartgroup/wp-content/uploads/2012/02/HZ_GCC_VUE3.jpg">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_wMcqVx7UDxoNz7YGodjI7IkO7dLREESp0RHRHIGc9bsgGFTkYg">
</li>
<li>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRelq6Cmc_PV3FHGS4rzISfaL8FtjTAa0w1BXu3wR6GlDR7mLTiMw">
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRivHTJU30bZXeFRoyemfX5ZHrkd-iP9hAydsoZ9onvFE8cTcmS">
</li>
<div class="clear"></div>
</div>
</div>
<div class="buttons">
<li></li>
<li></li>
<li></li>
<li></li>
<div class="clear"></div>
</div>
jquery
$(document).ready(function () {
// settings
var $slider = $('.slider');
var $slide = 'li';
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds
var $btn = $('.buttons');
var $buttonanchor = 'li';
function slides() {
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
//set buttons
function button() {
return $btn.find($buttonanchor);
}
button().first().removeClass('btnnotactive');
button().first().addClass('btnactive');
button().first().fadeIn($transition_time);
$interval = setInterval(
function () {
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
var $j = $btn.find($buttonanchor + '.btnnotactive').index();
button().eq($j).removeClass('.btnactive');
if (button().length == $j + 1) $j = -1;
button().eq($j + 1).fadeIn($transition_time);
button().eq($j + 1).addClass('btnnotactive');
}
, $transition_time + $time_between_slides
);
});
CSS
<style type="text/css">
#carousel
{
min-width: 255px;
min-height: 290px;
margin: 0 auto;
}
.slider
{
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}
.slider li
{
display: none;
position: absolute;
top: 0;
left: 0;
list-style: none;
}
.buttons
{
/*padding:0 0 5px 0;*/
}
.buttons li
{
display: inline;
background-image: url("http://www.iconmay.com/thumbnails/detail/3/violet%20button%20violet%20dot%20circle%20blank%20empty%20violet%20button%20icon.png");
background-repeat:no-repeat;
}
.btnactive
{
background:url(http://www.iconmay.com/thumbnails/detail/3/green%20button%20green%20dot%20circle%20blank%20empty%20green%20button%20icon.png);
background-repeat:no-repeat;
}
here is the fiddle link
https://jsfiddle.net/wjstowL1/13/
I am trying to rotate the background image of a div with jquery. It works fine but the content within the div disappears when the image rotates. How can i prevent the content from disappering and make it such the it is always present:
Code:
jQuery(document).ready(function($) {
$(window).load(function() {
var i =0;
var images = ['http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png','http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png','http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png'];
var image = $('#slideit');
image.css('background-image', 'url(http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png)');
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
})
});
Fiddle HERE
You can make it like this http://jsfiddle.net/frzssoyw/3/
<div id="slideit">
<div id="slideit-bg"></div>
<div id="slideit-content">
some content
</div>
</div>
You can use position: absolute; on images.
I edited your JSFiddle using position: absolute;.
HTML:
<div id="slideit" style="width:700px;height:391px;">
<div class="slideit-content">some content</div>
<img class="img-rotate active" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png" />
<img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png" />
<img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png" />
</div>
CSS:
.img-rotate {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 391px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.img-rotate.active {
opacity: 1;
}
.slideit-content {
z-index: 10;
position: relative;
}
JS:
jQuery(function($) {
var i = 0,
image = $('#slideit'),
images = image.find(".img-rotate"),
images_count = images.length,
next_image;
setInterval(function(){
i = (i+1) % images_count;
next_image = images.eq(i);
images.filter(".active").removeClass("active");
next_image.addClass("active");
}, 5000);
});