Hi there, I would really appreciate if someone could give me step-by-step instructions on how to set up random pics as in //moodle.blackpool.ac.uk/ using java scripts (as found in http://javascript.internet.com/miscellaneous/random-image.html). I tried in several in ways but consistently failing.
Thanks... Tom
Actually //moodle.blackpool.ac.uk/ uses a slightly simpler script than that found on javascript.internet.com. Here is their script:
<script type="text/javascript">
<!--
var images = new Array();
images[images.length] = new Array('', 'image1.jpg');
images[images.length] = new Array('', 'image2.jpg');
var randomNum = Math.floor(Math.random() * images.length);
document.write("<div style='width: 100%; height: 390px; background-image: url(/file.php/1/home_images/" + images[randomNum][1] + "); background-repeat: no-repeat; background-position: center center;'></div>");
//-->
</script>
Suppose you want to add this script to your front page:
1. Edit the topic section
2. Toggle html (click the <> icon in the toolbar)
3. Paste the above script into the editor
4. For each image you want to display add an image line to the list in the script
images[images.length] = new Array('', 'image2.jpg');
Change the image name in the line to the name of your image.
5. Save the topic section.
6. In the Files area of your site create a folder home_images and upload all the images to that folder.
7. With a bit of luck it will work.
hth
Thank you so much for responding.
I followed your instructions steps 1 - 6 religiously, however, it seems that your point number 7 (luck) didn't work for me
I can see only a blank space that can accommodate my pics.
After failing to see the pics, I checked the scripts through the step 2 above. I have seen some additional scripts (more that I actually pasted there), I dont know whether it is normal or not. Any how what I found there I have copy+pasted below. Any other thoughts or something that I slipped???
Thanks
Tom
<script type="text/javascript"> <!-- var images = new Array(); images[images.length] = new Array('', 'image1.jpg'); images[images.length] = new Array('', 'image2.jpg'); images[images.length] = new Array('', 'image3.jpg'); images[images.length] = new Array('', 'image4.jpg'); images[images.length] = new Array('', 'image5.jpg'); var randomNum = Math.floor(Math.random() * images.length); document.write("<div style='width: 100%; height: 390px; background-image: url(/file.php/1/home_images/" + images[randomNum][1] + "); background-repeat: no-repeat; background-position: center center;'></div>"); //--> </script>
<div style="width: 100%; height: 390px; background-image: url("/file.php/1/home_images/image2.jpg"); background-repeat: no-repeat; background-position: center center;"></div>
First, you need to disabe the editor in your profile (set to 'use standard web forms') when you enter or edit this code. The editor filters are mucking it up. Then, try replacing the following part with a full path:
/file.php/1/home_images/
=>
http://yourmoodledomain/file.php/1/home_images/
Hi thanks again.
Though I haven't reached there yet, I have a feeling I am getting there. I controlled the automatic script change through profile editing.
When I open my course I see the url at the browser at the top as
http://www.cs.ub.bw/moodlecad/course/view.php?id=33
With this what is my "yourmoodledomain"? it is cs.ub.bw/moodlecad or something more than this?
I put it as below. I tried with and without www, still no expected result.
Regards
Tom
<script type="text/javascript">
<!--
var images = new Array();
images[images.length] = new Array('', 'image1.jpg');
images[images.length] = new Array('', 'image2.jpg');
images[images.length] = new Array('', 'image3.jpg');
images[images.length] = new Array('', 'image4.jpg');
images[images.length] = new Array('', 'image5.jpg');
var randomNum = Math.floor(Math.random() * images.length);
document.write("<div style='width: 100%; height: 390px; background-image: url(http://cs.ub.bw/moodlecad/file.php/1/home_images/" + images[randomNum][1] + "); background-repeat: no-repeat; background-position: center center;'></div>");
//-->
</script>
Where have you stored your images? What's the url of that folder?
So it seems that you are working on a course rather than the site. If you created in your course Files a folder 'home_images' and uploaded the images to that folder, the script should look something like this:
<script type="text/javascript">
<!--
var images = new Array();
images[images.length] = new Array('', 'image1.jpg');
images[images.length] = new Array('', 'image2.jpg');
images[images.length] = new Array('', 'image3.jpg');
images[images.length] = new Array('', 'image4.jpg');
images[images.length] = new Array('', 'image5.jpg');
var randomNum = Math.floor(Math.random() * images.length);
document.write("<div style='width: 100%; height: 390px; background-image: url(http://cs.ub.bw/moodlecad/file.php/33/home_images/" + images[randomNum][1] + "); background-repeat: no-repeat; background-position: center center;'></div>");
//-->
</script>
hth
Excellent!!! At last it worked. As you guessed the five images are stored in the folder under my course; its address is- http://www.cs.ub.bw/moodlecad/files/index.php?id=33&wdir=%2F%2Fhome_images&choose=
Thank you so much for your patience and perseverance.
Now a new picture appears each time the page is refreshed.
I guess it can also be changed to a slide show with a small change in the script?
Kind regards
Tom
I am not good with coding but could you add a timer into the script so that the pictures rotate through after a certain amount of time?
This shouldn't be too difficult. See below a variation of the above solution. Rotating pace is determined by the number of miliseconds in the setInterval function call.
<div id="myrandompics" style='width: 100%; height: 390px; background-repeat: no-repeat; background-position: center center;'></div>
<script type="text/javascript">
<!--
var images = new Array();
images[images.length] = new Array('', 'image1.jpg');
images[images.length] = new Array('', 'image2.jpg');
images[images.length] = new Array('', 'image3.jpg');
images[images.length] = new Array('', 'image4.jpg');
images[images.length] = new Array('', 'image5.jpg');
var randomNum = Math.floor(Math.random() * images.length);
document.getElementById('myrandompics').style.backgroundImage='url(http://cs.ub.bw/moodlecad/file.php/1/home_images/'+images[randomNum][1]+')';
function rotatePics(){
randomNum=(randomNum+1)%images.length; document.getElementById('myrandompics').style.backgroundImage='url(http://cs.ub.bw/moodlecad/file.php/1/home_images/'+images[randomNum][1]+')';
}
window.setInterval("rotatePics()",2000);
//-->
</script>
Hi itamar Tzadok and every one
I want random pictures show side right bar
i do your instruction but images do not show
can path incorrect.
code:
<p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</p>
<script type="text/javascript">// <![CDATA[
var images = new Array();
images[images.length] = new Array('','image1.JPG');
images[images.length] = new Array('','image2.JPG');
var randomNum = Math.floor(Math.random() * images.length);
document.write("<div style='width: 100%; height: 390px; background-image: url(/file.php/29/home_images/" + images[randomNum][1] + "); background-repeat: no-repeat; background-position: center center;'></div>");
// ]]></script>
i create fordle home_images in your moodle.
i hope you will help me fix problem
thanks!
Which moodle version?
i use moodle version 2.06
if i set path absolute then slide picture show but i don't understand mean file.php/1/home_images?
i create folder home_image at root.if i used file.php/1/home_images then will i set path corret?
thanks you reply!
Not quite. You need to create a resource folder and upload the images there so that they go into the moodle file system. Then take the path of the images in that folder. In Features Demo at demo.moodle.com there is an example resource folder called 'A directory' and the files path there looks like:
http://demo.moodle.net/pluginfile.php/314/mod_folder/content/1/...
In your case you should have another domain name and different numbers for 314 and 1.
See illustration for adding a resource folder. hth
at las i have done
Thank Itamar Tzadok!
