Javascript Question

SpaceshipSpaceship
Namecheap AuctionsNamecheap Auctions
Spacemail by SpaceshipSpacemail by Spaceship
Watch

travinb

Established Member
Impact
1
Hi,

I wanted to know how to make an image rotator (with links) through javascript..is it possible to make one?

Basically every time the page is refreshed I want a new image with its link to come in the others place..

In the hope that I am not asking for too much..and looking for some really helpful tips...

thanks..
 
0
Close
The views expressed on this page by users and staff are their own, not those of NamePros.
GoDaddyGoDaddy
I don't know much about JS, but it is possible in PHP and actually better.

PHP:
<?php

$imageList = array("pic1", "pic2", "pic3", "pic4");

echo '<img src="'.$imageList[array_rand($imageList)].'">';

?>

This takes a random picture from the array. Just change the filenames under pic1, pic2, pic3, pic4.



PHP:
<?php

$extAllowed = array("jpg", "gif", "png", "JPG", "GIF", "PNG");

$imageDir = 'img/';

$dirConn = opendir($imageDir);
while ($file = readdir($dirConn)) {
 	$ext = explode(".", $file);
	if (in_array($ext[1], $extAllowed)) {
		$imageList[] = $file;
	}
}
closedir($imageDir);

echo '<img src="'.$imageDir.'/'.$imageList[array_rand($imageList)].'">';

?>

This one takes a random file from a directory. Just change the $imageDir variable to the folder that has your pictures.


Of course, these files are all shown randomly and not in any order. If you needed to do this in order, you would need to have some kind of counter in either a file or database keeping track of what picture was shown last.
 
0
Close
Thanks Derek...
I wouldn't need a counter and random images are just fine...
My only issue is will I be able to hyperlink the images?
Is there someway that can be added to the picture..

Thanks for the help.. this is really cool though perhaps not what I am looking for...

or else is there anyway I can rotate php files instead of images.. I can then include the images with their links to within those files.. as in ad1.php, ad2.php instead of pic1 pic2...
 
0
Close
PHP:
<?php

$extAllowed = array("jpg", "gif", "png", "JPG", "GIF", "PNG"); // this is the list of recognised file extensions (without the .)

$imageDir = 'img/'; // the folder in which all the images are

$dirConn = opendir($imageDir);
while ($file = readdir($dirConn)) {
     $ext = explode(".", $file);
    if (in_array($ext[1], $extAllowed)) { // checking if the loaded file's extension is in the list of allowed extensions
        $imageList[] = $file;
    }
}
closedir($imageDir);

echo '<img src="'.$imageDir.'/'.$imageList[array_rand($imageList)].'">'; // display the image on the page.

?>
That is it commented slightly to help you understand.

To rotate php files, merely change
PHP:
$extAllowed = array("jpg", "gif", "png", "JPG", "GIF", "PNG");
AND
echo '<img src="'.$imageDir.'/'.$imageList[array_rand($imageList)].'">';
to
PHP:
$extAllowed = array("PHP");
AND
include $imageList[array_rand($imageList)];
If this is the case, you might want to rename some of the variables appropriately.

Joe
 
Last edited:
0
Close
PHP:
<?php

/**
 * Danltn | http://danltn.com
 * No warranty is given to code used
 */

$imgs = array(
"pic1.gif" => "http://google.com",
"pic2.gif" => "http://msn.com",
"pic3.gif" => "http://example.com",
);

$image = array_rand($imgs);
$url = $imgs[$image];

echo "<a href='$url'><img src='$image' border='0'></a>";

?>
 
0
Close
Thanks guys..this is great
will surely work with these now.. and will get back to you on this..
 
0
Close
No problem travinb. You got it perfect Danltn. Thanks for the assist.
 
0
Close
since you want javascript
http://free-javascript.blogspot.com/2007/05/bannerimage-rotator.html

travinb said:
Hi,

I wanted to know how to make an image rotator (with links) through javascript..is it possible to make one?

Basically every time the page is refreshed I want a new image with its link to come in the others place..

In the hope that I am not asking for too much..and looking for some really helpful tips...

thanks..
 
0
Close
AIVikingsAIVikings

We're social

Escrow.com
Spaceship
Domain Recover
CryptoExchange.com

NamePros updates

Switch between accounts
You can now stay logged in to more than one NamePros account in the same browser. Click your avatar, then "Accounts in this browser", to...
AIVikings
Catchy
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back