Javascript Question

travinb · 11-20-2007, 09:42 AM

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..

Palyriot · 11-20-2007, 11:12 AM

I don't know much about JS, but it is possible in PHP and actually better.

PHP Code:

  <?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 Code:

  <?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.

travinb · 11-21-2007, 06:32 AM

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...

Joe · 11-21-2007, 08:37 AM

PHP Code:

  <?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 Code:

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

AND

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

to

PHP Code:

  $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

Daniel · 11-21-2007, 11:32 AM

PHP Code:

  <?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>";

 
?>

travinb · 11-21-2007, 08:55 PM

Thanks guys..this is great
will surely work with these now.. and will get back to you on this..

Palyriot · 11-21-2007, 10:52 PM

No problem travinb. You got it perfect Danltn. Thanks for the assist.

weblord · 11-21-2007, 11:01 PM

since you want javascript
http://free-javascript.blogspot.com/...e-rotator.html

Quote:

Originally Posted by travinb

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..

11-20-2007, 09:42 AM	#1 (permalink)
travinb NamePros Member Join Date: Aug 2007 Posts: 75 50.00 NP$ (Donate)	Javascript Question 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.. __________________ The Unneglectable Blog\| FinanceJargon.com \|NasCarSchedule.Info \|financeadvisor.co.in\| budgethotelsbeijing.com \| researchelp.com

11-20-2007, 11:12 AM	#2 (permalink)
Palyriot NamePros Regular Join Date: Jul 2004 Location: Seattle, Wa Posts: 596 76.25 NP$ (Donate)	I don't know much about JS, but it is possible in PHP and actually better. PHP Code: `<?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 Code: `<?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.

11-21-2007, 06:32 AM	#3 (permalink)
travinb NamePros Member Join Date: Aug 2007 Posts: 75 50.00 NP$ (Donate)	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... __________________ The Unneglectable Blog\| FinanceJargon.com \|NasCarSchedule.Info \|financeadvisor.co.in\| budgethotelsbeijing.com \| researchelp.com

11-21-2007, 08:37 AM	#4 (permalink)
Joe Senior Member Join Date: Oct 2005 Location: Kent ~ U.K. Posts: 3,246 88.85 NP$ (Donate)	PHP Code: <?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 Code: `$extAllowed = array("jpg", "gif", "png", "JPG", "GIF", "PNG"); AND echo '<img src="'.$imageDir.'/'.$imageList[array_rand($imageList)].'">';` to PHP Code: `$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 __________________ Fused Hosting Simplicity and Superiority. █████████████████████████████████████████████ Affordable web hosting solutions; shared, reseller, shoutcast, WHMSonic, proxy, dedicated and more! My computer is broken; new components have been ordered. Last edited by TheArbiter; 11-21-2007 at 09:10 AM. Reason: typo

11-21-2007, 11:32 AM	#5 (permalink)
Daniel Danltn.com Join Date: May 2007 Location: Danltn.com / Nottingham, UK Posts: 1,201 13.51 NP$ (Donate)	PHP Code: `<?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>"; ?>` __________________ VERY CHEAP ADVANCED* BULK DOMAIN-STATISTICS LOOKUP** Danltn's Blog - Daniel Neville's Site Spoof your links! Submit your blog NOW! Putting bloggers on the map!

11-21-2007, 08:55 PM	#6 (permalink)
travinb NamePros Member Join Date: Aug 2007 Posts: 75 50.00 NP$ (Donate)	Thanks guys..this is great will surely work with these now.. and will get back to you on this.. __________________ The Unneglectable Blog\| FinanceJargon.com \|NasCarSchedule.Info \|financeadvisor.co.in\| budgethotelsbeijing.com \| researchelp.com

11-21-2007, 10:52 PM	#7 (permalink)
Palyriot NamePros Regular Join Date: Jul 2004 Location: Seattle, Wa Posts: 596 76.25 NP$ (Donate)	No problem travinb. You got it perfect Danltn. Thanks for the assist.

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