Sliding AJAX Photo Browser

Original Photo Browser

Buy Print Photo Browser - Basic

Above is the original photo browser for the print details page on any Instaproofs photographer website. It highlighted the previous, current, and next photo for an event category and the previous and next images were also links to the actual print details page and if clicked would result in a new page request. Very clean, simple, and effective. You could browse the prints quicker with a search or category page, which also resulted in a new page request.

Sliding AJAX Photo Browser

Buy Print Sliding AJAX Photo Browser

Buy Print Sliding AJAX Photo Browser - Next

This is the updated photo browser for the print details page. Initially, the photo browser looks identical to the original version. When the page is loaded several additional print thumbnails from the event category are included in the hidden overflow. Then as you mouse over anywhere on the photo browser the previous and next buttons show up without red background and then turn red as the mouse cursor moves over each button respectively.

Clicking on either button, using JavaScript ( jQuery ), the viewing widow slides in the direction indicated and request up to two additional print thumbnails, via an AJAX call ( jQuery ), which are also links to the actual print details page shown.

History

This was a task from 2011 that I did for instaproofs.com.

Tags:

Related Posts

Extending colorbox.js

Colorbox is a very flexible lightbox plugin for jQuery which I have used for 2 to 3 years now and found virtually no limitations to what I’ve wanted to do with it. I’ve used it for many things like simple image previews, custom image cropping, image file uploads, as well as custom product checkout processes.

Read More

Redirect www to non-www

I personally prefer the non-www domain to the www.* sub domain which evolved from the traditional web beginnings. Here is a generic .htaccess redirect from www.domain.tld to domain.tld.

Read More

Enhance Angular.js Directive - ngRepeat

Recently I started a social Phone Gap project for a client and decided it would be wise to use a JavaScript framework. It was first suggested that I look into Backbone.js. I investigated it and did a little research and digging. I looked at Backbone.js, jQuery Mobile, Ember.js, various others, and Angular.js. The long and the short is I read a slew of reviews, some documentation, a bunch or tutorials, and in the end I decided to go with Angular.js for my framework of choice.

Read More