Grow your CSS skills. Land your dream job.

#74: Editable CSS3 Image Gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked. But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime. Quick reminder, the demo is awesome-est in a WebKit browser (Safari or Chrome).

Links from Video:

Comments

  1. Permalink to comment#

    Really interesting… Probably gonna use this for one of my sites, or portfolio.

    Gonna keep on watching.

  2. Permalink to comment#

    Hey Chris,
    Once again great way to explain such a useful tutorial. I have one question: When you use the CSS 3 ‘scale’ property for an image, would it start getting pixelated if you scale it to a very large amount? This might not happen but just curious if the image maintains the quality by scaling it?

    -Thanks Henry

    • Permalink to comment#

      The image will behave just as it normally would if you put it on the page much bigger than the actual resolution. So if you scale it much larger, the image is not going to maintain the quality.

      One thing that you could think about is using an image that is somewhere between your small version and your large version. This isn’t ideal for page load times, but it will give you a better result when scaling the image up. Just my two cents.

  3. Ken
    Permalink to comment#

    Very cool! This is so helpful for a new web designer like me. Your screen casts are excellent. Thanks and keep ‘em coming.

  4. Tried the demo…pretty cool but was slow as hell (the zoom). Could be my browser so I will re-test when I close it down and reopen.

  5. Permalink to comment#

    Wow this really excites me ha. The randomized rotating is great. I Neeeed to look more into CSS3 and HTML5 – I’m not even sure of the browser support. Thanks for the introduction!

  6. Permalink to comment#

    Fantastic screencast Chris. I’ve been spending a lot of time reading HTML5/CSS3 articles lately — especially on transitions — not much out there on that. This screencast explained a lot. Tons of this to absorb. Thanks so much.

    Hope you got your backup issues resolved. Might want to try Disk Warrior if not. I’d be happy to send you my CD if needed.

  7. Permalink to comment#

    This is AWESOME! Great to see a new screencast, and a killer one at that!! Thanks for all you do Chris!

  8. I really need to do some more research on html5!

    My question is this, if now we can use html even with IE thanks to that little js file, SHOULD we be using html5 over xhtml strict?

    Is it embraceable on serious projects or is there still a downside? Surely google would love you for using it ?

    • My feeling at the moment is that HTML5 is mostly for YOU right now, not clients and not visitors. If it feels good to write it, and you want to be prepared for the future, go for it starting now. But there aren’t a whole lot of real tangible advantages to it just yet, and the one potential disadvantage of needing that extra JavaScript.

  9. Permalink to comment#

    Wow that was great to watch and take onboard.

    Gonna start reading up more on html5 and css3, it kinda excites me to think new techniques and styles will be usable in my work with such simplicity.

    Would also like to see your response to Greg above…

  10. hi,

    just seen the demo.looks great under pc mozilla firefox 3.5
    but with chrome output seems distorted. and in ie7 it doesn’t work. i guess there are filters there in ie to achieve the same effect you have demonstrated.

    overall its great tutorial….. :) thanks for that

  11. mattvot
    Permalink to comment#

    cool, love the tut.

    I do have a request too. How about a screencast explaining css grid systems and how to use them. I’ve tried to look into it, and I can see the benefits but it seems to complicated.

  12. Nice screencast , but when you edited the image in pagelime you changed the thumbnail only so if you clicked on it the old image appears , so is it possible to edit the image itself through pagelime ?

  13. Nice screencast as always!

  14. Permalink to comment#

    Awesome! I never thought of using transform like that, very nice! PageLime will also help me very much, thanks :)

  15. Permalink to comment#

    Opera 10 also support CSS3 transitions via -o-transition. Let’s not forget Opera!

  16. rob
    Permalink to comment#

    I hate to see people just give up on data, you really should request the old hard drive, I could almost guarantee everything is still there, it is probably just not bootable. I doubt it is “Dead” Also using something that creates a virtual volume to back files up is just an all around bad idea. Make exact copies directly to disk, not to an image file. You should consider off site backups as well, as hardware failure is not the only cause of data loss. Live and learn I guess.

  17. Permalink to comment#

    i really appreciate your hard work but still many of your tutorials are not cross browser compaitable even your website too is not working properly in ie like i have seen on your site you have used text-shadow, moz-radius, your css3 examples (rotating effect ,shadow effect, ex: – http://css-tricks.com/examples/CSS3PhotoGallery/ is not browser compaitable, the inbetween pop up effect on this is also not working fine in ie) Can you tell me any reason for not making it cross browser compaitable or reason behind using the moz-radius.

    • Permalink to comment#

      I think I am right in saying that ie doesn’t have a similar css attribute for rounding the corners. So you have to view it with square corners if your using ie. So if your going to use this method to round the corners design your site so that it will still look “ok” without the rounded corners when using ie.

  18. Permalink to comment#

    I haven’t read through this tutorial yet but I am looking forward to getting into HTML5 and CSS3!

  19. Designloper
    Permalink to comment#

    OT, I think the font and color syntax is nice for your IDE. what font is that?

  20. Permalink to comment#

    Nice one! I would still mark it up in xhtml 1.1, until the last call session is over (or is it over?!), but really nice!
    But one thing: header with the id=”header” kinda misses the point, does it? ^-^

  21. Just a quick note that the aside tag is not really to be used as the “sidebar” as described at.

    http://html5doctor.com/understanding-aside/

    • I think that’s a good point but I’m not sure if that’s going to stick or not. There really isn’t a good alternative for sidebars other than just a div. My prediction is that we’ll widespread use of aside as sidebars just since that word seems to feel write and after all, it’s just a block level element.

    • Permalink to comment#

      I kind of agree with you Chris. Also I started using html5 as soon as i watched this tutorial YAY.

  22. Permalink to comment#

    Really great tutorial! Although I won’t use all of it, I did apply some of it to the thumbs of my galleries.

  23. very good.

    Thank for share. ready useful

  24. Permalink to comment#

    How would you go about adding new images to a page with pagelime, or is this possible? Great screen cast alot of very useful information

  25. Piotr Bochniak
    Permalink to comment#

    Great screencast. I was researching transform implementation status in different browsers and found out that you can use this script to make it works in Internet Explorer (for sure IE8, don’t know about IE7, in IE6 it doesn’t work for me). It may be required to add “transform” property next to -moz/-webkit-transform in demo.js

  26. silvers
    Permalink to comment#

    wow what a great screencast!!

    i thought it was gonna be a standard vid about pic galleries so i decided to watch it, and then BAM! you start showing me all this cool new html5 stuff, so i was like “cool, i’ll get on that!” and then the cool tricks about rotating and changing scale with css3 came and i thought it wasn’t gonna get much better than that…

    and then you go and show us PageLime and you blew my mind!

    i have been asked a few times from clients about them being able to make their own changes and i always thought, nah it’s too hard, it would be cms and it’s too expensive blah blah and now i think this might be the solution!

    another legendary vidcast man. really glad you got ur comp stuff sorted!

    rock on dude, where would we be without you?!?!

  27. Permalink to comment#

    For those of you that use wordpress, I’ve turned this into a plugin that gets photos from flickr using a shortcode: http://wordpress.org/extend/plugins/fancyflickr/

    • Permalink to comment#

      Nice job Josh! I could definitely see some amateur photographers or even schools using this to manage content.

  28. Davids
    Permalink to comment#

    Hi Chris,

    Excellent vid. However I noticed that the Demo page does not work in IE8 and Firefox 3.0.x.

  29. Brian
    Permalink to comment#

    Chris,
    Loved the vidcast, pagelime looks like a great cms replacement!

  30. Prodyot
    Permalink to comment#

    Downloaded the fancyzoom a few minutes back.
    You created this way back in 2008 and it still continues to amaze people.
    It is awesome tool and you are a genius.
    Keep going.

  31. Paul Roberts
    Permalink to comment#

    Great tutorial – just found it after checking out PL and looks like exactly what my client is after.

    One key question, though, is the ability to add images rather than just edit existing ones through the PL interface, ans whether it’s straightforward for non-techie users to do. Did you work out whether this is possible in PL? If so, I’d love to hear how you achieved it…

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".