Random image on front page

M

Mike Hoyer

Messages
764
Edit My Images
No
I'm looking to update my website, as I haven't done anything to it for over a year. I don't really have the skill to change it much, so I will keep it basically as is, but get rid of some of the excess rubbish.

I work for an agency, so I don't really need the sales, press access, terms and conditions etc., so I will get rid of these, and just use it as a portfolio more than anything.

However, one thing I would like to do is have a randomly changing picture on the home page, instead of the rambling about me, which can go in the about me section. Is this easy to do, and how do I do it? Cheers!
 
You can do 2 things really:

1. Rotating selection of images that randomly changes whilst a user is on a page

OR

2. Different image everytime a page is loaded (as on my webby)

Both are relatively simple and I'm sure some of the boffins here will give a simple description!

Disclaimer: I am crap at describing these things.
 
check out the demo on mono slideshow, its very versatile and i will be doing something similar on my webiste.
 
If you are looking for something that randomly selects an image upon page load, here is a quick PHP script that would achieve that:

PHP: 
<?php
$i = rand(1, 10);

echo "<img src=\"images/".$i.".jpg\" alt=\"\" />";

?>

Images are in the images/ directory, named 1.jpg, 2.jpg, 3.jpg etc.

Let me know if you need any help :)

Thanks,
Matt
 
Forgot about this - sorry Mike.

I use monoslideshow on the front page of my website and its a bit tricky to configure. There is a Lightroom plug-in which makes things much easier!

I bought it but only used it twice!

I tried a rotating image script - I think it was using this tutorial http://www.communitymx.com/content/article.cfm?cid=651FF

or this

function selectPicBasic() **
// generate a random number between 1 and 3
var randomNum = Math.floor(Math.random() * 3)+1;
// build the filename string including the random num
var filename = "rose" + randomNum + ".jpg";
// set the src of the image equal to the filename
document.getElementById("pic").src = filename;
**

this has a series of images called rose1, rose2, rose3 etc.,
 
Hi this is the javascript I use on my site

This goes in the head of your page

Code: 
<script language="JavaScript" type="text/javascript">
//<![CDATA[

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'images/logostitles/banner1.jpg'
theImages[1] = 'images/logostitles/banner2.jpg'
theImages[2] = 'images/logostitles/banner3.jpg'


// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++)**
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
**
var whichImage = Math.round(Math.random()*(p-1));
function showImage()**
document.write('<img src="'+theImages[whichImage]+'">');
**

<!-- end random banner JS Script -->
//]>
</script>

This goes where you want the images to appear


Code: 
<!-- random banner images -->
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!-- Begin
showImage();
//  End -->
//]>
</script> <!-- end random banner JS Script -->

Dave
 
Tried this, just experimenting with the top banner, but nothing appears now.

I put the first bit in the "head" section, and then replaced the banner with the second bit of code.

Just Dave said:
Hi this is the javascript I use on my site

This goes in the head of your page

Code: 
<script language="JavaScript" type="text/javascript">
//<![CDATA[

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'images/logostitles/banner1.jpg'
theImages[1] = 'images/logostitles/banner2.jpg'
theImages[2] = 'images/logostitles/banner3.jpg'


// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++)**
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
**
var whichImage = Math.round(Math.random()*(p-1));
function showImage()**
document.write('<img src="'+theImages[whichImage]+'">');
**

<!-- end random banner JS Script -->
//]>
</script>

This goes where you want the images to appear


Code: 
<!-- random banner images -->
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!-- Begin
showImage();
//  End -->
//]>
</script> <!-- end random banner JS Script -->

Dave
Click to expand...
 
Hi Mike did you replace the images with your own image names and the right path to them


eg
Code: 
/general_images/banner_test.jpg

Or try

Code: 
http://www.mdh-photography.co.uk/general_images/banner_test.jpg
 
This'll be easier, this is what I've got.

Code: 
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>mdh-photography.co.uk - Motorsport Photography</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'images/1.jpg'
theImages[1] = 'images/2.jpg'
theImages[2] = 'images/3.jpg'


// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++)**
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
**
var whichImage = Math.round(Math.random()*(p-1));
function showImage()**
document.write('<img src="'+theImages[whichImage]+'">');
**

<!-- end random banner JS Script -->
//]>
</script>
</head>

<style type="text/css">
A:link {text-decoration: none; color: "#CCCCFF";**
A:visited {text-decoration: none; color: "#CCCCFF";**
A:active {text-decoration: none; color: "#CCCCFF";**
A:hover {text-decoration: none; color: red;**
</style> 
 


<body bgcolor="#191919">





<!-- random banner images -->
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!-- Begin
showImage();
//  End -->
//]>
</script> <!-- end random banner JS Script -->

<table width="750" align="center">

<tr width="750" align="right" valign="top"><td width="150">

<font face="verdana" size="2" color="#CCCCFF">
<b>NAVIGATION
<br>
</b>
<img src="general_images/reddot.gif" width="150" height="1" valign="top">
<br>
<a href="index.htm">Home</a>
<br>

<a href="about.htm">About</a>
<br>
<br>
<b>Portfolios
<br>
</b>
<img src="general_images/reddot.gif" width="150" height="1" valign="top">
<br>
<a href="2007gallery.htm">Motorsport 2008</a>
<br>
<a href="2006gallery.htm">Motorsport 2007</a>
<br>

<a href="2005gallery.htm">Motorsport 2004-2006</a>
<br>
<a href="other.htm">Other</a>
<br>
<br>
<b>CONTACT
<br>
</b>
<img src="general_images/reddot.gif" width="150" height="1" valign="top">
<br>
<a href="contact.htm">Contact</a>
<br>

</td>

<td width="50"></td>

<td width="550" valign="top" align="left">

<font face="Verdana" size="3" color="#CCCCFF">
<b>mdh-photography.co.uk</b> <br>
<img src="general_images/reddot.gif" width="550" height="1">

<font face="Verdana" size="2" color="#CCCCFF">
<br>
<a href="2007gallery.htm"><img src="gallery_thumbs/latest_gallery.jpg" width="200" height="125" border="0" 

align="right"></a>

<br>
Welcome to mdh-photography.co.uk, the website of freelance motorsport photographer, Michael Hoyer.

<br><br>

<b>Renault/MSA Young Photographer of the Year 2006</b>
<br><br>

<i>Please note that as of February 2007 I will be working full time for Jakob Ebrey Photography. Therefore this site 

will be updated much less frequently. However, I will still occasionally cover events independently, which I will 

give details of as and when they happen.<br><br>If you have used my services in the past and wish for continued 

coverage, please get in contact to discuss</i><br><br>

<b>Please click on the image to the right to view the latest gallery of images</b>, or the various Gallery links to 

your left to view all of the images currently online.

<br><br>
This is the new version of mdh-photography.co.uk, updated for the 2006 Motorsport season. For more information about 

mdh-photography.co.uk, please go to the About section, using the menu to your left.
<br><br>
For the 2006 season mdh-photography.co.uk will be covering various international and national races, including 

sportscars and single seaters. Our printing service has also been upgraded for the new year, meaning that we can 

offer more variety, and deliver much quicker (typically less than 7 days).
<br><br>
Finally, mdh-photography.co.uk is available for special events such as test days and launches. Please see the 

Services section for more details.
<br>
<img src="general_images/dot.gif" width="550" height="1">
<br>
<font face="verdana" size="1">
<i>Please note that all material on this site is copyright <b>Michael Hoyer</b> and cannot be used without my 

express permission. If you have any queries regarding image usage, then please do not hesitate to contact me. If any 

unauthorised use of images is discovered the user will be invoiced accordingly. For more information please see the 

<b>Terms and Conditions</b> section.<br>Website design (c)2005-2007 Michael Hoyer.</i>

</td>
</tr>

</table>

</font>


</body>

</html>

I've tried running it from a directory on my computer, with and "images" folder, and also uploading the "images" folder to my webspace, doesn't seem to work either way.
 
Just Dave said:
Hi Mike it works now but your images are massive for a banner
Click to expand...

I know that, it's just a test - just grabbed some pictures at random. Resized them accordingly now.

It's not actually going to be the banner, but just testing that now for the sake of simplicity.

Still doesn't seem to work though...

http://mdh-photography.co.uk/test5.htm
 
If you have access to PHP, I would seriously suggest just using my example. No point messing around with that much javascript when it can be achieved with 2 lines of PHP.
 
MattF said:
If you have access to PHP, I would seriously suggest just using my example. No point messing around with that much javascript when it can be achieved with 2 lines of PHP.
Click to expand...

Me too..JS can be unreliable and not everyone has it.

PHP gets my vote, alot easier to implement and easier to update, especially with Matt's example.

:)
 
If you have PHP on your hosting, simply put the code I gave you above exactly where you want the image to go (just imagine the code i gave you as an <img /> tag!).

Then follow the instructions I gave to get the images there. Just let me know if you need anymore help :)

Cheers,
Matt
 
The banner one does, the PHP one I put in does this:

Renault/MSA Young Photographer of the Year 2006

"; ?>

This is what I did :

<br>
Welcome to mdh-photography.co.uk, the website of freelance motorsport photographer, Michael Hoyer.

<br><br>

<b>Renault/MSA Young Photographer of the Year 2006</b>
<br><br>
<?php
$i = rand(1, 10);

echo "<img src=\"images/".$i.".jpg\" alt=\"\" />";

?>
<br>
 
Are your images in an image/ directory and named 1.jpg, 2.jpg etc?
 
I had a quick look at the source code for your page and there seem to be some extra bits of code that aren't doing anything (from previous attempts at the random image thingy) and I'm not sure about the first " before "Renault/MSA Young Photographer of the Year 2006" which looks as if it needs to be < and those ? in the php code don't look right to me, but I haven't got much beyond JS myself, so I could be talking ballhooks :lol:
 
MattF said:
Are your images in an image/ directory and named 1.jpg, 2.jpg etc?
Click to expand...

Yes.

Flash In The Pan said:
I had a quick look at the source code for your page and there seem to be some extra bits of code that aren't doing anything (from previous attempts at the random image thingy) and I'm not sure about the first " before "Renault/MSA Young Photographer of the Year 2006" which looks as if it needs to be < and those ? in the php code don't look right to me, but I haven't got much beyond JS myself, so I could be talking ballhooks
Click to expand...

You are probably right, I learnt just enough to cobble it together about 2 years ago, and have since forgotten most of that.
 
Flash In The Pan said:
I had a quick look at the source code for your page and there seem to be some extra bits of code that aren't doing anything (from previous attempts at the random image thingy) and I'm not sure about the first " before "Renault/MSA Young Photographer of the Year 2006" which looks as if it needs to be < and those ? in the php code don't look right to me, but I haven't got much beyond JS myself, so I could be talking ballhooks :lol:
Click to expand...
The <? is the opening and closing tags.

I will try and get something working on my hosting now, give me a minute.
 
Ah just had another look, your pages need to be saved as a .php for PHP to parse on the page.
 
You must log in or register to reply here.
Back
Top