Forum Contest: Photo Gallery

Awesome, let's get this party started! Good luck to all :)

Party Time!

I'm pretty solid behind the camera, not so much with the code. One day I'll join these contests in confidence; until then I'm interested to see everyone's entries! Good Luck!

Good now to fry up some code elements for Super. I am in!

I did a picture gallery in ruby, can I enter the contest with that?

Hey Nick Pettit,

Mind if i enter the contest via a live link or a Github submission?

Here is my ruby project of the Picture Gallery.

This application works perfect if you have a album that you want live on a website! Choose a folder with pictures (png,gif,jpg are allowed) and then my program will upload them on a HTML page as a nice looking album.

https://github.com/itgsod-marcus-tisater/Picture-Gallery

Does the entire code have to include Javascript, or can it be HTML and CSS only?

Hey Everybody!

Here is my entry:

code: http://jsfiddle.net/kylenoble/8Wf8r/ result: http://jsfiddle.net/kylenoble/8Wf8r/embedded/result/

This was tough but a lot of fun! Any feedback, criticism, advice, etc. is more than welcome.

Thanks,

Kyle

Thank you so much Lawrence Cousino! There was a bug in Firefox but I updated it so it should work now. Thanks for pointing that out. Washington state is beautiful. Those pictures are of my two favorite places in Seattle.

James Barnett- Is it ok if I leave it in jsfiddle? Codepen.io doesn't seem to allow the window.open() method while jsfiddle does.

Here's my entry -- Result & Code

Some features:

• pulls in Dribbble popular shots
• CSS3 transitions on hover
• simple lightbox for larger view

Here goes :) pen

Features - pseudo ::after ::before transitions.

Ok here it is! (http://cdpn.io/CAyiL) [http://cdpn.io/CAyiL]

html5 - css3 - jquery

A special thanks to Zachery Campbell for sharing such amazing photos!

Here is mine; only with HTML and CSS.. I hope everyone enjoys! Full page: [http://cdpn.io/cBjbu] On codepen: [http://codepen.io/technickal1/pen/cBjbu]

Here's my attempt, hopefully I've linked it right: http://codepen.io/Nhorn/full/Fjwpv

Was fun to make anyhow:)

Amazing entries so far, guys! :) Some serious talent in here.

Had a go and came up with this: http://codepen.io/jamesanwyl/full/wxpFL . Built with h5bp / initializr and flexslider . Really struggled with this challenge and its still got plenty of bugs but learnt so much so thanks! Wish I had another week to start over again lol.

Any feedback is much appreciated :)

Here is my entry:

Result: http://codepen.io/jroman/full/sfHID

Code: http://codepen.io/jroman/pen/sfHID

Here is my entry: http://cdpn.io/qIHJw

Its a fully responsive design, and it takes up the full width to really showcase the photo's. Hope you guys enjoy!

Here is my entry - http://www.jnelson.co.uk/Jnelson/image_gal/index.html

Zachery Campbell designed it as if someone was looking at you're account on a photography app ;) Thanks again for the images

So I built this photo gallery to be most functional for users that actually have a numeric keypad on their keyboards, but I tried to make it as usable as possible for mobile devices and regular computers also:

http://cdpn.io/JuAlL

(Quick sidenote: you may need to click once in the window area in order to use the keyboard to highlight photos; not sure if there's a way to circumvent that, but any feedback is appreciated!)

Below is a link to my entry. All feedback and critique is welcome and appreciated.

http://cdpn.io/AjCiz

Submission: code \ (http://codepen.io/demetriusPop/pen/nIimC) full page \ (http://codepen.io/demetriusPop/full/nIimC)

Built with bootstrap and a bit of jQuery. Pen doesn't seem to accept svg, so my design suffered slightly (SOBB..)

I'm calling it a night too ;0)

Here is my entry link As always feedback is welcome.

Whens the due date? Oh well... heres what I came up with just now.

Wow, you all made some fantastic entries! This was the toughest decision yet. I really do mean that, too. I went back and forth a few times and had to scrutinize a lot of code.

In the end, Charlie Hield won overall. His Dribbble gallery has some really wonderful code and a simple, beautiful layout. Here's why Charlie had the best entry:

• The HTML is well structured and semantic.
• The SCSS is pretty clean and uses some fairly advanced properties, including nth-child selectors, transitions, zoom-in cursors, and more.
• The border-box sizing on all elements is a newer idea that's been gaining a lot of traction. Cool to see it used in the wild.
• The fixed position vertical and horizontal centering for the lightbox is a very smart choice.
• The use of the Dribbble API to pull in shots is great, and the jQuery overall is well done.

Congratulations, Charlie! This is a really great entry. :)

Grats Charlie Hield!!

Woot! Thanks Nick, it was a fun one to work on.

Congrats, Charlie Hield! Great work, and awesome job to everyone who participated :)

One more thing! This week's new contest is now available and it's all about CSS animation.