B&W Box Gallery

In today’s experiment, we created a little gallery that plays with the black and white versions of images. The idea is to have an initial grid-like view of the different categories or albums. In the background we can see the black an white version of the current image of the hovered album. […]

View demoDownload source

In today’s experiment, we created a little gallery that plays with the black and white versions of images. The idea is to have an initial grid-like view of the different categories or albums. In the background we can see the black an white version of the current image of the hovered album.

The hovered item will have a color animation. This we create using John Resig’s Color Animations plugin which you can find here: jQuery Color Animations Plugin

When we click on the album or list item, the colored version of the image fades in, and we are in the “gallery mode” where we can navigate through the images.

When we go back now, the current image that we are viewing will fade to its black and white version and the grid with the album items will become visible again.

We hope you like this little gallery experiment!

View demoDownload source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 44

Comments are closed.
  1. 1

    Nice tutorial with great effect.

    Thank you for sharing this great work.

  2. 4

    I would actually like to see how well this works as a menu. How can I change the script to allow the links (ie: “Accessories” “Dresses”) to link to webpages rather then have them trigger the image gallery?

  3. 9

    This is very beautiful Mary! Really great job. Awesome design and amazing functionality :) I would like to use it in a project. Couldn’t find any information regarding its license, though. Is it free to use in commercial projects?

    • 10

      Hi pb, thank you! And yes, it is totally free, go ahead and use it :) Cheers, ML (if you use any of the images, please link back to them, they come with an attribution license)

  4. 11

    you guys are amazing! thx for this great tutorial!

    just have 3 questions:
    1. is it possible to use html content instead of img?
    2. is it possible to have more then one level of the menu before the content shows up? like childs of dresses –> again menu –> img/html/content
    3. if it is free can i contact you for customization (.1 and .2)? (payed of course)

  5. 16

    Hi, perfect for my use!

    On the other hand, someone knows a trick to make it works in iPhone/iPad screen device…. ?

    Thanks for help

  6. 17

    Hi, Nice work mary.
    how can we include thumbnails of picture group like accessories, dresses etc inside of gallery. Plz. answer.
    Thanks in advance.

  7. 18

    Nice Work Mary Lou, just one question:

    How do I rename “B&W Box Gallery with JQUERY” to my desired name?
    BTW: “B&W Box Gallery with JQUERY” is the heading in the far left side of the page.

    Thanks! Always loved your WorK!!!!

  8. 19

    Hi ML I love your input the the designers world!

    Hi sroomy; it is the backgound image of h1 in style.css

  9. 20

    Thanks Dirk!
    Another question: How do i make the links work? Like Im dividing the sections into headings and then when you click a section like dresses, you see subheadings. Then when you click the subheadings, you see the pictures… If you dont understand please tell me where i can contact you.

  10. 21

    I tried to download the BoxGallery
    and upload all the images and scripts into the server. However, the animation can play on my pc but not on the browser. Can anyone help.

Comments are closed.