NextGen Customized LightBox

Hi all! I’m creating a product portfolio for a client. Their products are grouped by a product category. So the list of all product categories are displayed and then when an item from this list is selected, a thumbnail image gallery of the particular products in that category will appear.

Also, when an image in this gallery is clicked, a lightbox appears containing the image category, image name, image picture, image description, a link that can direct user to an order page, and a sharing plugin for social networking sites. This image gallery can contain up to a maximum of 10 images, however I only want to display at least 5 images in the page and have the rest loaded via ajax when the next button is pressed. I thought of two implementations for this:

Implementation A:
Here, I’ll use the Participant Database plugin so I can put everything together. I’ll just manipulate the database via the dashboard so when I clicked Category A, all products of category will already appear as a thumbnail gallery. Through ajax, I’ll access participants database and then load every info when the image is clicked. A lightbox implemented via jquery.colorbox() will then appear.

Problem: for the thumbnail gallery, how do I go on dividing the images to display the first 5, and then load the next batch via ajax?

Implementation B:
Here, I’ll use the nextgen gallery. Instead of using participants database, I’ll use the albums in the nextgen plugin to store all information. I may need the custom fields plugin to store the other info.

Problem: should I use the built in lightbox effect of nextgen, call jquery.colorbox(), or use another lightbox plugin to implement with nextgen thumbnail gallery? When I choose to create custom js, is there a hack where I can put an onclick event when an image is clicked?

Can you please help me guys on the workaround here?