The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. July 22, 2019, 10:01:23 PM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: Image rotation  (Read 5329 times)
blake_jl
Rookie
**
Offline Offline

Posts: 12


View Profile
« on: January 31, 2008, 02:40:54 AM »

Hi everyone,

I was wondering if there is anyone here that has the time to help me with two scripts I need. It's probably very basic for you guys but very difficult for me.

I need to create to different types of image rotators for a website of mine.

1. The first randomly loads an image from the list on each pageload

2. The second is like a slideshow that goes through the list in order and the images fade in and out.

I have been searching the internet for script number 1 with no success. The second script I have found at dynamic drive but cant get it to work and it changes the images randomly.

Both scripts are used at (zymol.com/shop) but I cant even figure out how to grab them from there.

Any help appreciated.
Logged

No links in signatures please
manu`
Rookie
**
Offline Offline

Posts: 10



View Profile
« Reply #1 on: January 31, 2008, 03:12:00 AM »

This code should randomly show an image when your page loads.

Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
var imageSRC = new Array()

/* make an Array with the source to every Image you would like to use  */
imgSRC[0] = "img/image0.jpg";
imgSRC[1] = "img/image1.jpg";
imgSRC[2] = "img/image2.jpg";
imgSRC[3] = "img/image3.jpg";
imgSRC[4] = "img/image4.jpg";
imgSRC[5] = "img/image5.jpg";

function showRandomImage()
{
var randomnumber = Math.floor(Math.random()*6); /* generates a random number from 0 to 5, if you want to get a number between 0 and 100 just change the 6 to 1001 */
var imgTag = document.getElementById("randomImage");
imgTag.src = imgSRC[randomnumber];
}
</script>
</head>

<body onLoad="showRandomImage()">
<img src="img/image.jpg" id="randomImage">
</body>
</html>

If your images are all named image0.jpg, image1.jpg, image2.jpg, ... you can generate the array by using a for loop like:

Code:
for (var i = 0; i < 100, i++)
{
imgSRC[i] = "img/image"+i+".jpg"";
}
Logged

No links in signatures please
blake_jl
Rookie
**
Offline Offline

Posts: 12


View Profile
« Reply #2 on: January 31, 2008, 03:14:45 AM »

thanks a lot manu.

I will have a play around with that.

much appreciated.
Logged

No links in signatures please
DangerMouse
Expert
****
Offline Offline

Posts: 244



View Profile
« Reply #3 on: January 31, 2008, 03:28:24 AM »

I'd suggest a solution like the one found at http://smoothgallery.jondesign.net/ for your image rotation problem, looks pretty straightforward to implement.

As for randomly selecting an image to show, I'd tend to do this server side for slight accessibility gains, however in reality I'm sure the solution provided by manu would work equally as well.

DM
Logged
blake_jl
Rookie
**
Offline Offline

Posts: 12


View Profile
« Reply #4 on: January 31, 2008, 03:37:03 AM »

thanks Dangermouse. I will look at your solution also.

As far as the script provided by manu. I havent been successful. This is what I have

Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
var imageSRC = new Array()

/* make an Array with the source to every Image you would like to use  */
imgSRC[0] = "images/image-top1.gif";
imgSRC[1] = "images/image-top2.gif";
imgSRC[2] = "images/image-top3.gif";
imgSRC[3] = "images/image-top4.gif";
imgSRC[4] = "images/image-top5.gif";
imgSRC[5] = "images/image-top6.gif";

function showRandomImage()
{
var randomnumber = Math.floor(Math.random()*6); /* generates a random number from 0 to 5, if you want to get a number between 0 and 100 just change the 6 to 1001 */
var imgTag = document.getElementById("randomImage");
imgTag.src = imgSRC[randomnumber];
}
</script>
</head>
<body onLoad="showRandomImage()">
<img src="images/image-top.gif" id="randomImage">
</body>
</html>

The problem has to be to do with <img src="images/image-top.gif" id="randomImage"> I think I have done something wrong there.

I was not sure what to put in as the image src. I have 7 images. 1-6 are in the script in the header, and the 7th is in the tag here.

It just shows the image-top.gif image and doesnt change when refreshed.
Logged

No links in signatures please
manu`
Rookie
**
Offline Offline

Posts: 10



View Profile
« Reply #5 on: January 31, 2008, 04:08:39 AM »

sorry my fault, the array name differs from the variables  D'oh!

change var imageSRC = new Array() to var imgSRC = new Array() and it should work

Logged

No links in signatures please
blake_jl
Rookie
**
Offline Offline

Posts: 12


View Profile
« Reply #6 on: January 31, 2008, 04:39:21 AM »

Rock on!

That fixed it and works perfect.

Thanks a heap!
Logged

No links in signatures please
manu`
Rookie
**
Offline Offline

Posts: 10



View Profile
« Reply #7 on: February 01, 2008, 06:19:28 AM »

when you use an array for your numbers it couldn`t be 0

Code:
<html>
<script type="text/javascript" language="javascript">
function RollDice()
{
var randomnumber = Math.floor(Math.random()*6);
var numbers = new Array()

numbers[0] = 1;
numbers[1] = 2;
numbers[2] = 3;
numbers[3] = 4;
numbers[4] = 5;
numbers[5] = 6;

document.forms[0].dice.value = numbers[randomnumber];
}
</script>


<form name="yourname" method="get">
<input type="button" value="Roll A Die" onclick="RollDice()" >
<input type="text" name="dice" value="" readonly>
</form>
</html>
Logged

No links in signatures please
blake_jl
Rookie
**
Offline Offline

Posts: 12


View Profile
« Reply #8 on: February 01, 2008, 02:23:39 PM »

Sorry manu I didnt follow.

Have I made an error? It appears to be working fine...
Logged

No links in signatures please
arronlee
n00b
*
Offline Offline

Posts: 4


View Profile
« Reply #9 on: March 17, 2014, 08:40:06 PM »

Sorry manu I didnt follow.

Have I made an error? It appears to be working fine...
Hi, blake_jl.
I am not sure about whether you have made a mistake. Here are the code I used to
rotate images:
Code:
Private Sub button1_Click(sender As Object, e As EventArgs)
   Dim folderName As String = "c:/YGPic.bmp"

   Dim ygPic As YGPic = YGFolder.OpenImageFolder(New BMPReader)
   ImageManipulating.ApplyRotate(ygPic, 90)

   YGFolder.StoreImageFolder(ygPic, "c:/ygpic.bmp", New BMPCreator())
       
End Sub
Or you can refer to some professional imaging toolkits for help. Remember to check its free trial package first if possible. I hope you success. Good luck.



Best regards,
Arron
Logged

Best Regards,
Arron

Next Tomorrow is Another Day.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #10 on: March 18, 2014, 11:29:30 PM »

Nice, Aaron.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
Bompa
Administrator
Lifer
*****
Offline Offline

Posts: 564


Where does this show?


View Profile
« Reply #11 on: March 19, 2014, 04:21:24 AM »

Nice, Aaron.


I banned arron yesterday for hiding links with font color black.

I was just too lazy to deleted his posts.

See 'rotate images' and 'images toolkit'.

It's the latest fad.
Logged

"The most beautiful and profound emotion we can experience is the sensation of the mystical..." - Albert Einstein
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #12 on: March 20, 2014, 12:43:34 PM »

Heh. Thanks Bomps.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!