How to pull images from directory without server

Question

I have one image slider webpage. In that many image tags are there. So whenever i want to add image in slider, every time i am adding tags in html. Is it possible to do without adding image tag.

<div id="slideshow" class="slideshow">


   <img src="images/1.jpeg" width="620" height="320" />
   <img src="images/2.jpeg" width="620" height="320" />
   <img src="images/3.jpeg" width="620" height="320" />
   <img src="images/4.jpeg" width="620" height="320" />

</div>

If i want to add new image, i have to add new img tag.Is it possible to add images without without <img> in the html??

I have tried with jquery. there i am not getting images from the folder.

  $('<img />')
    .attr('src', 'images/')
    .appendTo('#div3')

How we can solve this problem ?

Is there a good reason that you don't want to add new `img` tags? You know you can do it dynamically by JS right? — LcSalazar, Jun 17 '14 at 11:26
@RakeshShetty the link which is there it will deals with only activex obect which is not supported in linux platforms — Jeevan Roy dsouza, Jun 17 '14 at 11:40
@LcSalazar yes but how we can fetch images from directory in js — Jeevan Roy dsouza, Jun 17 '14 at 11:47
If the folder is in the server, only a "server-side" language will do it... @rjdmello 's answer may work, but require some security adjustments on the server... — LcSalazar, Jun 17 '14 at 11:55

score 1 · Answer 1 · edited May 23 '17 at 12:33

1

i think its all ready done in Is there a way to return a list of all the image file names from a folder using only Javascript?

$.ajax({
 url: "http://yoursite.com/images/",
  success: function(data){
    $(data).find("td > a").each(function(){
       // will loop through 
       alert("Found a file: " + $(this).attr("href"));
   });
 }
 });

edited May 23 '17 at 12:33

Community

1
1

answered Jun 17 '14 at 11:50

rjdmello

865
2
9
14

I am not using any server.Only html,js,jquery – Jeevan Roy dsouza Jun 17 '14 at 12:02
where do you save image give that path in url – rjdmello Jun 17 '14 at 12:45
i used and not displaying anything .file path is file:///home/indiapc_dev_new1/my_project/jeevan%28image_slider%29/images/ – Jeevan Roy dsouza Jun 20 '14 at 06:50
relativ path is not working. how it will take relative path if server is not there..i gave url: "file://images/", url= "images/"...both r not working – Jeevan Roy dsouza Jun 20 '14 at 10:00
if you have mainFolder/ in that you have your code in mainfolder/yourcode.js and image folder as mainfolder/images then give path as "images/ " or "../images" try with this – rjdmello Jun 23 '14 at 04:52

score 0 · Answer 2 · edited May 23 '17 at 12:16

Utilizing the jQuery library.

You can use the following:

$("#slideshow").append("<img src=\"images/5.jpeg\" />")

Or the following (better readability)

var newImg = $("<img />").attr("src","images/5.jpeg").css({"width":"620px","height":"320px"})
$("#slideshow").append(newImg);

Now to retrieve a file listing of the images in your directory dynamically you will need some sort of server side language (php, ruby, python, c#, nodejs, etc) as Javascript cannot access the file system of the server. Without a server side language you could look into create a JSON or XML file that is then read by your Javascript so that you are not changing html but adding new items quickly.

{"images": [
  {"src" : "images/5.jpeg",
   "css": {
         "width" : "620px",
         "height" : "320px"
    }
  }, {
   "src" : "images/6.jpeg",
   "css": {
         "width" : "620px",
         "height" : "320px"
  }
]}

Then do something like the following to retrieve the json file you created:

$.getJSON("images.json",function(data){
  $.each(data,function(i,image){
    var newImg = $("<img />").attr("src",image.src).css(image.css);
    $("#slideshow").append(newImg);
  });
});

This is untested code and could use a few tweaks to get working.

Resources to take a look at as well to get more information.

stackoverflow: jquery loop on Json data using $.each

jquery-api: http://api.jquery.com/jquery.getjson/

How to pull images from directory without server

2 Answers2