www.webdeveloper.com
Results 1 to 4 of 4

Thread: Multiple Random image // help

Hybrid View

  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,208
    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,459
    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 06: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.
    strad solutionswww.stradsolutions.com

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