Random image html page

[Sherry222]

Hi there,

I have removed the auto-redirect so people can read what is on a page before it redirects back out to the index or where ever it's going.

Anyways, in the message_body.html message box, I have a cartoon. Is it possible to have a random cartoon - fetched from the /images folder - show on each click? Obviously, since it is the message box the same cartoon now appears over and over for various function message responses.... z-z-z-zzzz.

I found the post on random logo image here... https://www.phpbb.com/kb/article/adding ... der-image/

Would someone please give me some hints about how to modify that code or point me in the right direction for random image generating in an html page?

Thanks in advance.

[Mick]

It's quite difficult without actually seeing what you want but there are plenty of examples of random image generation in HTML using a Google search.

[Sherry222]

Here's a detail so you can see what I am talking about. This example is from logging out of my forum. Sorry about the confusion... I was trying to be clear as day 8)

sample-image.jpg (58.5 KiB) Viewed 1731 times

So, with the Google search... you are talking about finding a javascript for example... then prob loading it into the overall header html and blah blah blah the way it usually works? For some reason, I was thinking that the phpbb framework wouldn't like a foreign script.

Thx, Mick.

[Sherry222]

I think I might have found a php/css combo rather than using a javascript. I'll post it back in here - if it works - as a reference for other folks.

Cheers!

[Sherry222]

I'm still working on the php aspect, however, I did find a javascript which works great. The website providing the code is: jsCode.com

For my purposes, I am using this code in my message_body.html. I created a table with one row and two columns, placing the script in the left column and the phpbb {MESSAGE_TEXT} in the right column.

Place this code in your template overall_header.html just above the </head> marker.

Code: Select all

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================

// 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. Rememeber
// to increment the theImages[x] index!

theImages[0] = '100.jpg'
theImages[1] = '200.jpg'
theImages[2] = '300.jpg'
theImages[3] = '400.jpg'
theImages[4] = '500.jpg'

// ======================================
// do not change 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]+'">');
}

//-->
</script>

Place the following code in your html template page where ever you want the random image to appear:

Code: Select all

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================
showImage();
//-->
</script>

Header Code change:

These lines in the header code must have the complete path to the image location. If anyone has a better solution please be my guest.

Code: Select all

theImages[0] = '100.jpg'
theImages[1] = '200.jpg'
theImages[2] = '300.jpg'
theImages[3] = '400.jpg'
theImages[4] = '500.jpg'

Specify image location with a standard link:

Code: Select all

theImages[0] = 'http://www.yourdomain.whatever/some_directory/100.jpg'
theImages[1] = 'http://www.yourdomain.whatever/some_directory/200.jpg'
theImages[2] = 'http://www.yourdomain.whatever/some_directory/300.jpg'
theImages[3] = 'http://www.yourdomain.whatever/some_directory/400.jpg'
theImages[4] = 'http://www.yourdomain.whatever/some_directory/500.jpg'

If you are adding more than 5 images - the number of images in the original script - don't forget to change the theImages[0] number as well. Example:

theImages[0] = '100.jpg'
theImages[1] = '200.jpg'
theImages[2] = '300.jpg'
theImages[3] = '400.jpg'
theImages[4] = '500.jpg'
theImages[5] = '600.jpg'
theImages[6] = '700.jpg'
theImages[7] = '800.jpg'


And finally... for the folks who just might be wondering... yes, you can rename the jpg and probably use png, gif, bmp... whatever you want.

theImages[0] = '100.jpg'
theImages[1] = '200.jpg'

theImages[0] = 'http://www.yourdomain.whatever/some_dir ... e_name.jpg'
theImages[1] = 'http://www.yourdomain.whatever/some_dir ... e_name.jpg'

:)

[Sherry222]

.
UPDATE!

I put about 20 images into the array and ugh... slowed the load time on the board right down in IE ... Firefox was ok. I was worried about it with IE so it wasn't a surprise, really. The average image weight was about 30kb.

So, I took a blank html page and placed the random image javascript in the header and in the body. I saved it as random_image.html then uploaded it to my Prosilver template directory.

In my message_body.html template file, I replaced the body javascript code with <!-- INCLUDE random_image.html -->

Eureka! The message page loads in a snap and so does my board! Now.... if I could just figure out that php one. Oh and of course, I removed the javascript from my overall_header.html

Ahhhh-h-h-h-h-hh life is good... I got my random image in my message box... and I've learned a little bit more about coding with phpbb :)

Code: Select all

<html>
   <head>
      <title>
      </title>

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================

// 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. Rememeber
// to increment the theImages[x] index!
theImages[0] = 'http://www.domainname.ca/MyDirectory/images/pic_01.jpg'
theImages[1] = 'http://www.domainname.ca/MyDirectory/images/pic_02.jpg'
theImages[2] = 'http://www.domainname.ca/MyDirectory/images/pic_03.jpg'
theImages[3] = 'http://www.domainname.ca/MyDirectory/images/pic_04.jpg'
theImages[4] = 'http://www.domainname.ca/MyDirectory/images/pic_05.jpg'
theImages[5] = 'http://www.domainname.ca/MyDirectory/images/pic_06.jpg'
theImages[6] = 'http://www.domainname.ca/MyDirectory/images/pic_07.jpg'
// ======================================
// do not change 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]+'">');
}

//-->
</script>

   </head>
   <body>

<script language="JavaScript">
<!--
// ==============================================
// Copyright 2003 by jsCode.com
// Source: jsCode.com
// Author: etLux
// Free for all; but please leave in the header.
// ==============================================
showImage();
//-->
</script>

   </body>
</html>

[modernist]

Actually the solution to display a random image in a HTML template can be quite simple.

You just create a new folder e.g. styles/prosilver/theme/images/newfolder.
To make things easy use the same file extension like png for all images in this folder and name them 1 to X (here I use X = 10 as an example).

Then you add

Code: Select all

		'RANDIMAGE'  => rand(1,10),

(Use 10 if you have ten images in newfolder. If you have more images use the exact number.)

in the includes/functions.php, somewhere after

Code: Select all

 	// The following assigns all _common_ variables that may be used at any point in a template.
	$template->assign_vars(array(

In the template file where you want your random image to be shown add something like

Code: Select all

<img src="{T_THEME_PATH}/images/newfolder/{RANDIMAGE}.png" />

Update your templates in ACP and you should see a random image with each reload.

[Sherry222]

Yeah yeah... mighty easy when you know php scripting. This is what I was originally looking for. I didn't want to have to use javascript. Thanx, so much, for posting the php solution, modernist. I'll give it a try!

Ciao!