[advanced search]
 

Go Back   NamePros.com > Discussion > Web Design & Development > Programming
Reload this Page How do you Time and Rotate Images?
Register Forum Rules FAQ Mark Forums Read

Programming PHP, Perl, Ruby on Rails, AJAX, HTML, XHTML, CSS, JavaScript, MySQL and any other coding topics.


Closed Thread
 
LinkBack Thread Tools
Old 03-21-2006, 05:40 PM   #1 (permalink)
New Member
 
Join Date: Mar 2006
Posts: 4
0.00 NP$ (Donate)

jerseygoat is an unknown quantity at this point
Arrow 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.
jerseygoat is offline  
Old 03-21-2006, 05:56 PM   #2 (permalink)
NamePros Regular
 
Tree's Avatar
 
Join Date: Feb 2006
Location: Atlanta, GA, USA
Posts: 335
13.25 NP$ (Donate)

Tree will become famous soon enoughTree will become famous soon enough
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 -->
Tree is offline  
Old 03-21-2006, 06:14 PM   #3 (permalink)
NamePros Legend
 
weblord's Avatar
 
Join Date: Dec 2005
Location: Philippines - www.Nabaza.com
Posts: 19,840
21,700.43 NP$ (Donate)

weblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatnessweblord Has achieved greatness

Autism Protect Our Planet
Quote:
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
weblord is offline  
Old 03-21-2006, 06:21 PM   #4 (permalink)
NamePros Regular
 
Join Date: Jul 2005
Location: U.S.A.
Posts: 655
0.00 NP$ (Donate)

Coolprogram has a spectacular aura aboutCoolprogram has a spectacular aura about
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,"")
}
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++){
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
Coolprogram is offline  
Old 03-21-2006, 08:03 PM   #5 (permalink)
NamePros Regular
 
Noobie's Avatar
 
Join Date: Feb 2006
Location: Montreal, Quebec, Canada
Posts: 324
66.75 NP$ (Donate)

Noobie is on a distinguished road
http://www.dynamicdrive.com/dynamici...allery_dev.htm
__________________
Goldkey.com is a scam
What's your BMI? | Timestamp Generator
Noobie is offline  
Closed Thread

« Urgent: xoops help | [JS & PHP] encoding and decoding a URL? »

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

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Site Sponsors
Advertise your business at NamePros

All times are GMT -7. The time now is 12:05 PM.

Contact Us - NamePros.com - Archive - Privacy Statement - Top

Powered by: vBulletin® Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
Template-Modifications by TMS
vBCredits v1.4 Copyright ©2007 - 2008, PixelFX Studios

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85