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

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

PHP Decorator Class

Last year I was given the challenge of adding multiple tiered discounts, simply put as bulk discounts on a large scale custom shopping cart system. The goal was to provide shop owners with the ability to give their customers discounts for buying any product in bulk and that could be configured on a per-product basis.

This shopping cart system hosted multiple stores,upwards of around 30,000 users and grows each month by several hundred. Also each product is setup in a group, when enabled these discounts could be one of two types: Fixed, Compound.

Read More
Switch to Hugo

Switch to Hugo

Over the years, there have been numerous apps and libs for managing one’s own website. Collectively these can be referred to as content management systems (CMS) and the majority started out as a combination of some programming language paired with a storage backend (database).

Read More