• 0

Photo Gallery Efficiency


Question

We're starting on our new version of my school's website. With this, I definitely need to create a better way to make the photo gallery. Right now I'm having to run an automator script which runs the images through and resizing them and creating thumbnails, then on the website I have to type for example;

<a href="images/gallery/peprally2/IMG_0425.jpg" title="" class="lightbox" rel="peprally2"><img src="images/gallery/peprally2/IMG_0425_t.jpg" /></a>

For EVERY photo I add. It's time consuming and cramps my hand. Our server runs asp.net. I've found a jquery plugin that can pull images from picasa and display them, but it's against the district rules of students adding content to the site without it being filtered by the teacher (our teacher has to upload our files).

So maybe a javascript file can be made to automatically add files from a folder?

Thanks :D

Edited by Classic DisastR
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

You cannot use JavaScript to read a folder, as the folder resides on the server while the script is executed on the client side. Not that you could read a folder even on the client machine, though, due to security reasons.

It is possible to do what you want with a little extra work or help from the server, though. Basically, you have 3 options.

If your image names are strictly sequential, you could keep a variable in the JavaScript of how many images there are in the folder. You could then run a loop to add that number of images to a page. Something like...

var cardinality = 10, html = '';

for (var i = 1; i <= cardinality; i++) {
	html += '<a href="images/gallery/peprally2/IMG_' + i + '.jpg" title="" class="lightbox" rel="peprally2"><img src="images/gallery/peprally2/IMG_' + i + '_t.jpg" /></a>';
}

$('#container').html(html);

Your second option, if your image names are not sequential, is to store an array in the JavaScript with your image names. The array would then get iterated similarly to the first example, just with a different kind of loop.

var names = ['apple', 'carrot', 'tomato'], html = '';

$.each(names, function() {
	html += '<a href="images/gallery/peprally2/IMG_' + this + '.jpg" title="" class="lightbox" rel="peprally2"><img src="images/gallery/peprally2/IMG_' + this + '_t.jpg" /></a>';
});

$('#container').html(html);

Your third option would be to use ASP.NET to read the image directory and then create a list of file names for your JavaScript. This would definitely be the best option, as that would truly give you the kind of automation you asked for, the kind where you never have to update the code.

However, I won't provide a direct example for this as there are too many different ways it could be done. I would personally use ASP.NET to create a names array (like in the second example) while the page is being generated. You could also use an Ajax request and return the listing in XML format, a JSON object or an HTML response with custom delimiters that you could then split into an array.

Edited by Hot
Link to comment
Share on other sites

  • 0

Here is what I've created.

Dim id
id= Request.QueryString("gallery")

'Begin Array for Around NMHS
Dim aroundnmhs(2)
aroundnmhs(0) = "IMG_0291"
aroundnmhs(1) = "IMG_0298"
aroundnmhs(2) = "IMG_0300"

'Begin Array for Colt Camp 09
Dim coltcamp(2)
coltcamp(0) = "IMG_5970"
coltcamp(1) = "IMG_5971"
coltcamp(2) = "IMG_5982"

For Each item In aroundnmhs
	Response.Write("<a href=""/nmhs/images/gallery/" & id & "/" & item & ".jpg"" class=""image""><img src=""/nmhs/images/gallery/" & id & "/" & item & "_t.jpg"" alt="""" hspace=""4"" /></a>")
Next

My only problem is changing "For Each item in aroundnmhs" -- to the id that would match the array without creating more than one For statement

Link to comment
Share on other sites

  • 0

Not sure why you can't use two for each statements....you could then just have a 2D array like so:

Pics(2) = (aroundnmhs, coltcamp)  'PS - I'm not sure if this is correct syntax, as I have not used VB/ASP.NET for a little while.

for each picSet in Pics
     for each pic in picSet
           ....show pic
     next
next

Still better though would be to stick the picture file names or file paths (whichever you need) into a database and pull them out. This way you can also easily associate other information with the picture (say a caption and date).

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.