Is there a way to automatically change photos?

  • jrosworld
  • Newbie
  • Newbie
  • jrosworld
  • Posts: 10

Post 3+ Months Ago

I was wondering if it was possible to have photos on a page, automatically change to a different photo, say every 5 seconds, to add a bit of variety to a page... but I have no idea where to start. Can anyone help?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

You can accomplish this with javascript or Flash...or even an animated GIF if you wanted(not recommended).

Here's a simple tutorial with javascript
http://www.javascriptkit.com/howto/show.shtml
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

A basic, and maybe the easiest, way to do this is with Javascript.

If you look at a pages source code/HTML, I'll use the site in your signature as an example, you'll have an <img> element/tag for displaying an image.

For instance on your page there, you have this image

Image

And in your source you have this HTML that displays it.

Code: [ Select ]
<img src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />


Now in order to have Javascript work with this image, easily, we need to give the image an id attribute. Which will make the code look like this, assuming we give it an id of "jro_pic".

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />


Now that we can easily get a reference to the image in Javascript, we can alter the properties, including the "src" attribute, at runtime.

Let's assume we want to cycle through 2 images, and they're all in the "images" folder just like the one that's there now.

First we add a new script section under the image, like so,

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
 
//]]></script>
  1. <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
  2. <script type="text/javascript">//<![CDATA[
  3.  
  4. //]]></script>


Then we use a Javascript array to store the addresses of the 2 images.

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
//]]></script>
  1. <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
  2. <script type="text/javascript">//<![CDATA[
  3. var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
  4. //]]></script>


Now that we have a list of image addresses to use, we can add a javascript function that can be executed on a timer, and set the timer to every 5 seconds, or when it comes to Javascript, 5000 milliseconds.

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
var cycle_jro = function()
{
  //code here
}
var jro_cycling = setInterval(cycle_jro, 5000);
//]]></script>
  1. <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
  2. <script type="text/javascript">//<![CDATA[
  3. var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
  4. var cycle_jro = function()
  5. {
  6.   //code here
  7. }
  8. var jro_cycling = setInterval(cycle_jro, 5000);
  9. //]]></script>


At this point we just have an image we can reference, a list of images to use, and a timer that does something every 5 seconds.

Now if we make the following changes, it will actually start to look like something's happening, assuming we have valid images in the array.

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
var cycle_jro = function()
{
  var jimg = document.getElementById('jro_pic');
  var next_img = jro_images.shift();
  jimg.src = next_img;
  jro_images.push(next_img);
  return;
}
var jro_cycling = setInterval(cycle_jro, 5000);
//]]></script>
  1. <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
  2. <script type="text/javascript">//<![CDATA[
  3. var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
  4. var cycle_jro = function()
  5. {
  6.   var jimg = document.getElementById('jro_pic');
  7.   var next_img = jro_images.shift();
  8.   jimg.src = next_img;
  9.   jro_images.push(next_img);
  10.   return;
  11. }
  12. var jro_cycling = setInterval(cycle_jro, 5000);
  13. //]]></script>
  • wanna kill
  • Beginner
  • Beginner
  • User avatar
  • Posts: 36

Post 3+ Months Ago

thanks for the code. that is helpful.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 80 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.