Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Michael Colman
Michael Colman
5,099 Points

Jquery Gallery Script Issue

Hi All,

I have a current project for a client.

The main objective of the site was to build a photo gallery as my client is a makup artisit.

The brief was to build a gallery similar to jesseobrien.com.au/photo-iii/ - however, my client provided the designs from her designer, with the main functionality "click and drag". I found the perfect jquery script on CodeCanyon to enable the "click drag" concept.

codecanyon.net/item/touchcarousel-jquery-content-scroller-and-slider/896401

website: http://ecentriconline.net/monica/beauty/

I spent about a month manipulating the javascript to make it easier for users to scroll through. I inserted an autoscroll (which is currently up, but very clunky) and the ability to use the left and right keypad.

I spoke to my client and explained that if we want to achieve the "jesseobrien" site we will need to remove the left hand navigation pane and I can create the horizontal scroll easily through CSS. When I told her this she said that she wants that left hand navigation there and I must work it all out.

I guess my question is;

Is it possible to create the jesseobrien horizontal scroll with the navigation on the left hand side. We don't have to worry about the "click and drag"

Please note I have built a responsive design, so the gallery also needs to be responsive.

OR does anyone have any other solutions?

Thanks, Michael

2 Answers

Robert Willie
Robert Willie
804 Points
Robert Willie
Robert Willie
804 Points

Hi Michael,

All you'd need to do to create the Jesse Obrien effect is play about withs some overflows...

http://jqueryfordesigners.com/fun-with-overflows/

http://jqueryfordesigners.com/demo/scrollable-timelines.html

You'd position your nav to the left - overflow to the right... that should work. And on mobile, use media queries to display the nav elsewhere (above maybe?)

Should work ok.

Rob

Michael Colman
Michael Colman
5,099 Points
Michael Colman
Michael Colman
5,099 Points

Thanks for this Robert. I think I might just go down the path with basic HTML/CSS. I do like this script though. Might be able to include in another project :)

Thanks