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

General Discussion

Jason Broderick
Jason Broderick
7,361 Points
Posted by Jason Broderick
Jason Broderick
7,361 Points

Multimedia Galleries in HTML5 / CSS3 / jQuery - What is the best solution?

Hi Guys and Gals,

So I am working on my first professional project thanks to my last few months in training with Treehouse!! (woop woop)

I am building a website for an Actor and need to include multimedia (photos, videos, audio) in some sort of gallery on their site. I have been researching the best ways to do this for a few days now but want some suggestions from you guys on your solutions.

So far I am looking at jQuery plugins as I am not yet competant writing jQuery and although I would prefer to hard code it myself I think this will probably be the quickest, most professional looking solution. I am looking at things like "Shadowbox", "Nova Gallery", "jQuery Content Slider"...

What are your suggestions?

How easy would it be to code myself with no plugins, and how would I do that? Are ther any resources you can point me to? I tried looking for a training video on multimedia in treehouse but can't find what i'm looking for.

Worst comes to worst, how can I combine "Shadowbox" to work with "jQuery Content Slider"

Thanks for your help guys! Jason.

5 Answers

Samuel Johnson
Samuel Johnson
9,152 Points
Samuel Johnson
Samuel Johnson
9,152 Points

To code this completely from scratch could be very difficult and very time consuming, i would opt for looking options displaying pictures using CSS similar to how ive done in my portfolio page (realise its a work in progress but could give you some direction).

If not and you just want a simple gallery i would look at something like LightBox, i used it to display a garden design and worked very well.

Samuel Johnson
Samuel Johnson
9,152 Points
Samuel Johnson
Samuel Johnson
9,152 Points

Updated the link! my mistake...

Jason Broderick
Jason Broderick
7,361 Points
Jason Broderick
Jason Broderick
7,361 Points

Yea thats what I was thinking, can't see your website just shows up as a blank page but I can imagine what you mean.

To my mind a gallery plugin like LiteBox (or shadowbox or nova or whatever) is the best option. Im just looking for other suggestions to compare really.

Do you know anything about LiteBox Vs Shadowbox etc?

Which are the most popular ones?

Samuel Johnson
Samuel Johnson
9,152 Points
Samuel Johnson
Samuel Johnson
9,152 Points

Lightbox is very simple and easy to get something up and running, I havent fully used Shadowbox but lightbox is up in less than a min so up to you.

Il have to have a look at shadow box for my next project! :)

Jason Broderick
Jason Broderick
7,361 Points
Jason Broderick
Jason Broderick
7,361 Points

Looks good mate, Like the one-page design, will be using something similar for my own site when I get around to it!!

So your "my-projects" section is just using CSS transformations right?

Thats how I would hard code it too but I also like the whole "pop-out" javascript windo type gallery thing. I havent the first clue about jQuery.

Can a layout/animation like this header http://www.rsjoomla.com/ be coupled with pop out windows like you find in litebox / shadowbox? For example the tiger image halfway down here - http://www.shadowbox-js.com/index.html

Samuel Johnson
Samuel Johnson
9,152 Points
Samuel Johnson
Samuel Johnson
9,152 Points

Thanks, theres still a lot of work i want to do with regards to linking up hierarchy on the page for the font sizes and some other things but its a good start, just been too busy with other projects to change it!

Yes thats right the my-projects sections is purely using css.

jQuery is very easy once you get started, Lightbox was the easiest one for me;

  • I just added the files to the correct location in my local folder(js files, image files, css)
  • Then you add the linking at the top of the page (in the header.php file ideally but you can change it to only be including on one page)
  • Then style your content adding the correct classes to the div elements.

Once you've done it once it will become second nature.

If any problems appear normally linked to your original css files then check them out using the 'inspect element' or Firebug. I personally prefer the inspect element much easier and simple.