www.webdeveloper.com
Results 1 to 4 of 4

Thread: Multiple Random image // help

  1. #1
    Join Date
    Oct 2013
    Posts
    1

    Multiple Random image // help

    Hello everyone,

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

    I have this :

    <!DOCTYPE html> <!-- This is just my HTML5-valid template. Make sure you set this up correctly for your personal needs -->
    <html>

    <head>


    <link rel="stylesheet" type="text/css" href="style.css">




    <head>

    <body>



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

    <div id="image_aleatoire">
    <img src="01_image_aleatoire/1.jpg" id="image1" style="position: fixed;" />
    </div>

    <div id="image_aleatoire">
    <img src="01_image_aleatoire/3.jpg" id="image2" height="300px" style="position: fixed;" />
    </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

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    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-...ital-pictures/

    Create and share digital slideshows with fun transitions and up to 100 photos: http://s160.photobucket.com/albums/t...tion=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/dynamici...nslideshow.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/programm...ript/Lightbox/
    http://www.javascriptkit.com/howto/show.shtml
    http://www.dynamicdrive.com/dynamicindex14/index.html
    JavaScript Slideshow: http://www.barelyfitz.com/projects/s...ow/index.php/4

    JavaScript Tutorial: Build Your Own Image Viewer with Scrollbar: http://www.htmlgoodies.com/beyond/ja...le.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/dynamici...box2/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-s...-jquery-slider
    How to Make an Elegant Sliding Image Gallery with jQuery: http://www.elated.com/articles/elega...y-with-jquery/
    http://malsup.com/jquery/cycle/
    http://speckyboy.com/2009/06/03/15-a...and-tutorials/
    http://javabyexample.wisdomplug.com/...scrollers.html

    http://jonraasch.com/blog/a-simple-jquery-slideshow
    http://bradblogging.com/jquery/9-jqu...u-cannot-miss/
    http://malsup.com/jquery/cycle/
    http://speckyboy.com/2009/06/03/15-a...and-tutorials/
    http://javabyexample.wisdomplug.com/...scrollers.html

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,473
    Hi there Arkh,

    and a warm welcome to these forums.

    Here is your corrected code...
    Code:
    
    <!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>
    coothead
    Last edited by coothead; 11-02-2013 at 07:06 AM.

  4. #4
    Join Date
    Sep 2013
    Posts
    221
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles