Recommendation for mass abundance file management

I have a photographer client who has 10,000 + photo files ( jpegs ) on their site. When on the site viewing the photographs, you have to click EACH one individually and X out of it when done viewing. Another words, no lightbox that allows scrolling through the photos.

I am searching for a method or recommendation on how to "drop"/transfer/convert the existing jpeg files into a lightbo开发者_运维问答x environment with out having to hand type each file indivually and place in the html structure.

Here is an example of one of his pages. You will see all the photos displayed as thumbnails. Click one and then it opens it in a lightbox. I would be open to be able to add a scroll function to the existing light box if possible

Thanks in advance.

---

My recommendation: Batch name all the files to some sort of pattern, like "Pic1, Pic2, Pic3" - something that can be accesed programmatically. Use your server-side language (if you're using one) to fetch the first 15 or so pictures and send them back. jQuery can then use the first 15 or so in the lightbox or whatever, and when you get past the first 15, make an Ajax call to call the next 15, etc.

---

You might be able to drop in a lightbox like prettyphoto and use jquery selectors to target your image links. And like tskuzzy said, if you want to be able to cycle through them from within the lightbox, you'll have to do a search and replace to add a rel attribute.

It might help if you describe how the page is currently built or have a link to it.

---

Depending on the structure of the current page, you could likely just do a smart find and replace. If it's a little more complicated, you could write a simple script to do the conversion for you.

EDIT:

Let's say you're current code is something along the lines of:

<ul>
    <li><a class="showimage" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
    <li><a class="showimage" href="pic2.jpg"><img src="pic2thumb.jpg" /></a></li>
</ul>

To put it into a lightbox environment, you'll want it to be in this format:

<ul>
    <li><a rel="lightbox" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
    <li><a rel="lightbox" href="pic1.jpg"><img src="pic1thumb.jpg" /></a></li>
</ul>

Then you'll need to find:

class="showimage"

and replace it with

rel="lightbox"

I hope that explains it. You'll have to post a snippet of your current code/html if you want a more specific answer tailored to your needs.

---

it seems that your friend created his own static html website for his portfolio. I would suggest, if your friend cannot afford a custom dynamic website (PHP, asp.net, jsp), he should subscribe to any blogging site that already has these management tools available.