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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS or AJAX for loading ramdom image from directory listing

    I am looking for a JS or AJAX that can load a random image in a browser from a directory of images. I have found dozens of scripts that require declaring every image as a variable or in an array. I want my script to take an image directory path as a variable and load an image from a list of image names in an image directory.

    Does anyone know of a JS script that will do this?

    Thanks.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,380
    Thanks
    11
    Thanked 592 Times in 572 Posts
    it kinda depends on the server where the images will be hosted.

    if it supports webDAV, i have some ready to go code for you.

    if you are able to view the directory listing when you point the browser to the image directory without a filename (eg "mysite.com/images/"), then you can ajax that directory location, and comb the resposnseText with a regexp something like (/[\w\d\_\.]+jpg/gmi), or parse the document into a DOM tree and return the href of all "a" tags that contain '.jpg'.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, the server supports directory browsing. do you have a finished script you could post?

    Thanks.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,380
    Thanks
    11
    Thanked 592 Times in 572 Posts
    Code:
    function obVals(ob) {
        var r = [];
        var i = 0;
        for (var z in ob) {
            if (ob && ob.hasOwnProperty && ob.hasOwnProperty(z)) {
                r[i++] = ob[z];
            }
        }
        return r;
    }
    
    
    function newajax() {
        var ox = null;
        if (window.XMLHttpRequest) {
            ox = new XMLHttpRequest;
        } else if (window.ActiveXObject) {
            ox = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return ox;
    }
    
    function sGet(turl){
     var XHRt = newajax();
            XHRt.open("GET", turl, false);
        	XHRt.setRequestHeader("Content-Type",  "text/html");
        	XHRt.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
      XHRt.send("");
    return XHRt.responseText;
    }//end sGet
    
    function dir(paf) {
    var   b = sGet(paf).bold().bold();
    var bo=document.createElement("b");
    bo.innerHTML=b;
       var  c = obVals(bo.getElementsByTagName("a"));
    var out=[];
    for(var z =0; z< c.length;z++){ 
    if(c[z].href && c[z].href.match(/jpg/ig)){ out[out.length]=c[z].href} //end if jpg
       }
    return out; 
    }//end function dir
    
     alert(dir("images\/").join("\n"))
    this assumes a subdirectory named images in the page's folder...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,380
    Thanks
    11
    Thanked 592 Times in 572 Posts
    for a random image from the results array coming from "dir":

    Code:
    function Rnd(w) {
        return parseInt(Math.random() * (w + 1));
    }
    
    Array.prototype.random = function () {
        return this[Rnd(this.length - 1)];
    }
    
    alert(dir(".").random())
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%


  •  

    Posting Permissions

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