This site is best viewed in a modern browser with JavaScript enabled.

Multiple Random image // help

Arkh

Hello everyone,

I'm quiet new so I hope I post it right.

I have this :

<!DOCTYPE html> 
<html>

<head>

<head>

<body>

<div id="menu">
livres<br>
travaux<br>
textes<br>
news<br>
infos<br>
contact<br>
</div>

    <script>
        window.onLoad = Prep();

        function Prep(){
            window_Height = window.innerHeight;
            window_Width = window.innerWidth;

            image_Element = document.getElementById("image1");

            image_Height = image_Element.clientHeight;
            image_Width = image_Element.clientWidth;




            availSpace_V = window_Height - image_Height;
            availSpace_H = window_Width - image_Width;

            var changeInterval = 2000; // Time has to be in miliseconds. So, 3000 is 3 seconds
            setInterval(moveImage, changeInterval);
        }

        function moveImage(){
            var randNum_V = Math.round(Math.random() * availSpace_V);
            var randNum_H = Math.round(Math.random() * availSpace_H);

            image_Element.style.top = randNum_V + "px";
            image_Element.style.left = randNum_H + "px";
        }

        window.onLoad = Prep();

        function Prep(){
            window_Height = window.innerHeight;
            window_Width = window.innerWidth;

            image_Element = document.getElementById("image2");

            image_Height = image_Element.clientHeight;
            image_Width = image_Element.clientWidth;




            availSpace_V = window_Height - image_Height;
            availSpace_H = window_Width - image_Width;

            var changeInterval = 2000; // Time has to be in miliseconds. So, 3000 is 3 seconds
            setInterval(moveImage, changeInterval);
        }

        function moveImage(){
            var randNum_V = Math.round(Math.random() * availSpace_V);
            var randNum_H = Math.round(Math.random() * availSpace_H);

            image_Element.style.top = randNum_V + "px";
            image_Element.style.left = randNum_H + "px";
        }
    </script>

</body>

</html>

link : http://davidexcoffier.com/test.html

Which works very well for one image.
Do you have any ideas how to arrange the script for several images ?
I've tried different way pour it's too complicated and not working.

Thanks in advance

Major_Payne

A lot easier way is to use JAlbum. It writes the code for you and has many Skins to select from. Couldn't be any easier. Otherwise, you could check these out:

Building an Image Slide Show:

5 Ways to Create Beautiful Slideshows of your Digital Pictures: http://www.makeuseof.com/tag/5-ways-to-create-beautiful-slideshows-of-your-digital-pictures/

Create and share digital slideshows with fun transitions and up to 100 photos: http://s160.photobucket.com/albums/t184/PayneLess_Designs/?action=slideshow
XnView (One of many features - Slide show with effects): http://www.xnview.com/en/features.html

JavaScript Slideshows:

Slideshow: A Javascript class for Mootools: http://www.electricprism.com/aeron/slideshow/
Image Slideshows: http://www.dynamicdrive.com/dynamicindex14/index.html
Slideshows: http://www.javascriptkit.com/script/cutindex21.shtml
Ultimate Fade-in slideshow (v2.0): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Scriptocean Javascript Slideshow: http://www.scriptocean.com/slideshow/index.html

Lightbox 2: http://www.huddletogether.com/projects/lightbox2/
Shedding Some Light on Lightbox: http://www.webreference.com/programming/javascript/Lightbox/
http://www.javascriptkit.com/howto/show.shtml
http://www.dynamicdrive.com/dynamicindex14/index.html
JavaScript Slideshow: http://www.barelyfitz.com/projects/slideshow/index.php/4

JavaScript Tutorial: Build Your Own Image Viewer with Scrollbar: http://www.htmlgoodies.com/beyond/javascript/article.php/3870076
VisualLightBox is a free wizard program that helps you easily generate online photo albums, lightbox gallery with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code: http://lightbox2.com/lightbox2-how.html
Lightbox image viewer 2.03a: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Shadowbox (Like Lightbox): http://www.shadowbox-js.com/

JQuery Slideshows:

Easy Slider 1.7 - Numeric Navigation jQuery Slider: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
How to Make an Elegant Sliding Image Gallery with jQuery: http://www.elated.com/articles/elegant-sliding-image-gallery-with-jquery/
http://malsup.com/jquery/cycle/
http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/
http://javabyexample.wisdomplug.com/web-programming/47-javascript/85-30-best-jquery-photo-plugins-sliders-slideshow-galleries-and-scrollers.html

http://jonraasch.com/blog/a-simple-jquery-slideshow
http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/
http://malsup.com/jquery/cycle/
http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/
http://javabyexample.wisdomplug.com/web-programming/47-javascript/85-30-best-jquery-photo-plugins-sliders-slideshow-galleries-and-scrollers.html

coothead

Hi there Arkh,

and a warm welcome to these forums.

Here is your corrected code...

[color=navy]
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://davidexcoffier.com/">
<meta charset="utf-8">

<title>David Excoffier</title>

<link rel="icon" type="image/png" href="icon.gif">

<style>
body {
    background-color:rgb(241,241,241);
 }
#image1,#image2 {
    position:absolute;
    border:1px solid rgba(0,0,0,0.5);
    box-shadow:10px 10px 10px rgba(0,0,0,0.5);
 }
#image1 {
    top:10px;;
    left:10px;
 }
#image2 {
    width:300px;
    bottom:10px;
    right:10px;
 }
</style>

<script>
(function() {
   'use strict';

   var availSpace_V;
   var availSpace_H;
   var image_Element1;
   var image_Element2;

   var changeInterval=2000; // Time has to be in miliseconds. So, 3000 is 3 seconds

function prep(){

   var window_Height=window.innerHeight;
   var window_Width=window.innerWidth;

   image_Element1=document.getElementById('image1');
   image_Element2=document.getElementById('image2');

   var image_Height1=image_Element1.clientHeight;
   var image_Width1=image_Element1.clientWidth;

   var image_Height2=image_Element2.clientHeight;
   var image_Width2=image_Element2.clientWidth;


   availSpace_V=window_Height-image_Height1;
   availSpace_H=window_Width-image_Width1;

   setInterval(function(){moveImage()},changeInterval);
 }
function moveImage(){
   var randNum_V1=Math.round(Math.random()*availSpace_V);
   var randNum_H1=Math.round(Math.random()*availSpace_H);
   var randNum_V2=Math.round(Math.random()*availSpace_V);
   var randNum_H2=Math.round(Math.random()*availSpace_H);

   image_Element1.style.top=randNum_V1+'px';
   image_Element1.style.left=randNum_H1+'px';

   image_Element2.style.top=randNum_V2+'px';
   image_Element2.style.left=randNum_H2+'px';
 }            

   window.addEventListener?
   window.addEventListener('load',prep,false):
   window.attachEvent('onload',prep);
})();

</script>

</head>
<body>

 <img id="image1" src="01_image_aleatoire/1.jpg" alt="">
 <img id="image2" src="01_image_aleatoire/3.jpg" alt="">

</body>
</html>[/color]

coothead

priyankagound

Well...,for arranging images side by side you can try out with the below link:
HTML:
<div class ="image-section">
<img class="tall" src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="60px" height="180px">
<img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px">
<img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px">
</div>
<div class ="image-section"></div>
CSS:
.tall {
float: right;
}
img {
float: left;
}
.image-section{
width: 180px;
}

I have used the above code in one of my application, it has worked fine for me.
Hope this helps you.