I am trying to do a slideshow with images that I insert.
I already can do the insert but I can´t fix the eliminate issue.
The issue is that when i delete an image the selected image is deleted but when I am going to delete another one I delete 2 images and then 3 images and 4 images...
$(document).ready(function() {
var p = 0;
//Check File API support
if (window.File && window.FileList && window.FileReader) {
$('#filePhoto').change(function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
var slides = document.getElementsByClassName("teste");
var column = document.getElementById("column");
var _i = 1;
var x = 0;
if (slides.length == 0) {
_i = 1;
} else {
_i = slides.length + 1;
}
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
// if(!file.type.match('image'))
if (file.type.match('image.*')) {
if (this.files[0].size < 2097152) {
// continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var divs = document.createElement("div");
divs.className = "teste";
$(divs).attr('id', _i);
if (slides.length == 0) {
divs.style.cssText = 'display:block;';
} else {
divs.style.cssText = 'display:none;';
}
divs.innerHTML = "<img class='thumbnail' id=" + (_i + 1) + "_img src='" + picFile.result + "'" +
"title='' />" + "<button class='eli' id='eliminar'><i class='remove icon'></i>x</button>"
output.insertBefore(divs, null);
plusSlides(+1);
var divs2 = document.createElement("div");
for (x = 1; x <= slides.length; x++) {
console.log(slides);
divs2.className = "column2";
$(divs2).attr('id', x + "_");
divs2.innerHTML = "<img class='demo' src='" + picFile.result + "'" +
"title='' onclick='currentSlide(" + x + ")'/>"
column.insertBefore(divs2, null);
}
_i++;
});
//Read the image
$('#clear, #result').show();
picReader.readAsDataURL(file);
} else {
alert("Image Size is too big. Minimum size is 2MB.");
$(this).val("");
}
} else {
alert("You can only upload image file.");
$(this).val("");
}
}
});
$('#eliminar').click(function() {
var a = $(this).parent().attr('id');
// alert(a);
$("#" + a).remove();
console.log($("#" + a));
$("#" + a + "_").remove();
plusSlides(-1);
var elms = $("#column");
var sd = $(".teste");
//console.log($(elms.children()).attr("id"));
$.each(elms.children(), function(k, v) {
$(v).attr("id", (k + 1) + "_");
$(v).attr("onclick", "currentSlide(" + (k + 1) + ")");
});
$.each(sd, function(k1, v1) {
$(v1).attr("id", k1 + 1);
});
});
} else {
console.log("Your browser does not support File API");
}
});
var slides = document.getElementsByClassName("teste");
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("teste");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if(slides.length!=''){
slides[slideIndex-1].style.display = "block";
}
if(slides.length>1){
$("#next").css("display", "block");
$("#prev").css("display", "block");
}else {
$("#next").css("display", "none");
$("#prev").css("display", "none");
}
}
.thumbnail{
width: 100%;
margin:0 auto !important;
float: left;
height:400px !important;
}
#clear{
display:none;
}
.result {
margin:0 auto;
float: left;
width: 100% !important;
position:relative;
overflow:hidden;
width:auto;
height:400px !important;
background:transparent;
border:2px dashed #e8e8e8;
cursor:pointer;
padding:5px;
color:#555;
z-index:3;
font-family:'Segoe UI';
font-weight:bold;
}
.eli{
color: black;
border:1px solid black;
background: none;
position: absolute;
top:30px;
right:5px;
outline: inherit;
margin-bottom: -10px !important;
z-index: 2000000;
}
.column2 {
float: left;
width: 25%;
}
.column {
left:0;
width:1200px;
}
.bstimeslider {
width:500px;
height:40px;
background:#ccc;
position:relative;
}
#leftArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
left:0px;
}
#rightArrow {
width:40px;
height:40px;
background:#ff0000;
position:absolute;
right:0px;
}
/* Next & previous buttons */
.prev,
.next {
display: none;
cursor: pointer;
position: absolute;
width: auto;
padding: 16px;
top:42%;
color: black;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select:none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.demo {
opacity: 0.6;
float: left;
width: 100% !important;
}
.active,
.demo:hover {
opacity: 1;
}
.blok{
display: block !important;
}
.nonee{
display: none!important;
}
.uploader {
position:relative;
overflow:hidden;
width:auto;
height:400px;
background:transparent;
border:2px dashed #e8e8e8;
cursor:pointer;
padding:5px;
color:#555;
z-index:3;
font-family:'Segoe UI';
font-weight:bold;
}
#filePhoto{
display:none;
}
.lol{
position:absolute;
width:100%;
height:402px;
top:-1px;
left:-1px;
border:none;
background-color: #eee;
}
.uploadd {
padding:10px !important;
margin-top:90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="uploadd">
<div id="uploader" class="uploader ">
<output id="result" class=" lol" />
<label for="filePhoto">
<span id="butao" class="circular ui icon button file-button"
style="position:absolute;top:43%;left:47%;margin-left:3.500
!important;border-radius:100%;background:#2185d0;">
<i style="margin:0 auto;text-align:center;font-size:24px;color:white;"
class="plus icon xa">Add</i>
</span>
</label>
<input class="file" type="file" name="filePhoto" id="filePhoto" multiple/>
<a class="prev" name="prev" id="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" name="next" id="next" onclick="plusSlides(1)">❯</a>
</div>
<output class="column" id="column" name="column" />
</div>
Related
I created a automatic slideshow by using html , css and javascript but the next/previous and dot buttons are not working. When I made them work , slideshow becomes unautomatic. I added buttons to its cshtml file so nothing's missing. CSS file works perfectly as well. What is missing in my code ? Any help will be appreciated.
Javascript Code
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) { slideIndex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
var responsiveSlider = function () {
var slider = document.getElementById("slider");
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById("slideWrap");
var count = 1;
var items = slideList.querySelectorAll("li").length;
var prev = document.getElementById("prev");
var next = document.getElementById("next");
window.addEventListener('resize', function () {
sliderWidth = slider.offsetWidth;
});
var prevSlide = function () {
if (count > 1) {
count = count - 2;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if (count = 1) {
count = items - 1;
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
};
var nextSlide = function () {
if (count < items) {
slideList.style.left = "-" + count * sliderWidth + "px";
count++;
}
else if (count = items) {
slideList.style.left = "0px";
count = 1;
}
};
next.addEventListener("click", function () {
nextSlide();
});
prev.addEventListener("click", function () {
prevSlide();
});
setInterval(function () {
nextSlide()
}, 5000);
};
window.onload = function () {
responsiveSlider();
}
#using SliderBannerProject.Model.Entity
#model List<Table_Slider>
#{
Layout = "~/Views/Shared/TestLayout.cshtml";
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="~/Content/mystyle.css" rel="stylesheet" />
<script defer src="~/Content/Script.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
#foreach (var item in Model)
{
<div class="mySlides w3-animate-fading">
<div class="numbertext">#item.ID</div>
<img src="#item.SliderPhoto" style="width:100%" />
<br />
<br />
<div class="text" id="text1" >#item.SliderInfo1</div>
<br />
<br />
<div class="text" id="update">
<p style="margin-bottom:-50px" >
<a href="/Test/UpdateInfo/#item.ID" id="update1">
Update Slider
</a>
</p>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
}
</div>
<br>
</body>
<!-- The dots/circles -->
<br />
<div style="text-align:center">
#foreach (var item in Model)
{
<span class="dot" onclick="currentSlide(#item.ID)"></span>
}
</div>
<br />
<div style="text-align:center">
Add New Slider Photo
</div>
</html>
* {
box-sizing: border-box
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
animation: slide 10s infinite;
}
.mySlides {
display: none;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 80vh;
transition: all .2s ease-in-out;
animation: slide 10s infinite;
}
#text1 {
font-size: 100px;
font-display:swap;
font-style:oblique;
color:gray;
}
#update {
background-color: transparent;
border: none;
color: black;
padding: 16px 32px;
text-align: center;
font-size: 25px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
#update1 {
color: black;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 5s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 4s;
animation: slide 10s infinite;
}
#keyframes fade {
from {
opacity: 10
}
to {
opacity: 10
}
}
let slideIndex = 1;
let i;
let slides = document.getElementsByClassName("slides");
let dots = document.getElementsByClassName("dot");
auto();
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
function auto() {
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
showSlides(slideIndex);
setTimeout(auto, 10000);
}
Try this i found that on youtube, here is the link.
I'm using a loading screen to cover my site (http://advancedriderwear.com/index.html) whilst it loads which is great, except it reaches 100% before my landing screen is loaded, and therefore the user still see's images loading, which isnt good!.
'
Here's the code I'm using:
;
(function() {
function id(v) {
return document.getElementById(v);
}
function loadbar() {
var ovrl = id("overlayLoad"),
prog = id("progress"),
stat = id("progstat"),
img = document.images,
c = 0,
tot = img.length;
if (tot == 0) return doneLoading();
function imgLoaded() {
c += 1;
var perc = ((100 / tot * c) << 0) + "%";
prog.style.width = perc;
stat.innerHTML = "Loading " + perc;
if (c === tot) return doneLoading();
}
function doneLoading() {
ovrl.style.opacity = 0;
setTimeout(function() {
ovrl.style.display = "none";
}, 5000);
}
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);
}());
Is this a correct method or is there an alternative to ensure the page is fully loaded before the main site is displayed.
The Loading screen is styled using:
.LoaderIcon{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
padding-top: 5%;
}
#overlayLoad{
position:fixed;
z-index:99999;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,1);
transition: 1s 0.4s;
display: block;
}
#progress{
height:2px;
background:#fff;
position:absolute;
width:0;
top:50%;
font-family: Magistral;
font-size: 1.5em;
}
#progstat{
letter-spacing: 3px;
position:absolute;
top:50%;
margin-top:-40px;
width:100%;
text-align:center;
color:#fff;
font-family: 'UniversLTW01-59UltCondensed';
font-size: 1.5em;
}
use window.load function instead of 'load' or 'DOMContentLoaded' events
and make sure you are loading css above the javascript
(function() {
function id(v) {
return document.getElementById(v);
}
function loadbar() {
var ovrl = id("overlayLoad"),
prog = id("progress"),
stat = id("progstat"),
img = document.images,
c = 0,
tot = img.length;
if (tot == 0) return doneLoading();
function imgLoaded() {
c += 1;
var perc = ((100 / tot * c) << 0) + "%";
prog.style.width = perc;
stat.innerHTML = "Loading " + perc;
if (c === tot) return doneLoading();
}
function doneLoading() {
ovrl.style.opacity = 0;
setTimeout(function() {
ovrl.style.display = "none";
}, 5000);
}
for (var i = 0; i < tot; i++) {
var tImg = new Image();
tImg.onload = imgLoaded;
tImg.onerror = imgLoaded;
tImg.src = img[i].src;
}
}
window.onload = loadbar()
}());
.LoaderIcon{
margin: auto;
display: flex;
align-items: center;
justify-content: center;
padding-top: 5%;
}
#overlayLoad{
position:fixed;
z-index:99999;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(0,0,0,1);
transition: 1s 0.4s;
display: block;
}
#progress{
height:2px;
background:#fff;
position:absolute;
width:0;
top:50%;
font-family: Magistral;
font-size: 1.5em;
}
#progstat{
letter-spacing: 3px;
position:absolute;
top:50%;
margin-top:-40px;
width:100%;
text-align:center;
color:#fff;
font-family: 'UniversLTW01-59UltCondensed';
font-size: 1.5em;
}
I have built a really simple carousel but there is one issue. In my carousel i have three slides, a previous button and a next button. What I want is when I click the next button and is on the last slide to go to the first slide. Moreover, when i click the previous button and is on the first slide to go to the last slide. How can i achieve it?
Thanks
//Main Container
var carouseContainer = document.querySelector("#carousel-container");
//Carousel Container
var carousel = document.querySelector("#carousel");
//Carousel Children
var carouselChildren = document.querySelector("#carousel").children;
//Carousel Slides
var carouselOne = document.querySelector("#carousel-one")
var carouseTwo = document.querySelector("#carousel-two")
var carouselThree = document.querySelector("#carousel-three")
//Buttons
var buttonPrev = document.querySelector("#button-left");
var buttonNext = document.querySelector("#button-right");
buttonNext.addEventListener("click", function(){
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform +="translateX(-300px)";
carouselChildren[i].style.transition +="all 2s ease";
}
});
buttonPrev.addEventListener("click", function(){
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform +="translateX(300px)";
carouselChildren[i].style.transition +="all 2s ease";
}
});
* {
margin:0px;
padding:0px;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
#carousel-container {
width:300px;
height:300px;
overflow: hidden;
margin: 0 auto;
border:1px solid black;
}
#carousel {
width:900px;
height:300px;
}
#carousel-one, #carousel-two,#carousel-three {
width:300px;
height:300px;
float:left;
}
#carousel-one {
background:red;
}
#carousel-two {
background:green;
}
#carousel-three {
background:blue;
}
#buttons {
text-align: center;
margin-top:20px;
}
button {
border:none;
color:#fff;
padding:10px 20px;
display: inline-block;
margin-right:20px;
cursor: pointer;
}
<div id="carousel-container">
<div id="carousel">
<div id="carousel-one">
<h1>Carousel One Main Heading</h1>
<h2>Carousel One Sub Heading</h2>
</div>
<div id="carousel-two"></div>
<div id="carousel-three"></div>
</div>
</div>
<div id="buttons">
<button id="button-left">Previous</button>
<button id="button-right">Next</button>
</div>
Here's a working example from your code:
//Main Container
var carouseContainer = document.querySelector("#carousel-container");
//Carousel Container
var carousel = document.querySelector("#carousel");
//Carousel Children
var carouselChildren = document.querySelector("#carousel").children;
//Carousel Slides
var carouselOne = document.querySelector("#carousel-one")
var carouseTwo = document.querySelector("#carousel-two")
var carouselThree = document.querySelector("#carousel-three")
//Buttons
var buttonPrev = document.querySelector("#button-left");
var buttonNext = document.querySelector("#button-right");
var current = 0,
total = 3;
function moveTo(count) {
var translate = 'translateX(' + (-300 * current) + 'px)';
for (i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform = translate;
}
}
buttonNext.addEventListener("click", function() {
current++;
if (current > total - 1) {
current = 0;
}
moveTo(current);
});
buttonPrev.addEventListener("click", function() {
current--;
if (current < 0) {
current = total - 1;
}
moveTo(current);
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
#carousel-container {
width: 300px;
height: 300px;
overflow: hidden;
margin: 0 auto;
border: 1px solid black;
}
#carousel {
width: 900px;
height: 300px;
}
#carousel-one,
#carousel-two,
#carousel-three {
width: 300px;
height: 300px;
float: left;
transition: all 2s ease;
}
#carousel-one {
background: red;
}
#carousel-two {
background: green;
}
#carousel-three {
background: blue;
}
#buttons {
text-align: center;
margin-top: 20px;
}
button {
border: none;
color: #fff;
padding: 10px 20px;
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
<div id="carousel-container">
<div id="carousel">
<div id="carousel-one" class="slide">
<h1>Carousel One Main Heading</h1>
<h2>Carousel One Sub Heading</h2>
</div>
<div id="carousel-two" class="slide"></div>
<div id="carousel-three" class="slide"></div>
</div>
</div>
<div id="buttons">
<button id="button-left">Previous</button>
<button id="button-right">Next</button>
</div>
This is an example, however, I think you can improve a lot your code :-) . Once I did a carousel and the magic was with the active class and the animation, I mean if you can apply the translate to the active class and identify the direction according to the prev or next button, you will achieve it.
//Main Container
var carouseContainer = document.querySelector("#carousel-container");
//Carousel Container
var carousel = document.querySelector("#carousel");
//Carousel Children
var carouselChildren = document.querySelector("#carousel").children;
//Carousel Slides
var carouselOne = document.querySelector("#carousel-one")
var carouseTwo = document.querySelector("#carousel-two")
var carouselThree = document.querySelector("#carousel-three")
//Buttons
var buttonPrev = document.querySelector("#button-left");
var buttonNext = document.querySelector("#button-right");
buttonNext.addEventListener("click", function(){
var activeSlide = 0,
translate = 'translateX(-300px)';
for ( i = 0; i < carouselChildren.length; i++) {
if (carouselChildren[i].className) {
activeSlide = i;
}
carouselChildren[i].style.transform += translate;
carouselChildren[i].style.transition +="all 2s ease";
}
// remove the active class for the current slide
carouselChildren[activeSlide].className = '';
if(activeSlide + 1 >= carouselChildren.length){
carouselChildren[0].className = 'active';
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform = 'translateX(0px)';
}
} else{
carouselChildren[++activeSlide].className = 'active';
}
});
buttonPrev.addEventListener("click", function(){
console.log(carouselChildren.length);
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform +="translateX(300px)";
carouselChildren[i].style.transition +="all 2s ease";
}
});
* {
margin:0px;
padding:0px;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
#carousel-container {
width:300px;
height:300px;
overflow: hidden;
margin: 0 auto;
border:1px solid black;
}
#carousel {
width:900px;
height:300px;
}
#carousel-one, #carousel-two,#carousel-three {
width:300px;
height:300px;
float:left;
}
#carousel-one {
background:red;
}
#carousel-two {
background:green;
}
#carousel-three {
background:blue;
}
#buttons {
text-align: center;
margin-top:20px;
}
button {
border:none;
color:#fff;
padding:10px 20px;
display: inline-block;
margin-right:20px;
cursor: pointer;
}
<div id="carousel-container">
<div id="carousel">
<div id="carousel-one" class="active">
<h1>Carousel One Main Heading</h1>
<h2>Carousel One Sub Heading</h2>
</div>
<div id="carousel-two"></div>
<div id="carousel-three"></div>
</div>
</div>
<div id="buttons">
<button id="button-left">Previous</button>
<button id="button-right">Next</button>
</div>
Use a variable to keep track of the current slide and change the transform property based on it. I have made the function for the next button and you can use the same concept for the previous button as well.
var currentSlide = 1; // is in first slide
buttonNext.addEventListener("click", function(){
if(currentSlide == 3){
currentSlide = 0;
}
for ( i = 0; i < carouselChildren.length; i++) {
carouselChildren[i].style.transform="translateX("+(currentSlide*-300)+"px)";
carouselChildren[i].style.transition ="all 2s ease"; // you don't need to do this as well if you define it in css file once
}
currentSlide++;
});
P.S. It's a bad practice to add transform property to existing css transform property like you did in your code as you are adding further calculations that needs to happen in order to animate (translate) the divs. Always replace them.
I have been trying to use this fading slideshow code that I have found from this website.. http://blog.crondesign.com/2012/01/free-javascript-for-rotating-website.html
My main problem is that my divs will not stack on top of each other and I have researched of different ways like z-indexing and position:absolute and none of them seem to work. Can someone please have a look at my code to see what isn't working!
HTML:
<div id="slideshow_container">
<div id="banner2" class="banner"></div>
<div id="banner3" class="banner"></div>
<div id="banner4" class="banner"></div>
<div id="banner5" class="banner"></div>
<div id="banner1" class="banner"></div>
</div>
CSS
#slideshow_container
{
height:486px;
width: 806px;
margin-top: 0%;
margin:auto;
background-color:green;
display:block;
}
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC
position: absolute;
}
#banner1
{
background:green;
z-index: 5;
}
#banner2
{
background: blue;
z-index:6;
}
#banner3
{
background:#F90;
}
#banner4
{
background:#FFC;
}
#banner5
{
background:#99CCFF;
}
#slideshow_container
{
height:486px;
width: 806px;
margin-top: 0%;
margin:auto;
background-color:green;
display:block;
}
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC
position: absolute;
}
#banner1
{
background:green;
z-index: 5;
}
#banner2
{
background: blue;
z-index:6;
}
#banner3
{
background:#F90;
}
#banner4
{
background:#FFC;
}
#banner5
{
background:#99CCFF;
}
Javascript
var imageCount = 5; //how many images in total?
var changeSpeed = 3; //how many seconds between fades?
var fadeSpeed = 0.5; //how many seconds should the fade take?
var fps = 25; //animation frames per second
//BANNER FUNCTIONS:
var topImgID
var changeInterval
function $(id)
{
return(document.getElementById(id));
}
function changeOpac(obj, opacity)
{
obj = obj.style;
obj.opacity = (opacity / 100);
obj.MozOpacity = (opacity / 100);
obj.KhtmlOpacity = (opacity / 100);
obj.filter = "alpha(opacity=" + opacity + ")";
}
function changeImage()
{
var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
var nextImg = $('banner'+nextImgID);
var lastImg = $('banner'+topImgID);
var opac = 0;
changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
lastImg.style.zIndex = 2;
nextImg.style.zIndex = 3;
var fadeInterval = setInterval(function()
{
if(opac < 100)
{
opac += Math.ceil(100/(fadeSpeed*fps));
changeOpac(nextImg, opac);
}
else
{
lastImg.style.zIndex = 1;
clearInterval(fadeInterval);
}
}, 1000/fps);
topImgID = nextImgID;
}
function startBanner(firstImageID)
{
topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
$('banner'+topImgID).style.zIndex = 2;
changeInterval = setInterval(changeImage, changeSpeed*1000);
}
you forgot to close your border styles, so position:absolute isn't being read:
.banner
{
z-index:1;
height:486px;
width:806px;
top:0px;
background:#FFF;
border:solid 1px #CCC <----------- missing ';'
position: absolute;
}
I'm a newbie when it comes to jQuery and I'm fiddling around with a slider of sorts that loads images from a array and posts the result to a div. The way I have it set up it loads the image tag and image source and places it to an empty div. Now any animations in jQuery that I've seen what work in conjunction with an array have been formatted much differently. I should mention that I'm not looking for elegant, but just code that works.
Basically, is it possible to incorporate transitions with the way I'm doing it now? And if so, how? Nothing fancy, just a fade or swipe effect.
jsFiddle so far
var imgArray =
['<img src="http://placehold.it/400x300/cf5">',
'<img src="http://placehold.it/400x300/555">',
'<img src="http://placehold.it/400x300/f0f">',
'<img src="http://placehold.it/400x300/05b">']
counter = -1;
$('#nextimage').click(function () {
counter = (counter + 1) % imgArray.length;
console.log(imgArray[counter]);
document.getElementById("result1").innerHTML = (imgArray[counter]);
});
$('#previmage').click(function () {
counter = (counter - 1);
console.log(imgArray[counter]);
document.getElementById("result1").innerHTML = (imgArray[counter]);
});
html
<div class="container">
<div class="slider_wrapper">
<div id="slider">
<div class="img-wrap">
<div id="result1"></div>
</div>
</div>
</div>
</div>
<div id="footer">
<img title="Previous Image" alt="prev image" src="https://dl.dropboxusercontent.com/u/65639888/image/prev.png">
<img title="Next Image" alt="next image" src="https://dl.dropboxusercontent.com/u/65639888/image/next.png">
</div>
css
body {
background-color:black;
}
.container{
padding:5px;
border:1px dashed black;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
background: black;
}
.slider_wrapper{
overflow:hidden;
position:relative;
max-width:100%;
height:auto;
top:auto;
border-style: dashed;
border-color: white;
}
#slider{
position: relative;
list-style: none;
overflow: hidden;
margin:0px;
border-style: solid;
border-color: green;
}
#slider img{
width: 100%;
height:auto;
position: relative;
float: left;
}
.nvgt{
position:absolute;
top: 0px;
height: 100%;
width: 50%;
opacity: 0;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
background: BLACK;
line-height: 2;
text-align: center;
color: #FFFFFF;
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #FFFFFF;
opacity: 0.1;
padding:0;
margin:0;
}
#footer img {
padding-top:10px;
padding-bottom: 5px;
padding-right:20px;
padding-left:20px;
height: 30px;
}
#footer:hover {
opacity: 1;
}
ul, menu, dir, html, body {
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
margin:0px;
}
The trick is to wait until the image has been loaded.
var imgArray =
['<img src="http://placehold.it/400x300/cf5">',
'<img src="http://placehold.it/400x300/555">',
'<img src="http://placehold.it/400x300/f0f">',
'<img src="http://placehold.it/400x300/05b">']
counter = -1;
function imgTransition() {
$('#result1').fadeOut(300, function() {
$('#result1').html(imgArray[counter]);
$('#result1 > img').on('load', function() {
$('#result1').fadeIn(500);
});
});
};
$('#nextimage').click(function () {
counter = (counter + 1) % imgArray.length;
console.log(imgArray[counter]);
imgTransition();
});
$('#previmage').click(function () {
counter = (counter - 1);
console.log(imgArray[counter]);
imgTransition();
});
JSFiddle
see jsfiddle
var imgArray =
['<img src="http://placehold.it/400x300/cf5">',
'<img src="http://placehold.it/400x300/555">',
'<img src="http://placehold.it/400x300/f0f">',
'<img src="http://placehold.it/400x300/05b">'],
counter = -1;
var animate = false; //stopping invalid click during animation
function animatable() {
$('#result1').slideUp(300, function() {
$('#result1').html(imgArray[counter]);
$('#result1 > img').on('load', function() {
//$('#result1').fadeIn(500);
$( '#result1' ).animate({
height: "toggle"
}, 1000 , function(){
animate = false;
});
});
});
};
function next(){
if(!animate){
animate = true;
counter = (counter + 1) % imgArray.length;
console.log(counter);
$("#result1").fadeIn().html(imgArray[counter]);
animatable();
}
};
next();
$('#nextimage').click(next);
$('#previmage').click(function () {
if(!animate){
animate = true;
if(counter=='0'){
counter= imgArray.length;
}
counter = (counter - 1);
console.log(imgArray[counter]);
$("#result1").html(imgArray[counter]);
animatable();
}
});
update with animatable
Previous and next button working properly with fade out effect
var imgArray = ['<img src="http://placehold.it/400x300/cf5">',
'<img src="http://placehold.it/400x300/555">',
'<img src="http://placehold.it/400x300/f0f">',
'<img src="http://placehold.it/400x300/05b">']
counter = -1;
function imgTransition() {
$('#result1').fadeOut(300, function() {
$('#result1').html(imgArray[counter]);
$('#result1 > img').on('load', function() {
$('#result1').fadeIn(500);
});
});
};
function next() {
counter = (counter + 1) % imgArray.length;
console.log(counter);
imgTransition();
};
next();
$('#nextimage').click(next);
$('#previmage').click(function() {
if (counter == '0') {
counter = imgArray.length;
}
counter = (counter - 1);
console.log(imgArray[counter]);
imgTransition();
});
JSFIIDLE