WebPlus X2: Random Picture or Testimonial changes

[mls4077]

Hi There,

I was not sure how to word this question. How do I go about having a different client testimonial randomly change each time you come back to the home page?

If WebPlus can do this would it also be possible for a Hockey website I am working on to have a different player randomaly appear on the home page each time you go back to it?

I am heading out to a meeting and will check later today to see any responses.

Thanking you in advance,
mls4077

[AlfredP]

Hi mls4077,

You would need a script to do this. Check to see whether your web host offers a 'random quotations' script that you could configure for this purpose.

Alfred

[Archibald]

Alfred,

Can't it be done with JavaScript using Math.random() to generate a random integer within a range to index a string array of iframe href's?

[Archibald]

Hi 'mls4077',

A demonstration of different players randomly appearing on a home page is here.

The players appear in a document frame (iframe) with default ID of "ifrm_1". There are pages for each player random1.html, ...,... ,random4.html. The randomisation is done in JavaScript with these page file names held in an array 'fileArray'. A random integer between 0 and 3 is generated and the corresponding file is loaded into the iframe.

Click the refresh button in your browser to see different players appear.

I attach the .wpp file (WebPlus10).

[mls4077]

Archibald,

Thank you so much for your effort on this. I am going to do your download and give it a test this evening.

Thanks again!
mls4077

[Martin Taylor]

Archibald

I don't think you need to bother with an iframe. You can just alter the "src" attribute of an image element.

Attached shows how. It's adapted from one I did some time ago to rotate three images from a random set.

[Archibald]

Martin,

Yes, I agree that's easiest if only an image is to be displayed. My understanding is that 'mls4077' wishes to show random client testimonials on one site and random hockey player photos on another site. Using iframes keeps your options open. I suppose you could even show random Flash animations or play random tracks of music by use of iframes.

[Martin Taylor]

Originally Posted by Archibald Using iframes keeps your options open.

That's true enough, Archibald.

[mls4077]

Originally Posted by Martin Taylor Archibald I don't think you need to bother with an iframe. You can just alter the "src" attribute of an image element. Attached shows how. It's adapted from one I did some time ago to rotate three images from a random set.

Hi Martin,

How do I get started with your version for a picture to alternate like in your sample I looked at?

[Martin Taylor]

Originally Posted by mls4077 How do I get started with your version for a picture to alternate like in your sample I looked at?

Hi

1. Get your images organised. Make them all the same pixel width and height. Assuming they're pics of players, name them "player0.jpg", "player1.jpg", "player2.jpg" ... etc. The name of the file must include a number that goes up by one each time.

2. In WP, put "player0.jpg" on your page in the right place. Right click the image and in Image Export Options select "Save to my chosen path and name", so that it stays named as "player0.jpg". At the foot of the dialog, select "Always use the original image file".

3. Right click the image again and select "Id ...". Enter an identifier such as "pic_0".

4. Go to Tools>Site manager>File manager. You'll see "player0.jpg" already in the list. Add all the other images via the "Add File" button.

5. Right click a blank area on the page and select "Attach HTML". Scroll to the foot of the code and locate the white area labelled "Page Body End". Click into that white area just after the "-->", and paste in this code:

<script language="javascript"> var num_images = 7; var picno = Math.floor((Math.random() * num_images)); document.getElementById("pic_0").src = "player"+picno+".jpg"; </script>

Change the highlighted number 7 above to be how many images you have. Make sure that the "pic_0" I've highlighted matches the id you chose in step 3.

That should be it ... I hope!

[mls4077]

Thank you so much for the detailed step by step. I am looking forward to trying this out.

Thanks very much!
mls4077

[JamieB]

Originally Posted by Martin Taylor Hi 1. Get your images organised. Make them all the same pixel width and height. Assuming they're pics of players, name them "player0.jpg", "player1.jpg", "player2.jpg" ... etc. The name of the file must include a number that goes up by one each time. 2. In WP, put "player0.jpg" on your page in the right place. Right click the image and in Image Export Options select "Save to my chosen path and name", so that it stays named as "player0.jpg". At the foot of the dialog, select "Always use the original image file". 3. Right click the image again and select "Id ...". Enter an identifier such as "pic_0". 4. Go to Tools>Site manager>File manager. You'll see "player0.jpg" already in the list. Add all the other images via the "Add File" button. 5. Right click a blank area on the page and select "Attach HTML". Scroll to the foot of the code and locate the white area labelled "Page Body End". Click into that white area just after the "-->", and paste in this code:Change the highlighted number 7 above to be how many images you have. Make sure that the "pic_0" I've highlighted matches the id you chose in step 3. That should be it ... I hope!

Hi and sorry to be a pain, but I have followed the instructions, but only the initial image is displaying, I added all the images (but could not give them an ID like the first), I did export options as told and changed the number and first image name to reflect my files and amount. and pasted just after the -->

Please help

[Martin Taylor]

Originally Posted by JamieB I have followed the instructions, but only the initial image is displaying, I added all the images (but could not give them an ID like the first) ...

If you don't give the images their IDs, the script won't work. Why could you not do that?

[twosixbw]

Hi....

New user here. I've used the attached successfully (thanks very much Martin) but would like to adapt it to add in an individual link when the different photos display. I imagine this is easy if you know how so if anyone can help that would be appreciated.

Thanks in advance

Phil

Originally Posted by Martin Taylor Hi 1. Get your images organised. Make them all the same pixel width and height. Assuming they're pics of players, name them "player0.jpg", "player1.jpg", "player2.jpg" ... etc. The name of the file must include a number that goes up by one each time. 2. In WP, put "player0.jpg" on your page in the right place. Right click the image and in Image Export Options select "Save to my chosen path and name", so that it stays named as "player0.jpg". At the foot of the dialog, select "Always use the original image file". 3. Right click the image again and select "Id ...". Enter an identifier such as "pic_0". 4. Go to Tools>Site manager>File manager. You'll see "player0.jpg" already in the list. Add all the other images via the "Add File" button. 5. Right click a blank area on the page and select "Attach HTML". Scroll to the foot of the code and locate the white area labelled "Page Body End". Click into that white area just after the "-->", and paste in this code:Change the highlighted number 7 above to be how many images you have. Make sure that the "pic_0" I've highlighted matches the id you chose in step 3. That should be it ... I hope!

[Brett]

Originally Posted by Martin Taylor Archibald I don't think you need to bother with an iframe. You can just alter the "src" attribute of an image element. Attached shows how. It's adapted from one I did some time ago to rotate three images from a random set.

When I download this file I see home page with 1 image on eit, a jpg of MoviePlus 5 software.

When I preview in my browser and hit Refresh, I see new image, and can hit Refresh and cycle through 4 or 5 images. Where are the other images in the file?

[Martin Taylor]

Originally Posted by Brett When I download this file I see home page with 1 image on eit, a jpg of MoviePlus 5 software. When I preview in my browser and hit Refresh, I see new image, and can hit Refresh and cycle through 4 or 5 images. Where are the other images in the file?

Hi Brett

I added the other images using Tools > Site Manager > File Manager.

If you right-click the page and choose Attach HTML, then scroll down, you'll see the randomising script near the foot of the page. In this case it's been built to select from 7 images named "product0.jpg", "product1.jpg" and so on.

[Brett]

Originally Posted by Martin Taylor Hi Brett I added the other images using Tools > Site Manager > File Manager. If you right-click the page and choose Attach HTML, then scroll down, you'll see the randomising script near the foot of the page. In this case it's been built to select from 7 images named "product0.jpg", "product1.jpg" and so on.

Thanks Martin,
I had done that, but still confused. Where are the physical images? What am I missing?


I have been studying this thread and the one related to it. I appreciate all the effort you put into this. I want to re-do my site using the same concept, and the instructions are all right there. Except I guess I am a bit slow and just can't get my head around where these pictures are.

Thanks Martin



EDIT>>>oh geez..so I went back...I get it. Thanks a ton

[jayplay28]

Hi,
I have tried following this and have redone the steps over and over and cant seem to get this to work. Have only installed it on my homepage www.gleamingkleen.co.uk only till I worked it out.

Could anybody help and tell me what I am doing wrong.. have done 7 banners and labeled them as Banner0.jpg and so on to "Banner6.jpg" and also "ID" each with the correct indentifer as said above but will not work for me

TIA

[edwinadside]

Originally Posted by Martin Taylor Archibald I don't think you need to bother with an iframe. You can just alter the "src" attribute of an image element. Attached shows how. It's adapted from one I did some time ago to rotate three images from a random set.

How do I achieve this?

[Archibald]

Originally Posted by edwinadside How do I achieve this?

It's described by Martin in this post within this thread.