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;
}
Related
https://codepen.io/anon/pen/EOrRXo
This is my code so far. It just uses JS to generate a bunch of styled divs. I don't know how to input a picture instead of a string to fill in my divs. They all have values that I add up to generate each players' score to use bitwise "&" calculation to determine when someone has won. There's a play again button that works but it's broken for you because the image is local. Also it's extreme so it's spinning and I'm sorry if that annoys you.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EXTREME TIC TAC TOE</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body onload = "startGame();">
<h2 id="game-message"> Tic Tac Toe </h2>
<div id="game-board">
</div>
<div id="restartButton" >
<img src="img/lets-play.gif" id="button" onclick="restartGame();">
</div>
</body>
</html>
CSS
/* CSS */
* {margin: 0; padding: 0; user-select: none; text-transform: uppercase;}
body {background-image: url('../img/name.type'); }
h2#game-message
{
font-size: 60px;
font-family: Tahoma;
margin-bottom: 15px;
text-align: center;
}
div#game-board
{
overflow: hidden;
margin: 20px auto;
width:870px;
}
div[id^="row-"] {clear: both;}
div [id^="row-"] div
{
//border: 30px solid plum;
height: 270px;
width: 270px;
float: left;
text-align: center;
font-family: Tahoma;
font-size: 175px;
border-width: 15px;
border-style: solid;
border-image: url('../img/border.jpg') 25% repeat;
}
div#row-1 div {border-top: none;}
div#row-3 div {border-bottom: none;}
div[id^="row-"] div:first-child {border-left: none}
div[id^="row-"] div:last-child {border-right: none}
#button
{
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-width: 5px;
border-style: solid;
border-image: url('../img/borderr.png') 25% round;
}
#restartButton
{
position: absolute;
left: 880px;
top: 1075px;
}
#keyframes rotation
{
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#keyframes slide {
0% {left: 0;}
100% { left: 1500px;}
}
#game-board
{
position: relative;
}
JS
//JAVASCRIPT
var markers = ["X", "O"];
//var players = [];
var players = ["Max", "Dennis"];
var totals = [];
var winCodes = [7,56,73,84,146,273,292,448];
var whoseTurn = 0;
var gameOver = false;
var speed = [2, 2];
// Play again button
function restartGame()
{
startGame();
}
function startGame() // Choose your names, and display them in the header message.
{
// makes board spin initially
document.getElementById("game-board").style.animation = "rotation 4s infinite linear";
//players[0] = prompt("Player 1 NAME:");
//players[1] = prompt("Player 2 NAME:");
var counter = 1;
var innerDivs = "";
for (i = 1; i <=3; i++)
{
innerDivs += '<div id="row-' + i + '">';
for (j = 1; j <= 3; j++)
{
innerDivs += '<div onclick="playGame(this,' + counter + ');"></div>';
counter *= 2;
}
innerDivs += '</div>';
}
document.getElementById("game-board").innerHTML = innerDivs;
totals = [0, 0];
gameOver = false;
document.getElementById("game-message").innerText = "IT'S YOUR TURN " + players[whoseTurn];
}
function playGame(clickedDiv, divValue)
{
if (!gameOver)
{
// changes speed depending on how many turns each player has done
speed[whoseTurn]++;
document.getElementById("game-board").style.animation = "rotation "+ 8 / speed[whoseTurn] + "s infinite linear";
// Adds X or O depending on whoseTurn
clickedDiv.innerText = markers[whoseTurn];
// adds up total each time a player "moves" to track a win condition
totals[whoseTurn] += divValue;
// calls isWin() function to see if someone won
if (isWin())
{
document.getElementById("game-message").innerText = "WOW VERY COOL " + players[whoseTurn] + " YOU WON";
document.getElementById("game-board").style.animation = "slide 2s forwards, rotation "+ 8 / speed[whoseTurn] + "s infinite linear";
}
else if (gameOver)
{
document.getElementById("game-message").innerText = "YOU BOTH FAILED";
}
else
{
// Switches turn each click
if (whoseTurn) whoseTurn = 0; else whoseTurn = 1;
// disables onclick tag after clicked so it cannot be used >1 times.
clickedDiv.attributes["0"].nodeValue = "";
// Displays text for which turn it is
document.getElementById("game-message").innerText = "IT'S YOUR TURN " + players[whoseTurn];
}
}
}
// win code logic
function isWin()
{
for (i = 0; i < winCodes.length; i++)
{
if ((totals[whoseTurn] & winCodes[i]) == winCodes[i]) {gameOver = true; return true;}
}
if (totals[0] + totals[1] == 511) {gameOver = true;}
return false;
}
You can start by replacing the markers array with (or creating a new array, such as markerImages) image elements.
Then replace clickedDiv.innerText with clickedDiv.innerHTML.
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>
I am currently using this:
function logData(lid){
var dataWindow = window.open("analyze.php?id="+id,"Log Analysis",
"top=300,scrollbars=yes, left=300, width=800 ,height=500");
}
But this is opening a new browser, and in a mobile covers the original site
(an unwanted behaviour).
I want to know if there is a way to create a small window without
starting a new browser using JavaScript and jquery?
The most ridiculously basic one:
window.onload=function(){
document.body.onclick = function(e){
if(e.target && e.target.tagName === 'A')
{
var skip = {
'_blank':1,
'_top':1,
'_self':1,
'_parent':1,
'':1
},
elem = e.target;
if(!skip[elem.target])
{
var possible_iframes = document.getElementsByName(elem.target);
for(var i = 0, l = possible_iframes.length; i<l; i++)
{
if(possible_iframes[i].tagName === 'IFRAME')
{
e.preventDefault();
possible_iframes[i].parentNode.style.display = 'block';
possible_iframes[i].src = elem.href;
var possible_close = possible_iframes[i].parentNode.getElementsByTagName('a');
for(var j = 0, k = possible_close.length; j<k; j++)
{
if( possible_close[j].tagName === 'A' && possible_close[j].className.search(/\s*close\s*/) > -1 )
{
possible_close[j].onclick = function(){
this.parentNode.style.display = 'none';
};
break;
}
}
return true;
}
}
}
}
}
};
html,body{width:100%;height:100%;margin:0;padding:0;}
.popup {
display:none;
background:rgba(0,0,0,0.5);
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
}
.popup iframe{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
width:70%;
height:75%;
}
.popup a.close {
position: absolute;
top: 12.5%;
left: 85%;
z-index: 4;
border: 2px solid #FFF;
border-radius: 50%;
display: block;
width: 19px;
height: 19px;
background: black;
color: white;
text-align: center;
font-weight: bold;
text-decoration: none;
font-size: 16px;
}
<div class="popup"><a class="close" href="#">×</a><iframe id="popup" name="popup"></iframe></div>
test
This is not the perfect solution, since the href for each element must be set before the click.
But, if you generate the links on server-side, this will help a lot.
You may user iframe for this.
<iframe id="frame" src="" style="display:none" ></iframe>
javascript:
function logData(lid){
var frame = $("frame");
frame.src= "analyze.php?id="+id;
frame.style.display = "block"
}
Using necessary css styles make it appear like a popup.
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