Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Random Image Generator With Links in a Table Cell

    Hi, i'm trying to place two random images that change on page refresh. They must be positioned side-by-side, each image has a different external link, and the same two images must not be shown at the same time.

    So far, after trawling through countless sites, i have managed to put together the following javascript that will pull in a single random image from my picture library in sharepoint with each image' external link working correctly; my plan was to create a table with one row and two cells and call the script from each cell so they are positioned correctly - would this be the best way to go (if so how would i call the script from multiple table cells??) or should i also create the table in the script also?? or is there a better way to achieve all this??

    Any help would be greatly appreciated.


    Code:
    function random_imglink(){
    var myimages=new Array()
    
    //specify random images below.
    
    myimages[1]="/StaffSportShots/exployee1.jpg"
    myimages[2]="/StaffSportShots/exployee2.jpg"
    myimages[3]="/StaffSportShots/exployee3.jpg"
    myimages[4]="/StaffSportShots/exployee4.jpg"
    myimages[5]="/StaffSportShots/exployee5.jpg"
    myimages[6]="/StaffSportShots/exployee6.jpg"
    myimages[7]="/StaffSportShots/exployee7.jpg"
    myimages[8]="/StaffSportShots/exployee8.jpg"
    myimages[9]="/StaffSportShots/exployee9.jpg"
    myimages[10]="/StaffSportShots/exployee10.jpg"
    
    //specify corresponding links below
    
    var imagelinks=new Array()
    imagelinks[1]="http://domain.com/profile/employee1/"
    imagelinks[2]="http://domain.com/profile/employee2/"
    imagelinks[3]="http://domain.com/profile/employee3/"
    imagelinks[4]="http://domain.com/profile/employee4/"
    imagelinks[5]="http://domain.com/profile/employee5/"
    imagelinks[6]="http://domain.com/profile/employee6/"
    imagelinks[7]="http://domain.com/profile/employee7/"
    imagelinks[8]="http://domain.com/profile/employee8/"
    imagelinks[9]="http://domain.com/profile/employee9/"
    imagelinks[10]="http://domain.com/profile/employee10/"
    
    var ry=Math.floor(Math.random()*myimages.length) 
    if (ry==0)
    ry=1
    document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
    }
    random_imglink()
    //-->

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Try to avoid using document.write. It's really not needed.

    As far as the HTML is concerned: <table>s are much frowned on nowadays. Most designers would use CSS styles to position things.

    But, yes, you could use a simple <table>, as you described. I'll do that here, but you should look into better ways.

    Code:
    <html>
    <body>
    ...
    <table>
    <tr>
        <td> 
            <a id="LINK1"><img id="IMG1" style="border: none;"></a>
        </td>
        <td>
            <a id="LINK2"><img id="IMG2" style="border: none;"></a>
        </td>
    </table>
    ...
    <script type="text/javascript">
    var myImages = [
        "/StaffSportShots/exployee1.jpg",
        "/StaffSportShots/exployee2.jpg",
        ...
        "/StaffSportShots/exployee10.jpg"
    ];
    var imagelinks = [
        "http://domain.com/profile/employee1/",
        "http://domain.com/profile/employee2/",
        ...
        "http://domain.com/profile/employee10/"
    ];
    var rnum = Math.floor( Math.random() * myImages.length );
    document.getElementById("LINK1").href = imagelinks[rnum];
    document.getElementById("IMG1").src = myImages[rnum];
    
    var r1 = rnum;
    while ( rnum = r1 ) // ensure no duplicate
    {
        rnum = Math.floor( Math.random() * myImages.length );
    }
    document.getElementById("LINK2").href = imagelinks[rnum];
    document.getElementById("IMG2").src = myImages[rnum];
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    turner20 (06-26-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you for the quick response!

    The script hangs my browser (IE9), i then get a warning that the script is taking too long and when i stop it the first image (in the left cell) displays fine but the second image shows as a picture icon (not a missing red cross).

    The only part of the code i changed was the image location and links. Any ideas what it could be?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,140
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    while ( rnum == r1 ) // ensure no duplicate

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    turner20 (06-26-2012)

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,525
    Thanks
    80
    Thanked 4,490 Times in 4,454 Posts
    Oh, crap. So sorry, turner. What a place to make a typo like that. Philip's eyes are better than mine.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Absolutely no problem at all Old Pedant. Thank you both for your quick responses and help, the script is working perfectly now.

    Just one last thing (hope i'm not pushing my luck - when an image is clicked the link is opening in the same browser window; is there a way to force it to open in a new browser window?

    Are you able to recommend any good online resources / books for learning JavaScript??

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,140
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by turner20 View Post
    Absolutely no problem at all Old Pedant. Thank you both for your quick responses and help, the script is working perfectly now.

    Just one last thing (hope i'm not pushing my luck - when an image is clicked the link is opening in the same browser window; is there a way to force it to open in a new browser window?

    Are you able to recommend any good online resources / books for learning JavaScript??
    Whether a page opens in a new window, a new tab or the same window is entirely under the control of the user. You are not able to force it.

    For resources/books try using the search feature of the forum - the question has often been asked before. w3schools is often considered a good resource, even though it is not entirely up-to-date in parts. Many of the objections which are sometimes raised about it are rather pedantic in nature.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi again, i've been trying to extend the script to work with 4 and 6 images, however i'm struggling to find a away to make sure no duplicates occur - i presume this line just needs additions ??
    Code:
    var r1 = rnum;
    while ( rnum = r1 ) // ensure no duplicate
    i've tried creating a var r2 and adding in the previous r# values for each but i get duplicates. Can someone point me in the right direction please?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,140
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    Quote Originally Posted by turner20 View Post
    Hi again, i've been trying to extend the script to work with 4 and 6 images, however i'm struggling to find a away to make sure no duplicates occur - i presume this line just needs additions ??
    Code:
    var r1 = rnum;
    while ( rnum = r1 ) // ensure no duplicate
    i've tried creating a var r2 and adding in the previous r# values for each but i get duplicates. Can someone point me in the right direction please?
    One more time:-

    while ( rnum == r1 ) { // ensure no duplicate

    A test script:-

    Code:
    <script type = "text/javascript">
    
    var arr = [];  // to store the results
    var rnum = 0;
    var r1 = rnum;
    var len = 6;   // images array length
    
    for (var i =0; i<20; i++) {
    while ( rnum == r1 ) {  // ensure no duplicate
    rnum = Math.floor( Math.random() * len );
    arr[i] = rnum;
    }
    r1=rnum;
    }
    
    alert (arr);  // no consecutive repeats
    </script>
    Last edited by Philip M; 07-03-2012 at 08:46 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry my typo, i did have the "==" in the script already. What i'm struggling to get my head round is where to place code within the existing script when i need to extend the number of instances. For example, taking OldPendant' code above that allows me to have two randomised images in the table that are not duplicated; if i want to add two further images (makin a total of 4) i obviously create two more cells in the table, and 2 elementbyid for each; do i then need to replicate the "rnum = math.floor..." for each also? The test script you detailed seems to be alittle different to the example first given, i'm trying to figure out the sequence of events to make sense of it and where they are in the script. Sorry, learning as i go along on this....

    Code:
    <table>
    <tr>
        <td> 
            <a id="LINK1"><img id="IMG1" style="border: none;"></a>
        </td>
        <td>
            <a id="LINK2"><img id="IMG2" style="border: none;"></a>
        </td>
    <td>
            <a id="LINK3"><img id="IMG3" style="border: none;"></a>
        </td>
    <td>
            <a id="LINK4"><img id="IMG4" style="border: none;"></a>
        </td>
    </table>
    ...
    <script type="text/javascript">
    var myImages = [
        "/StaffSportShots/exployee1.jpg",
        "/StaffSportShots/exployee2.jpg",
        ...
        "/StaffSportShots/exployee10.jpg"
    ];
    var imagelinks = [
        "http://domain.com/profile/employee1/",
        "http://domain.com/profile/employee2/",
        ...
        "http://domain.com/profile/employee10/"
    ];
    var rnum = Math.floor( Math.random() * myImages.length );
    document.getElementById("LINK1").href = imagelinks[rnum];
    document.getElementById("IMG1").src = myImages[rnum];
    
    var r1 = rnum;
    while ( rnum == r1 ) { // ensure no duplicate
    {
        rnum = Math.floor( Math.random() * myImages.length );
    }
    document.getElementById("LINK2").href = imagelinks[rnum];
    document.getElementById("IMG2").src = myImages[rnum];
    {
        rnum = Math.floor( Math.random() * myImages.length );
    }
    document.getElementById("LINK3").href = imagelinks[rnum];
    document.getElementById("IMG3").src = myImages[rnum];
    {
        rnum = Math.floor( Math.random() * myImages.length );
    }
    document.getElementById("LINK4").href = imagelinks[rnum];
    document.getElementById("IMG4").src = myImages[rnum];
    </script>

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,140
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    If you want to display several (non-repeating) images, you should shuffle the images array at the outset and then show images[0], images[1], images[2] and images[3]. Note that the index of an array starts at 0.

    For simplicity you can shuffle the indices:-

    Code:
    <script type = "text/javascript">
    
    var myimages=new Array()
    
    //specify random images below.
    
    myimages[1]="/StaffSportShots/exployee1.jpg"
    myimages[2]="/StaffSportShots/exployee2.jpg"
    myimages[3]="/StaffSportShots/exployee3.jpg"
    myimages[4]="/StaffSportShots/exployee4.jpg"
    myimages[5]="/StaffSportShots/exployee5.jpg"
    myimages[6]="/StaffSportShots/exployee6.jpg"
    myimages[7]="/StaffSportShots/exployee7.jpg"
    myimages[8]="/StaffSportShots/exployee8.jpg"
    myimages[9]="/StaffSportShots/exployee9.jpg"
    myimages[10]="/StaffSportShots/exployee10.jpg"
    
    //specify corresponding links below
    
    var imagelinks=new Array()
    imagelinks[1]="http://domain.com/profile/employee1/"
    imagelinks[2]="http://domain.com/profile/employee2/"
    imagelinks[3]="http://domain.com/profile/employee3/"
    imagelinks[4]="http://domain.com/profile/employee4/"
    imagelinks[5]="http://domain.com/profile/employee5/"
    imagelinks[6]="http://domain.com/profile/employee6/"
    imagelinks[7]="http://domain.com/profile/employee7/"
    imagelinks[8]="http://domain.com/profile/employee8/"
    imagelinks[9]="http://domain.com/profile/employee9/"
    imagelinks[10]="http://domain.com/profile/employee10/"
    
    var Array = [1,2,3,4,5,6,7,8,9,10];
    
    function shuffle(Arr){
    var NewArr = Arr.slice(0);
    var len = NewArr.length;
    while (len>0) {
    NewArr.push(NewArr.splice(Math.floor(Math.random()*len),1)[0]);
    len--;
    }
    return NewArr;
    }
    
    var shuffled = shuffle(Array);
    alert (shuffled);;  // for testing
    var index = shuffled[0];  // first image
    alert (myimages[index]);
    alert (imagelinks[index]);
    
    // to place the image and link in the page
    //document.getElementById("LINK1").href = imagelinks[index];
    //document.getElementById("IMG1").src = myimages[index];
    
    var index = shuffled[1];  // second image
    alert (myimages[index]);
    alert (imagelinks[index]);
    
    var index = shuffled[2];  // third image
    alert (myimages[index]);
    alert (imagelinks[index]);
    
    var index = shuffled[3];  // fourth image
    alert (myimages[index]);
    alert (imagelinks[index]);
    
    </script>
    Last edited by Philip M; 07-03-2012 at 01:10 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    turner20 (07-08-2012)

  • #12
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Philip, that worked great and helped me understand the sequence. Thanks for your time.


  •  

    Posting Permissions

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