adding fade to slide script? - javascript

I was wondering if someone could help me, is there a way to add fade betwene slides in this preticular script code? It targets buttons that changes images. Thanks upfront!
<script>
var slideIndex1 = 1;
showDivs1(slideIndex1);
function plusDivs1(n) {
showDivs1(slideIndex1 += n);
}
function showDivs1(n) {
var i;
var y = document.getElementsByClassName("mySlides1");
if (n > y.length) {
slideIndex1 = 1
}
if (n < 1) {
slideIndex1 = y.length
}
for (i = 0; i < y.length; i++) {
y[i].style.display = "none";
}
y[slideIndex1 - 1].style.display = "block";
}
</script>

I believe that what you are looking to achieve is a carousel (Bootstrap example)
Instead of applying display="none" to all these elements, if I were you I would toggle some CSS class which uses an animation or a transition .
You can learn more about CSS animations here (just an example of what you can achieve with vanilla CSS)
It can be tedious to create a working and responsive carousel, hence I would suggest you either to use a premade solution, or use an util library such as jQuery, which provides plenty of animations.

Related

Trying to automate a slideshow in javascript

Ive looked other questions similiar to my issue but ive been unable understand and resolve issue.
<script type="text/javascript">
var images = new Array();
images[0] = "http://ed-moore.net/html/assets/slideshow0.jpg";
images[1] = "http://ed-moore.net/html/assets/slideshow1.jpg";
images[2] = "http://ed-moore.net/html/assets/slideshow2.jpg";
images[3] = "http://ed-moore.net/html/assets/slideshow3.jpg";
var current = 0;
function changeImage(inc) {
current += inc;
document.getElementById("target").src = images[Math.abs(current)%images.length];
setTimeout("changeImage()",1000);
}
Either you haven't posted all of the relevant code, or you're missing something like:
changeImage(1);
To kick off your slideshow and get it started.
I would definitely not just use purely JavaScript for this. Try and make sure your html is where the content is housed, your CSS is where majority of styling is, and then use you JS to make the interactivity and movement. All that to say, kick the actual images out of there, leave them in html. Then create a class in CSS for showing the image, then a class for hiding. Then use you JavaScript to add/remove the classes.
Answer by Héctor Manuel Martinez Durán will solve the issue,
But if you still want to use pure Javascript, you can read my answer
1) Instead of using setTimeout, try to use setInterval (setTimeout will execute only once, but setInterval will execute until the page is closed)
2) You did not execute the function, you need to run the function with an argument inc
so the code will be:
var images = new Array();
images[0] = "http://ed-moore.net/html/assets/slideshow0.jpg";
images[1] = "http://ed-moore.net/html/assets/slideshow1.jpg";
images[2] = "http://ed-moore.net/html/assets/slideshow2.jpg";
images[3] = "http://ed-moore.net/html/assets/slideshow3.jpg";
var current = 0;
function changeImage(inc) {
current += inc;
document.getElementById("target").src = images[Math.abs(current)%images.length];
}
setInterval(function() {
changeImage(1);
}, 1000);
HTML Slideshow?
Well, look this https://www.w3schools.com/w3js/w3js_slideshow.asp
Use the Javascript library W3.JS
https://www.w3schools.com/w3js/default.asp
Or use pure JS
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}

Change backgroundImage with javascript for image slideshow.

I'm trying to change the background image of a div depending on it's id and then make a slideshow with a couple of images. I'm able to change the background with javascript but have a hard time figuring out why my loop doesn't work.
main.js
var spotlight = document.getElementById('spotlight');
var pics = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var totalPics = pics.length;
var i = 0;
function loop() {
if(i > (totalPics - 1)) {
i = 0;
}
spotlight.style.backgroundImage="url(/images/posts/'+pics[i]+')";
i++;
loopTimer = setTimeout('loop()',1000);
}
loop();
I'm using sass, but as javascript is client side this shouldn't work any different I guess? What am I doing wrong in my loop?
I have followed the basic principles found on w3Schools of changing the style with javascript and it works with a static image so my guess is that I have done something wrong in the loop.
Thanks
Change this:
spotlight.style.backgroundImage="url(/images/posts/" + pics[i]+ ")";
and
loopTimer = setTimeout(loop,1000);
See, if that helps.
Try changing your setTimeout to the following
loopTimer = setTimeout('loop', 1000);

I am trying to put a play button in my image gallery

I am trying to put a play button in my image gallery. I have a small pice of code that needs work,but my problem is getting the images to display one at a time. The code below brings up all the pictures at once. What I am wondering is if I can work this by classname or will I need to build an array and work from that.
This is the code that partialy works showing all at once. I think I am just missing something simple.
<script>
function slide_show() {
var slides = document.getElementsByClassName("s"),
i = slides.length;
for(i=0; i<15; i++) {
slides[i].style.visibility = "visible";
slides[i].style.transition="visibility 5s ease 5s"
}
}
</script>
Try using a setTimeout to delay the movement and add some opacity to make them fade in:
var count = 0;
function slide_show() {
var slides = document.getElementsByClassName("s"),
i = slides.length;
if (count < i) {
slides[count].style.visibility = "visible";
slides[count].style.opacity = "1";
slides[count].style.transition="opacity 5s ease 5s"
count++;
setTimeout(slide_show, 500);
}
}
slide_show();
By changing the opacity numbers or the setTimout numbers - you can get different fade effects. Check out this codepen to see it in action.
You can change your function a little bit so it waits for the animation to finish:
<script>
var index = 0;
function slide_show() {
var slides = document.getElementsByClassName("s");
if(index >= slides.length)
return;
slides[index].style.visibility = "visible";
slides[index].style.transition = "visibility 5s ease 5s";
setTimeout(slide_show, 10000); // Since it takes 10 seconds to finish your animation I put in 10000
index++;
}
}
</script>

JavaScript (jQuery) for-loop question

Hey all, I'm new to JavaScript and I'm using the jQuery library for this.
Basically I'm trying to create multiples of this line and I'm using ":eq(0) to do it.
The issue is that :eq(0) repeats 3 times in the code and with the loop that I'm doing every time it repeats it has a different number.
This is what I'm getting from it i think (:eq(0), :eq(1),:eq(2), :eq(3), etc..)
I need it to do this (:eq(0),:eq(0),:eq(0), :eq(1) :eq(1) :eq(1), etc...)
for (i = 0; i < 6; ++i) {
var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"><span>';
var $lieq = "li:eq("+i+")";
$("ul.side-block-content "+$lieq+"").mouseenter(function() {
$("ul.side-block-content "+$lieq+" .article-title a span")
.replaceWith($titleMarquee+$("ul.side-block-content "+$lieq+" .article-title a").text()+"</span></marquee>");
});
}
If anyone can let me know how to do this loop correctly, or maybe how to recreate the code for it to do the same thing that would be great.
Thanks in advance.
#Nick's answer:
var $titleMarquee = '<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate" loop="1"><span>';
for (i = 0; i < 6; ++i) {
for (j = 0; j < 7; ++j) {
$("ul.side-block-content li:eq("+i+")").mouseenter(function(){$("ul.side-block-content li:eq("+i+") .article-title a span").replaceWith($titleMarquee+$("ul.side-block-content li:eq("+i+") .article-title a").text()+"</span></marquee>");});
$("ul.side-block-content li:eq("+i+")").mouseleave(function(){$("ul.side-block-content li:eq("+i+") .article-title a marquee").replaceWith('<span>'+$("ul.side-block-content li:eq("+i+") .article-title a").text()+"</span>");});
}
}
This is what I'm using now and it's not working. Am I doing it correctly?
#Gilly3
$("ul.side-block-content li marquee").each(function() {
this.stop(); // prevent the marquee from scrolling initially
}).mouseenter(function() {
this.start(); // start the scroll onmouseenter
});
<marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate">
It looks like you are trying to make your <li> text scroll when you hover over it. Is that right?
Just put the marquee code in the original html and do this:
$(function ()
{
$("ul.side-block-content li marquee").each(function() {
this.stop(); // prevent the marquee from scrolling initially
}).mouseenter(function() {
this.start(); // start the scroll onmouseenter
});
});
I also want to say not to use the marquee tag since it is deprecated and to use a jQuery plugin instead, but the last jQuery marquee plugin I saw was actually using a <marquee> in the back end anyway. So... pfft.
You could embed another for loop inside, like so:
for (i = 0; i < 6; ++i) {
for (j = 0; j < 3; ++j) {
// repeat i three times, and use :eq("+i+")
}
}

fadeIn fadeOut effect with Raw javascript

I am currently working on a experiment with RAW Javascript. I was wondering why it is not working. In fact I have scratched my head until there is no hair left... :P.
I am making a table with TR elements to be hovered over with some Javascript event. I think you will know exactly what I mean if you look at the code. The point is to get stuff to fade out first and then fade in afterwards when it reaches zero.
I am a beginner and maybe this can be done with the existing code. But of course if it is possible in another way of programming, I am open for suggestions.
THE CODE:
window.onload = changeColor;
var tableCells = document.getElementsByTagName("td");
function changeColor() {
for(var i = 0; i < tableCells.length; i++) {
var tableCell = tableCells[i];
createMouseOutFunction(tableCell, i);
createMouseOverFunction(tableCell, i);
}
}
function createMouseOverFunction(tableCell, i) {
tableCell.onmouseover = function() {
tableCell.style.opacity = 1;
createMouseOutFunction(tableCell, i);
}
}
function createMouseOutFunction(tableCell, i) {
var OpacitySpeed = .03;
var intervalSpeed = 10;
tableCell.onmouseout = function() {
tableCell.style.opacity = 1;
var fadeOut = setInterval(function() {
if(tableCell.style.opacity > 0) {
tableCell.style.opacity -= OpacitySpeed;
} else if (tableCell.style.opacity <= 0) {
clearInterval(fadeOut);
}
}, intervalSpeed);
var fadeIn = setInterval(function(){
if(tableCell.style.opacity <= 0){
tableCell.style.opacity += OpacitySpeed;
} else if(tableCell.style.opacity == 1){
clearInterval(fadeIn);
}
}, intervalSpeed);
}
}
Here is working example of your code (with some corrections)
http://www.jsfiddle.net/gaby/yVKud/
corrections include
Start the fadein once the fadeout is completed (right after you clear the fadeout)
ues the parseFloat() method, because the code failed when it reached negative values.
remove the createMouseOutFunction(tableCell, i); from the createMouseOverFunction because you assign it in the initial loop.
I think you'll probably need to use the this keyword in some of your event binding functions. However I haven't myself got your code to work.
I would recommend using a library such as jQuery. In particular .animate will probably be of use here.

Categories