Making of the google image dropdown effect with Gridtab + Fancybox

Hello!

I recently was tasked with making a website gallery page, https://jeffmayart.com/nature-and-wildlife-themed-art/,  that needed a dropdown effect for sculpture art. I did make more adjustments after the site was transferred by adding a single-{post-type}.php page template and a few things. So I am going to go over some of the code snippets so you can also create it as well. I’d also love to hear any suggestions. But let’s get to it.

Here is to view the final work: http://testing.bdanzer.com/upwork/

What you’ll need to do is download this file set:

Here is my functions.php file that enqueues these files plus some of my files which I will include: bdanzer.js, and bdanzer.css.

 

Bdanzer.css

 

Bdanzer.js

Now that those are enqueued we need to set the page templates. You can always change template page names but you will have to go through all the files and make sure they match.

Upwork.php

 

Template-port.php

In conclusion,

It took quite a bit of effort to get the effect I was looking for but I was satisfied with the end result which you can view here: http://testing.bdanzer.com/upwork/. If you have suggestions I’d love to hear them. Thanks for reading and let me know if this was helpful.

 

Leave a Reply

Your email address will not be published. Required fields are marked *