Load all images from a folder into web page using Jquery/Javascript

The following source code can be used to load all images from a folder into webpage :

var dir = "src/themes/base/images/";
var fileextension = ".png";
$.ajax({
    //This will retrieve the contents of the folder if the folder is configured as 'browsable'
    url: dir,
    success: function (data) {
        //Lsit all png file names in the page
        $(data).find("a:contains(" + fileextension + ")").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http:///", "");
            $("body").append($("<img src=" + dir + filename + "></img>"));
        });
    }
});

Hope this helps. The above is actually a good answer provided in SO and i’m adding the link also here.

URL : http://stackoverflow.com/questions/18480550/how-to-load-all-the-images-from-one-of-my-folder-into-my-web-page-using-jquery/18480589#18480589

3 Comments on "Load all images from a folder into web page using Jquery/Javascript"


  1. i tried this code and it fails in my case when you place your images inside a folder and your calling page is outside that images folder then it fails to retrieve the correct path for the image to show

    Reply

  2. var dir = “images/”;
    var fileextension = “.jpg”;
    $.ajax({
    //This will retrieve the contents of the folder if the folder is configured as ‘browsable’
    url: dir,
    success: function (data) {
    //Lsit all png file names in the page
    $(data).find(“a:contains(” + fileextension + “)”).each(function () {
    // var filename = this.href.replace(window.location.host, “”).replace(“http:///”, “”);

    var filename = this.pathname;

    var rest = filename.substring(0, filename.lastIndexOf(“/”) + 1);
    var last = filename.substring(filename.lastIndexOf(“/”) + 1, filename.length);

    rest1=rest+dir;
    filename=rest1+last;

    if(filename==rest1)
    {

    }
    else
    {
    $(“.box-content”).append($(“”));
    }

    });
    }
    });

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *