13 Replies - 869 Views - Last Post: 20 April 2013 - 07:11 PM

#1 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

How to get a new image to load after timer finishes...

Posted 18 April 2013 - 01:58 AM

So I have a jquery countdown, and a box (for the image/s).

I would like a new image (from a folder) to appear in the box each time the countdown reaches 0.

Here is a snippet of my countdown clock:

$('#counter_2').countdown({
          image: 'img/digits.png',
          startTime: '60:00',
          timerEnd: function(){ alert('end!'); },
          format: 'hh:ss'
        });


So what would I need to do this, please and thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: How to get a new image to load after timer finishes...

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: How to get a new image to load after timer finishes...

Posted 18 April 2013 - 02:36 AM

Would you like a new <img> to appear with the existing <img> elments, or for an old <img> to display a new image?

In jQuery, you can create an element (like <img>) like so:
$("<img/>")
    .appendTo("#imageCotainer")
    .attr({
        "src": "path/to/image.png",
        "alt": "Image alt text"
    });



To change which image an existing <img> element shows, just change the value of the "src" attribute:
$("#myImage").attr("src", "path/to/new/image.png");


Was This Post Helpful? 0
  • +
  • -

#3 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: How to get a new image to load after timer finishes...

Posted 18 April 2013 - 03:57 AM

View PostAtli, on 18 April 2013 - 02:36 AM, said:

Would you like a new <img> to appear with the existing <img> elments, or for an old <img> to display a new image?

In jQuery, you can create an element (like <img>) like so:
$("<img/>")
    .appendTo("#imageCotainer")
    .attr({
        "src": "path/to/image.png",
        "alt": "Image alt text"
    });



To change which image an existing <img> element shows, just change the value of the "src" attribute:
$("#myImage").attr("src", "path/to/new/image.png");



Okay thanks!,

But is it possible to just keep this going on automatically; so instead of just changing once - it will continually keep changing forever, each time the timer has reached 0?
Was This Post Helpful? 0
  • +
  • -

#4 ChrisGulddahl  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 18
  • Joined: 17-April 13

Re: How to get a new image to load after timer finishes...

Posted 19 April 2013 - 01:08 AM

I'm assuming you're using David Walsh' plugin
By wrapping the code in a function and making recursive calls to the function itself in the callback you can restart it automatically.
I'm sure there are more elegant ways to accomplish this, but this quick code should do the trick.
			function startCountDown(){
				jQuery("#countdown").countDown({
					startNumber: 10,
					callBack: function(me) {
						// Replace picture here
						startCountDown(); // Restart countdown
					}
			});}
			startCountDown() // Call startCountDown

Was This Post Helpful? 0
  • +
  • -

#5 ChrisGulddahl  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 18
  • Joined: 17-April 13

Re: How to get a new image to load after timer finishes...

Posted 19 April 2013 - 01:18 AM

View PostChrisGulddahl, on 19 April 2013 - 09:08 AM, said:

I'm assuming you're using David Walsh' plugin

I guess maybe you're not using his plugin.
The same thing can be done with your code though (as shown below).
function startCountdown(){
	$('#counter_2').countdown({
			  image: 'img/digits.png',
			  startTime: '60:00',
			  timerEnd: function(){ /*Load new image here;*/ startCountdown() },
			  format: 'hh:ss'
			});}

startCountdown();


You'll need to post more code showing how your snippet works, before I can help you with replacing the image. Also explain where you would like to get the image URLs from - database? hardcoded array of URLs?
Was This Post Helpful? 1
  • +
  • -

#6 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: How to get a new image to load after timer finishes...

Posted 19 April 2013 - 02:05 AM

View PostChrisGulddahl, on 19 April 2013 - 09:08 AM, said:

You'll need to post more code showing how your snippet works, before I can help you with replacing the image. Also explain where you would like to get the image URLs from - database? hardcoded array of URLs?



Hey! Thanks for the reply - I got the code from 'https://code.google.com/p/jquery-countdown'.

This is all code it is using, although it is using a couple of files that I downloaded from the above site here

	<div id="counter_2">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
       
        $('#counter_2').countdown({
          image: 'img/digits.png',
          startTime: '60:00',
          timerEnd: function(){ alert('end!'); },
          format: 'hh:ss'
		  
		
		
        });
      });
    </script>


I would like the images to come from a folder I have created (which will eventually have a whole lot of pictures in it). P.S I have little to no knowledge of js/jQuery, so thanks so much for your help so far x
Was This Post Helpful? 0
  • +
  • -

#7 ChrisGulddahl  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 18
  • Joined: 17-April 13

Re: How to get a new image to load after timer finishes...

Posted 19 April 2013 - 09:22 AM

View Postelisa21, on 19 April 2013 - 10:05 AM, said:

Hey! Thanks for the reply - I got the code from 'https://code.google.com/p/jquery-countdown'.

This is all code it is using, although it is using a couple of files that I downloaded from the above site here

	<div id="counter_2">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      $(function(){
       
        $('#counter_2').countdown({
          image: 'img/digits.png',
          startTime: '60:00',
          timerEnd: function(){ alert('end!'); },
          format: 'hh:ss'
		  
		
		
        });
      });
    </script>


I would like the images to come from a folder I have created (which will eventually have a whole lot of pictures in it). P.S I have little to no knowledge of js/jQuery, so thanks so much for your help so far x


A slight modification of my previous solution is necessary. I have made a working script and tried explaining stuff in comments along the way.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/jquery.countdown.js" type="text/javascript" charset="UTF-8"></script>
		
		<script type="text/javascript">
			<!-- The ready() function will force the browser to run wait running the javascript until the entire page has loaded -->
			$(document).ready(function() {

			// The jquery code for constructing and starting the counter 
			// has been wrapped inside a function so we can call it whenever we want to
			function startCounter(imageLoader){
				$('#counter_2').countdown({
					 image: 'img/digits.png',
					 startTime: '00:03',
					 timerEnd: function(){ callback(imageLoader) },
					 format: 'mm:ss'
				})
			}
			
			// Takes care of whatever need to be done everytime 
			function callback(imageLoader){
				// Replace image
				
				$('#image').attr('src', imageLoader.nextImage());
				
				$('#counter_2').empty(); // Clear the finished counter, so a new can be constructed in its place
				startCounter(imageLoader); // Construct a new counter and starts it
			}
			
			function ImageLoader(images){
				this.images = images;
				this.current = 0;
				
				this.nextImage = function(){
					this.current = (this.current+1) % this.images.length;
					return this.images[this.current];;
				}
			}
			// Fill in images in this array
			imageLoader = new ImageLoader(['img/turd.png', 'img/guitar.gif', 'img/carrot.jpg', 'img/puppy.jpg']);
			
			startCounter(imageLoader); // Set everything off! (Construct a new counter and starts it)
			});
		</script>
		
		<style type="text/css">
			div.counter{
				font-size: 36px;
				font-weight: bold;
				line-height: 77px;
			}
		</style>
	</head>
	<body>
		<div id="counter_2" class="counter"></div>
		<img id="image" src="img/turd.png" alt="Hot steaming turd">
		
	</body>
</html>



With this solution you'll have to manually fill in all the images. If you want to automatically fill in the images based on some folder you'll have to get into a server-side language like php.
Another thing - how often do you want to change the image?
Was This Post Helpful? 1
  • +
  • -

#8 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: How to get a new image to load after timer finishes...

Posted 19 April 2013 - 06:00 PM

View PostChrisGulddahl, on 20 April 2013 - 02:22 AM, said:

With this solution you'll have to manually fill in all the images. If you want to automatically fill in the images based on some folder you'll have to get into a server-side language like php.
Another thing - how often do you want to change the image?




Ah! Wow thanks so much, it works perfectly! I want it to change the image every 60 minutes, but I'm assuming I can just change it like before, "60:00".

There's only one small problem - with the little ":" separating the counter in the middle, after the first time the counter finishes, the separator ":" disappears?

<style type="text/css">

           br { clear: both; }
			  div.counter {
				font-size: 54px;
				margin: 10px 7px;
				color:#FFF;
			  }
    

        </style>

Was This Post Helpful? 0
  • +
  • -

#9 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: How to get a new image to load after timer finishes...

Posted 19 April 2013 - 07:51 PM

Oh and one other thing, I wanted to ask!

You know how the timer restarts every time you refresh (guessing because the website is offline); if I published the website on the net, would the timer keep going (even if I'm off the page)? Or would I need to change something to do this.
Was This Post Helpful? 0
  • +
  • -

#10 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: How to get a new image to load after timer finishes...

Posted 19 April 2013 - 11:22 PM

Sorry for the triple posting, but I can't seem to find an edit post button??

Anyway, I wanted to ask another question (aha sorry). You know how I put the images in
 imageLoader = new ImageLoader(['img/turd.png', 'img/guitar.gif', 'img/carrot.jpg', 'img/puppy.jpg']);
Is it possible to randomize these images? I've done some googling and found some randomizer scripts (http://www.javascriptkit.com/script/cut118.shtml), but how would I implement them into this code?
Was This Post Helpful? 0
  • +
  • -

#11 ChrisGulddahl  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 18
  • Joined: 17-April 13

Re: How to get a new image to load after timer finishes...

Posted 20 April 2013 - 09:15 AM

View Postelisa21, on 20 April 2013 - 02:00 AM, said:

There's only one small problem - with the little ":" separating the counter in the middle, after the first time the counter finishes, the separator ":" disappears?

I can't seem to replicate this. Does this happen with the exact code that I provided? And which browser do you use?

View Postelisa21, on 20 April 2013 - 03:51 AM, said:

if I published the website on the net, would the timer keep going (even if I'm off the page)? Or would I need to change something to do this.

You would need to change something - it seems you're missing some basic information on the difference between javascript (client-side scripting)
and server-side scripting such as PHP and ASP. You should read up on this. Does your webhost support php?
You are going to need this (or an equivalent - I'll just say php from now on since it's the most popular choice and easy to learn), so if you don't know php you should read a beginner tutorial or two before continuing.

View Postelisa21, on 20 April 2013 - 07:22 AM, said:

Is it possible to randomize these images? I've done some googling and found some randomizer scripts (http://www.javascriptkit.com/script/cut118.shtml), but how would I implement them into this code?

Yes this is indeed possible. But since there's no way around using php I recommend doing this in php as well.
Really I would recommend you to start out by coding everything in php, since it's gonna be the backbone of the system (reading files from a folder and deciding which one to display based on the time. Javascript will only take care of displaying a countdown and refreshing the page when the counter finishes.
So to get you started

It should get you started and give you an idea of what can be done with php. In short php is executed at the server and the result is sent to the website-visitor, whereas javascript code is sent to the visitor and executed in his browser. Thus only php is able to read directly from a folder within the server.

When you've finished the tutorials you should be capable of coding a php script that automatically reads picture files from a directory on your web server and displays one of them. When you're done with this you can start worrying about how to change the picture every hour to a random other one.

I can help you along if needed.

Sorry for the wall of text ;)
- I hope it's not too discouraging
Was This Post Helpful? 0
  • +
  • -

#12 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: How to get a new image to load after timer finishes...

Posted 20 April 2013 - 03:12 PM

View PostChrisGulddahl, on 21 April 2013 - 03:15 AM, said:

Sorry for the wall of text ;)/>/>
- I hope it's not too discouraging


Okay yeah, I think I'll have a bit more detailed look into php thanks. (:


This counter divider is really annoying me (and pushing everything out of place), I can't actually find where the ":" is located (other than it's styling css code). I'm using Google chrome and the same problem happens in internet explorer. After the first time the counter countsdown - it will loose all its style and go really small and back to black.

I'm using the same code you provided, except I just modified the css a bit.

Before:
Posted Image


After:
Posted Image

Thanks!! x
Was This Post Helpful? 0
  • +
  • -

#13 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: How to get a new image to load after timer finishes...

Posted 20 April 2013 - 04:59 PM

OH. Never mind; I had the <style> in the body instead of the head. ;]
Was This Post Helpful? 0
  • +
  • -

#14 elisa21  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 12-April 13

Re: How to get a new image to load after timer finishes...

Posted 20 April 2013 - 07:11 PM

Okay so I've moved onto another page, and I wanted to use the code from the first page similarly. Except this time it'll be triggered by an onclick button ("older -> / <- newer picture") - instead of the countdown. Here's my design, to get an idea: Design.

So yeah I'm guessing I'll need four imageLoader? And would the code be something like this:

<script type="text/javascript">


<button onclick="function(){ callback(imageLoader) },">Click me</button>
	 
	 function callback(imageLoader){
		 
		 $('#image').attr('src', imageLoader.nextImage());
		 
		 function ImageLoader(images){

                this.images = images;

                this.current = 0;

                 

                this.nextImage = function(){

                    this.current = (this.current+1) % this.images.length;

                    return this.images[this.current];;

                }

            }

                       imageLoader = new ImageLoader(['img/wallpapers/20.jpg', 'img/wallpapers/22.jpg', 'img/wallpapers/21.jpg', 'img/wallpapers/25.jpg']);

		 
		 </script>
<img id="image" src="img/wallpapers/15.jpg">
<img id="image2" src="img/wallpapers/16.jpg">
<img id="image3" src="img/wallpapers/17.jpg">
<img id="image4" src="img/wallpapers/18.jpg">


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1