From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
nice! amazing work again.
Nice work Mary Lou,
as always the best jquery tuts over the net!!!
Nice work =] i love it
And… she did it again 🙂
Awesome gallery, Mary Lou!!!
nice :=!
Wow! Great work 🙂
I think there is a problem with the download link, please check it.
Thanks very much.
Nice! Is there a way to continue scrolling through all 9 images?
Just loved this – thank you for sharing this amazing gallery.
you rock ! thank for sharing this
Really beatifull, excellent work.
Thnx for sharing
Very cool, nice effects!
Very nice!
Can you prevent the downloading of images?
thanks a lot for this source…it’s amazing as always.. when i am reading my rss feeds .i cannot wait to see codrops tutorials…every time something new…thanks again
Fantastic! I’m using it for a site:
Thank you so mutch great idea.
http://nieuwewebsiteontwerpen.nl/portfolio/
Thanks, very good job!
Beautiful. Acts up a bit in ie9 beta …
Cool. Creative…Thanks
The result was outstanding.. the effect also interesting.. got to use it..
amazing work, i like your works.
A really nice work! Thanks a lot for sharing this work and files-
and please keep on publishing articles like this one!
Nice tutorial with great effect.
Thank you for sharing this great work.
Wow!Great job! where can I send the freshly grounded peppercorns! ; )
very nice
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?
Great job. RESPECTss !!!
Another 5* job from Mary Lou
Great work !
Very beautiful Mary! This is really well done!
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?
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)
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)
thanks a lot for sharing!!!
good job.. i like it
nice i use it 🙂
Just Great!!!!!
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
Hi, Nice work mary.
how can we include thumbnails of picture group like accessories, dresses etc inside of gallery. Plz. answer.
Thanks in advance.
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!!!!
Hi ML I love your input the the designers world!
Hi sroomy; it is the backgound image of h1 in style.css
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.
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.
Amazing work ! Thank u Marry 😉
Im trying to get the boxgallery to work online, but will not work. It only shows the box, but the link is not working to open the box…
🙂
Please help me
Is there a way that I can avoid from having to crop the images when uploaded?
Thank you 🙂