Jump to content
Please Use CODE Tags

JavaScript Transition

robeng
By robeng
in Programming
 Share
Go to solution Solved by CrunchyBadger,

Hey! i have solved to problem.. please add this to your img tag 

class="bildFram"

and change your code to 

  var bilder = [""];
  var count = 1;

  function bildspel() {
		$(".bildFram").fadeOut(1000, function() {
			document.getElementById("bildFram").src = bilder[count];
			count++;
			if (count > (bilder.length-1)) {
				count = 0;
			}
			setTimeout(function(){ $(".bildFram").fadeIn(1000); }, 1000);
		});
  }

  setInterval("bildspel()",10000);

I put my own images in there, so please change back to yours.

Posted

Hi! We have a school project where we are going to create a website. There is a requirement that we shall have a picture that ever 10s or so switch to a new picture. I was able to make it happen with an easy JavaScript code, but it does not look so good. There is no transition between the pictures. I wonder if someone can help me fix so that there is a transition when a picture switch to another one!
Here is my javascript code: 

var bilder = ["img/nature1.jpg","img/nature2.jpg","img/nature3.jpg","img/nature4.jpg"];
var count = 0;

function bildspel() {
	document.getElementById("bildfram").src = bilder[count];
	count++;
	if (count > (bilder.length-1)) {
		count = 0;
	}
}

setInterval("bildspel()",10000);

Thanks in advance!

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You should be able to write a function to decrease the opacity of the image to make it fade out, then do the opposite to fade in. 

 

Edit- this would be done through CSS btw, make a script to change the class of the img. 

******If you paste in text into your post, please click the "remove formatting" button for night theme users.******

CPU- Intel 6700k OC to 4.69 Ghz GPU- NVidia Geforce GTX 970 (MSI) RAM- 16gb DDR4 2400 SSD-2x500gb samsung 850 EVO(SATA) Raid 0 HDD- 2tb Seagate Case- H440 Red w/ custom lighting Motherboard - MSI Z170 Gaming A OS- Windows 10 Mouse- Razer Naga Epic Chroma, Final Mouse 2016 turney proKeyboard- Corsair k70 Cherry MX brown

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, bgibbz said:

You should be able to write a function to decrease the opacity of the image to make it fade out, then do the opposite to fade in. 

 

Edit- this would be done through CSS btw, make a script to change the class of the img. 

Can you show some example good for that?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, CrunchyBadger said:

try using fadeIn and fadeOut

If i dont misstake myself, that is JQuery... witch we have not learned jet.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, CrunchyBadger said:

It is jQuery, are u not allowed to use it?

Yes I am. But I don't know how to use it correctly! Can you show me how?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

sure, u will first need to include it by adding this to your html code  

<script type="text/javascript" src="javascript/jquery-1.3.2.min.js">

I will make a script then add a reply with the jquery version.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, CrunchyBadger said:

sure, u will first need to include it by adding this to your html code  


<script type="text/javascript" src="javascript/jquery-1.3.2.min.js">

I will make a script then add a reply with the jquery version.

Alright! Can't I just link Google's CDN for JQuery? ( 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
7 minutes ago, robeng said:

Can you show some example good for that?

I'm on my phone, so I'm not gonna write any code, but this is the general idea-

 

http://stackoverflow.com/questions/30125705/css-how-to-make-an-element-fade-in-and-then-fade-out

******If you paste in text into your post, please click the "remove formatting" button for night theme users.******

CPU- Intel 6700k OC to 4.69 Ghz GPU- NVidia Geforce GTX 970 (MSI) RAM- 16gb DDR4 2400 SSD-2x500gb samsung 850 EVO(SATA) Raid 0 HDD- 2tb Seagate Case- H440 Red w/ custom lighting Motherboard - MSI Z170 Gaming A OS- Windows 10 Mouse- Razer Naga Epic Chroma, Final Mouse 2016 turney proKeyboard- Corsair k70 Cherry MX brown

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 
var bilder = ["img/nature1.jpg","img/nature2.jpg","img/nature3.jpg","img/nature4.jpg"];
var count = 0;

function bildspel() {
	$("bildFram").fadeOut(400, function() {
		document.getElementById("bildfram").src = bilder[count];
		count++;
		if (count > (bilder.length-1)) {
			count = 0;
		}
	}).fadeIn(400);
}

setInterval("bildspel()",10000);

try this.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Im sorry but no, i dont have an example on hand, although i can quickly make one and link it to u.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, CrunchyBadger said:

Im sorry but no, i dont have an example on hand, although i can quickly make one and link it to u.

So I can't link in Google's and only what you have sent me?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, CrunchyBadger said:

Also yes u can.

Ok! So my <head> looks like this now
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script/bildspel.js"></script>


is that correct? Because the picture wont swap.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, CrunchyBadger said:

yes, did u change your bild to the script i wrote?

Yes! My bildspel.js (JavaScript file) looks like this: 

var bilder = ["img/nature1.jpg","img/nature2.jpg","img/nature3.jpg","img/nature4.jpg"];
var count = 0;
function bildspel() {
    $("bildfram").fadeOut(400, function() {
        document.getElementById("bildfram").src = bilder[count];
        count++;
        if (count > (bilder.length-1)) {
            count = 0;
        }
    }).fadeIn(400);
}
setInterval("bildspel()",3000);
/*var bilder = ["img/nature1.jpg","img/nature2.jpg","img/nature3.jpg","img/nature4.jpg"];
var count = 0;
function bildspel() {
    document.getElementById("bildfram").src = bilder[count];
    count++;
    if (count > (bilder.length-1)) {
        count = 0;
    }
}
setInterval("bildspel()",10000);*/

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
4 minutes ago, CrunchyBadger said:

k, give me  a second ill try find the issue.

ok, thanks! 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

Hey! i have solved to problem.. please add this to your img tag 

class="bildFram"

and change your code to 

  var bilder = [""];
  var count = 1;

  function bildspel() {
		$(".bildFram").fadeOut(1000, function() {
			document.getElementById("bildFram").src = bilder[count];
			count++;
			if (count > (bilder.length-1)) {
				count = 0;
			}
			setTimeout(function(){ $(".bildFram").fadeIn(1000); }, 1000);
		});
  }

  setInterval("bildspel()",10000);

I put my own images in there, so please change back to yours.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, CrunchyBadger said:

var bilder = [""];

should that be empty?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
4 minutes ago, CrunchyBadger said:

Hey! i have solved to problem.. please add this to your img tag 


class="bildFram"

and change your code to 


  var bilder = [""];
  var count = 1;

  function bildspel() {
		$(".bildFram").fadeOut(1000, function() {
			document.getElementById("bildFram").src = bilder[count];
			count++;
			if (count > (bilder.length-1)) {
				count = 0;
			}
			setTimeout(function(){ $(".bildFram").fadeIn(1000); }, 1000);
		});
  }

  setInterval("bildspel()",10000);

I put my own images in there, so please change back to yours.

Nice! It sems to work! Is it posible to make it not fade directly to the next image insted of it fading to nothing and then fading in the new image?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, CrunchyBadger said:

Yea, you would have to create two img tags and overlay them though

Alright! Thanks for the help though!

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×