Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using Javascript to load all images from a folder, in a certain way!

Status
Not open for further replies.

gorkamolero

Technical User
Mar 2, 2011
3
ES
Hello everyone!
This is my first post. I know some html and css, but not much about javascript, and I have an existential problem with a portfolio i'm helping to design:

The portfolio itself is for a night photographer that covers different events. For each event there is a page where the photos from that event are displayed.
The thing is i don't want to write html code for each and every event, so i've been investigating how to automate this process and i've been answered: javascript.

I want a horizontal layout page for each event, where all the images from its folder are displayed, with a horizontal scrollbar and no vertical scrollbar. I've managed to cover this with a combination between css and javascript code.

The javascript code i'm using:

<script src="../../docs/js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

$(function(){
$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
$(".post").wrap("<td>");
});
</script>

Then i call for each image in the body of the html page:

<div id="page-wrap">
<div class="post">
<img src="../../images/baobab04.02.11/1.jpg" width="720" height="480" border="0" />
</div>

<div class="post">
<img src="../../images/baobab04.02.11/2.jpg" width="720" height="480" border="0" />
</div>

</div>

I've read about this function to loop for each image in a directory:

foreach(string fileName f in Directory.GetFiles("SomeDirectory"))
{
...
}

But i'm lost as to how to implement it and make a new <div class="post"> for each file in the directory.

Thank you all in advance
 
Javascript is for all purposes incapable of reading a directory and recursing through its files, whether it be local to the client machine or remote in the server serving the page. JS just can't access it.

GetFiles is a VB function. Used in what is known as an activex Control to access the files. Assuming what you want to read is on a server somewhere, that will be of little use anyway, as the function attempts to open a directory in the client machine. . Also Activex, and by extension VB code will only correctly run on Internet Explorer. Browsers like Firefox, Safari etc.. will be incapable of rendering your images at all.

Your best bet is to use a server side language like PHP or ASP, to get the files in the directory and generate the image divs as necessary.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top