Solved

How to display thousands of photo thumbnails on webpage

Posted on 2013-12-19
5
351 Views
Last Modified: 2013-12-19
Dear Experts,

I have a over 6000 thumbnails (student photos) for our district that I need to display on a webpage. Does not need to be fancy. I just need to display a grid of say 10 by 600 on a page. I would like to upload all the small images to my webserver and simply have the webpage load all the image from the file. I am not using any kind of server side scripting language like cold fusion, PHP, ASP, etc. Can this be done using XML, Jquery, etc.

Need this kind of in a hurry.

Thanks!
0
Comment
Question by:shogun5
  • 2
  • 2
5 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 334 total points
Comment Utility
Wow, that's 6000 server requests every time the page is loaded. Assuming they are all on one page. That's going to take a very long time to load. The host may not like that. It could look like a DOS attack to the server.  There's no way of dividing them up over several pages? Do they each have a caption under them, the student's name perhaps? Will the images change regularly or remain static? Maybe you could use a continuous scroll technique and ajax to load them in groups of 300 or so. OR, if they are static images, you could combine several hundred into sprite images and reduce the number of server requests dramatically.
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 166 total points
Comment Utility
If you're not going to type the filenames into the page, it requires a server-side script to get the file names for the images.

I have a page that has about 100 thumbnails.  It takes about 9 seconds for the page to load on my high-speed connection.  You have 60 times that.  Quick arithmetic says that it will take about 9 minutes for a page with 6000 images to load.  It is unlikely that anyone will stick around long enough to scroll thru all the images after they have loaded.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 334 total points
Comment Utility
You need something like this jQuery plugin to load only the images in the viewport. Then, on scroll of the page, load the next batch.

http://www.appelsiini.net/projects/lazyload
0
 

Author Closing Comment

by:shogun5
Comment Utility
Thanks all! I am going to use adobe bridge to automatically create my image gallery. Bridge automatically creates a 8 x 5 grid and then adds the (next) button appropriately. Since I have a copy of CS6 on my computer this was the easiest solution.

Thanks all! Cheers and Happy Holidays!
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Good choice and thanks for the points.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now