How do you Time and Rotate Images?

jerseygoat · 03-21-2006, 06:40 PM

I'm in dire need of help. What i'm trying to do is first rotate a set of images in the same spot, but also i am trying to time the images individually. For example Image1.gif would display for 10 seconds, Image2.gif for 15 seconds, and Image3.gif for 5 seconds. I would also like the images to display randomly in a continuous loop. Is this possible? Please Help. Any direction would be great. Thank you.

Tree · 03-21-2006, 06:56 PM

This is when I wish I knew more than just PHP :-/

Here's something I got off of Google

Code:

<!-- THREE STEPS TO INSTALL RANDOM IMAGE ROTATOR:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Robert Bui (astrogate@hotmail.com) -->
<!-- Web Site:  http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="rotateImage('rImage')">

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<center>
<img name="rImage" src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  2.29 KB -->

weblord · 03-21-2006, 07:14 PM

Originally Posted by Tree

This is when I wish I knew more than just PHP :-/

Here's something I got off of Google

Code:

<!-- THREE STEPS TO INSTALL RANDOM IMAGE ROTATOR:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Robert Bui (astrogate@hotmail.com) -->
<!-- Web Site:  http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Insert the onLoad event handler into your BODY tag  -->

<BODY OnLoad="rotateImage('rImage')">

<!-- STEP THREE: Copy this code into the BODY of your HTML document  -->

<center>
<img name="rImage" src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120 height=90>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

<!-- Script Size:  2.29 KB -->

wel this one's a good resource already. thanks too

Coolprogram · 03-21-2006, 07:21 PM

Here is one that i made, and I posted it in the codes sectiobn It doesn't turn the img it will switch between images put it on your site and watch it.

PHP Code:

  <?php

//Created by Coolprogram

?>

<style type="text/css">

 
.gallerycontroller{

width: 250px

 
height: 300px

}

 
</style>

 
<script type="text/javascript">

var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds)

var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form.

 
if (document.getElementById){

document.write('<style type="text/css">\n')

document.write('.gallerycontent{display:none;}\n')  

document.write('</style>\n')

}

 
var selectedDiv=0

var totalDivs=0

 
function getElementbyClass(classname){

partscollect=new Array()

var inc=0

var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*")

for (i=0; i<alltags.length; i++){

if (alltags[i].className==classname)

partscollect[inc++]=alltags[i]

}

}

 
function contractall(){

var inc=0

while (partscollect[inc]){

partscollect[inc].style.display="none"

inc++

}

}

 
function expandone(){

var selectedDivObj=partscollect[selectedDiv]

contractall()

selectedDivObj.style.display="block"

if (document.gallerycontrol)

temp.options[selectedDiv].selected=true

selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0

if (displaymode=="auto")

autocontrolvar=setTimeout("expandone()",tickspeed)

}

 
function populatemenu(){

temp=document.gallerycontrol.menu

for (m=temp.options.length-1;m>0;m--)

temp.options[m]=null

for (i=0;i<totalDivs;i++){

var thesubject=partscollect[i].getAttribute("subject")

thesubject=(thesubject=="" || thesubject==null)? "paintball "+(i+1) : thesubject

temp.options[i]=new Option(thesubject,"")

}

????: NamePros.com http://www.namepros.com/programming/179280-how-do-you-time-rotate-images.html
temp.options[0].selected=true

}

 
function manualcontrol(menuobj){

if (displaymode=="manual"){

selectedDiv=menuobj

expandone()

}

}

 
function preparemode(themode){

displaymode=themode

if (typeof autocontrolvar!="undefined")

clearTimeout(autocontrolvar)

if (themode=="auto"){

document.gallerycontrol.menu.disabled=true

autocontrolvar=setTimeout("expandone()",tickspeed)

}

else

document.gallerycontrol.menu.disabled=false

}

 
function startgallery(){

if (document.getElementById("controldiv")) //if it exists

document.getElementById("controldiv").style.display="block"

getElementbyClass("gallerycontent")

totalDivs=partscollect.length

if (document.gallerycontrol){

populatemenu()

if (document.gallerycontrol.mode){

for (i=0; i<document.gallerycontrol.mode.length; i++){

????: NamePros.com http://www.namepros.com/showthread.php?t=179280
if (document.gallerycontrol.mode[i].checked)

displaymode=document.gallerycontrol.mode[i].value

 
}

}

}

if (displaymode=="auto" && document.gallerycontrol)

document.gallerycontrol.menu.disabled=true

expandone()

}

 
if (window.addEventListener)

window.addEventListener("load", startgallery, false)

else if (window.attachEvent)

window.attachEvent("onload", startgallery)

else if (document.getElementById)

window.onload=startgallery

 
</script>

 
<div class="gallerycontent">

<img src="logo.PNG">

</div>

 
<div class="gallerycontent">

<img src="untitled.bmp">

</div>

 
<div class="gallerycontent">

<img src="cool.bmp">

</div>

 
<!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired -->

<br>

 
Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')">

</form>

</div>

There you go
-CP

Noobie · 03-21-2006, 09:03 PM

http://www.dynamicdrive.com/dynamici...allery_dev.htm

03-21-2006, 06:40 PM	THREAD STARTER #1 (permalink)
jerseygoat New Member Join Date: Mar 2006 Posts: 4	How do you Time and Rotate Images? I'm in dire need of help. What i'm trying to do is first rotate a set of images in the same spot, but also i am trying to time the images individually. For example Image1.gif would display for 10 seconds, Image2.gif for 15 seconds, and Image3.gif for 5 seconds. I would also like the images to display randomly in a continuous loop. Is this possible? Please Help. Any direction would be great. Thank you.

03-21-2006, 09:03 PM	#5 (permalink)
Noobie NamePros Regular Join Date: Feb 2006 Location: Montreal, Quebec, Canada Posts: 324	http://www.dynamicdrive.com/dynamici...allery_dev.htm __________________ Goldkey.com is a scam What's your BMI? \| Timestamp Generator

03-21-2006, 07:21 PM	#4 (permalink)
Coolprogram NamePros Regular Join Date: Jul 2005 Location: U.S.A. Posts: 655	Here is one that i made, and I posted it in the codes sectiobn It doesn't turn the img it will switch between images put it on your site and watch it. PHP Code: <?php //Created by Coolprogram ?> <style type="text/css"> .gallerycontroller{ width: 250px height: 300px } </style> <script type="text/javascript"> var tickspeed=3000 //ticker speed in miliseconds (2000=2 seconds) var displaymode="auto" //displaymode ("auto" or "manual"). No need to modify as form at the bottom will control it, unless you wish to remove form. if (document.getElementById){ document.write('<style type="text/css">\n') document.write('.gallerycontent{display:none;}\n') document.write('</style>\n') } var selectedDiv=0 var totalDivs=0 function getElementbyClass(classname){ partscollect=new Array() var inc=0 var alltags=document.all? document.all.tags("DIV") : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) partscollect[inc++]=alltags[i] } } function contractall(){ var inc=0 while (partscollect[inc]){ partscollect[inc].style.display="none" inc++ } } function expandone(){ var selectedDivObj=partscollect[selectedDiv] contractall() selectedDivObj.style.display="block" if (document.gallerycontrol) temp.options[selectedDiv].selected=true selectedDiv=(selectedDiv<totalDivs-1)? selectedDiv+1 : 0 if (displaymode=="auto") autocontrolvar=setTimeout("expandone()",tickspeed) } function populatemenu(){ temp=document.gallerycontrol.menu for (m=temp.options.length-1;m>0;m--) temp.options[m]=null for (i=0;i<totalDivs;i++){ var thesubject=partscollect[i].getAttribute("subject") thesubject=(thesubject=="" \|\| thesubject==null)? "paintball "+(i+1) : thesubject temp.options[i]=new Option(thesubject,"") } ????: NamePros.com http://www.namepros.com/programming/179280-how-do-you-time-rotate-images.html temp.options[0].selected=true } function manualcontrol(menuobj){ if (displaymode=="manual"){ selectedDiv=menuobj expandone() } } function preparemode(themode){ displaymode=themode if (typeof autocontrolvar!="undefined") clearTimeout(autocontrolvar) if (themode=="auto"){ document.gallerycontrol.menu.disabled=true autocontrolvar=setTimeout("expandone()",tickspeed) } else document.gallerycontrol.menu.disabled=false } function startgallery(){ if (document.getElementById("controldiv")) //if it exists document.getElementById("controldiv").style.display="block" getElementbyClass("gallerycontent") totalDivs=partscollect.length if (document.gallerycontrol){ populatemenu() if (document.gallerycontrol.mode){ for (i=0; i<document.gallerycontrol.mode.length; i++){ ????: NamePros.com http://www.namepros.com/showthread.php?t=179280 if (document.gallerycontrol.mode[i].checked) displaymode=document.gallerycontrol.mode[i].value } } } if (displaymode=="auto" && document.gallerycontrol) document.gallerycontrol.menu.disabled=true expandone() } if (window.addEventListener) window.addEventListener("load", startgallery, false) else if (window.attachEvent) window.attachEvent("onload", startgallery) else if (document.getElementById) window.onload=startgallery </script> <div class="gallerycontent"> <img src="logo.PNG"> </div> <div class="gallerycontent"> <img src="untitled.bmp"> </div> <div class="gallerycontent"> <img src="cool.bmp"> </div> <!--HTML for gallery control options below. Remove checkboxes or entire outer DIV if desired --> <br> Auto: <input type="radio" checked name="mode" value="auto" onClick="preparemode('auto')"> </form> </div> There you go -CP

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)