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:
- Gridtab: https://gopalraju.github.io/gridtab/
- You actually don’t need but you can at least see the inspiration. I originally did start with it but was having issues with the filtering so I added some of my own js files but kept the html structure of gridtab and changed it around a bit as well to use divs.
- Lightbox: http://fancyapps.com/fancybox/3/
- WordPress Plugin, Multiple post thumbnails, https://wordpress.org/plugins/multiple-post-thumbnails/
Here is my functions.php file that enqueues these files plus some of my files which I will include: bdanzer.js, and bdanzer.css.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
//Bdanzer Testing function bdanzer_scripts() { //Bdanzer Main Styles wp_enqueue_style( 'bdanzer.css', get_template_directory_uri() . '/bdanzer/bdanzer.css' ); wp_enqueue_script( 'bdanzer.script', get_template_directory_uri() . '/bdanzer/bdanzer.js', array('jquery'), '1.0.0', true ); wp_enqueue_script( 'googlefont-Montserrat', 'https://fonts.googleapis.com/css?family=Montserrat' ); wp_enqueue_script( 'googlefont-Roboto', 'https://fonts.googleapis.com/css?family=Roboto' ); //Fancybox wp_enqueue_script( 'fancybox.js', get_stylesheet_directory_uri() . '/bdanzer/lightbox/jquery.fancybox.min.js', array( 'jquery' ), '1.0.0', true ); wp_enqueue_style( 'fancybox.css', get_template_directory_uri() . '/bdanzer/lightbox/jquery.fancybox.min.css' ); wp_enqueue_script( 'lightbox', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js' ); wp_localize_script( 'bdanzer.script', 'bdanzer', array('ajaxurl'=>admin_url( 'admin-ajax.php' )) ); } add_action( 'wp_enqueue_scripts', 'bdanzer_scripts', 11); // Define additional "post thumbnails". Relies on MultiPostThumbnails to work if (class_exists('MultiPostThumbnails')) { new MultiPostThumbnails(array( 'label' => '2nd Feature Image', 'id' => 'feature-image-2', 'post_type' => 'product' ) ); new MultiPostThumbnails(array( 'label' => '3rd Feature Image', 'id' => 'feature-image-3', 'post_type' => 'product' ) ); new MultiPostThumbnails(array( 'label' => '4th Feature Image', 'id' => 'feature-image-4', 'post_type' => 'product' ) ); new MultiPostThumbnails(array( 'label' => '5th Feature Image', 'id' => 'feature-image-5', 'post_type' => 'product' ) ); new MultiPostThumbnails(array( 'label' => '6th Feature Image', 'id' => 'feature-image-6', 'post_type' => 'product' ) ); }; add_action( 'wp_ajax_filter_ports', 'filter_ports' ); add_action( 'wp_ajax_nopriv_filter_ports', 'filter_ports' ); function filter_ports(){ ini_set('display_startup_errors',1); ini_set('display_errors',1); error_reporting(-1); $offset = $_POST['offset']; $category = str_replace('.', '', $_POST['category']); $args = array( 'post_type' => 'product', 'posts_per_page' => $_POST['posts_per_page'], 'offset' => $offset, ); if ( $category != 'all' ) { $args['category_name'] = $category; } $query = new WP_Query( $args ); if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); get_template_part( 'template-pages/template', 'port' ); } } else { } exit; } |
Bdanzer.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 |
/*Quick Changes*/ .portfolio { float: left; width: 25%; } .portfolio .entry-content { display: none; } .filter-buttons li { display: inline-block; margin: 0 10px; } .filter-buttons li span { background: #C3AD89; color: #fff; padding: 5px 10px; font-family: Montserrat; text-transform: uppercase; font-size: 15px; } .filter-buttons li span.active { background: #fff; color: #333; border: 1px solid #000; } .port-items { margin: 0 auto; width: 80%; position: relative; min-height: 430px; font-size: 0; } .port-item { width: 33.33%; box-sizing: border-box; padding: 10px; display: inline-block; transition: all linear .3s; opacity: 1; font-size: 1rem } .port-item .port-expander { display: none; } .port-item .port-expander { display: none; position: absolute; left: 0; right: 0; z-index: 1; background: #363533; padding: 20px; margin: 10px; box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.61); } .toShow { transition: transform 1000ms; height: auto; opacity: 1; visibility: 1; } .toHide { opacity: 0; transform: scale(0); } @media only screen and ( max-width: 767px ) { .port-items { width: auto; } .port-item { width: 50%; } } /*Random Changes*/ figure img { height: 131%; max-width: 100%; object-fit: cover; width: 100%; } .bdanzer-container { overflow: hidden; color: white; } .bdanzer-left { width: 50%; float: left; } .bdanzer-right { width: 50%; float: right; padding: 0 50px; } a.close { position: absolute; top: 10px; right: 10px; background: #c3ad89; color: white !important; text-decoration: none; font-family: montserrat !important; padding: 0px 10px; } .bdanzer-right-content { background: #C3AD89; padding: 1px 25px; } .bdanzer-right p { font-family: 'Roboto', sans-serif; } .bdanzer-right a { font-family: roboto, 'sans-serrif'; color: #c3ad89; } .bdanzer-right a:visited { opacity: 0.7; } .bdanzer-container h1 { font-family: montserrat; font-size: 27px; text-transform: uppercase; } ul.post-categories { clear: both; margin: 0px; padding: 0px; display: inline-block; } ul.post-categories li { display: inline; } .entry-content a, .entry-content a { border: none; } .entry-content a:hover, .entry-content a:focus, .entry-summary a:hover, .entry-summary a:focus { border-bottom: none!Important; box-shadow: none !important; } .bdanzer-featured { text-align: center; } .bdanzer-featured img { border: 1px solid #c3ad89; } /*Lightbox*/ .bdanzer-thumbnails img { float: left; width: calc(33.3333% - 20px); margin: 0 10px; border: 0.1px solid #C3AD89; height: 135px; object-fit: cover; } .bdanzer-thumbnails { overflow: hidden; clear: both; margin-top: 10px; } /*Figcaption*/ figcaption { text-align: center; } figure { margin: 0; padding: 0; height: 195px; position: relative; display: block; cursor: pointer; overflow: hidden; } figure:hover figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); opacity: 1; top: 0; } figcaption { -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); filter: alpha(opacity=0); opacity: 0; position: absolute; height: 100%; width: 100%; background: rgba(0,0,0,.5); color: #fff; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; -webkit-transition-delay: .5s; -moz-transition-delay: .5s; -o-transition-delay: .5s; -ms-transition-delay: .5s; transition-delay: .5s; } figcaption h3 { font-family: Montserrat; font-weight: 400; padding: 0px 20px; margin-bottom: 0; position: relative; right: 100%; text-transform: uppercase; font-size: 25px; color: white; margin-top: 17%; } figcaption p { font-family: 'Open sans'; padding: 0px 20px; margin-bottom: 0; position: relative; left: 100%; font-size: 13px; } figure:hover h3,figure:hover p { left: 0; } figcaption a { color: black; border: 2px solid #fff; padding: 4px 10px; text-decoration: none; background: white; font-family: montserrat; } figcaption a:hover { color: #4f5856; background: #fff; } /*Filter*/ ul.filter-buttons { text-align: center; margin: 0px; padding: 0px; padding-top: 60px; } /*Ajax*/ a.bdanzer-ajax-load { text-decoration: none; color: #c3ad89; border: 3px solid #c3ad89; border-radius: 30px; padding: 10px 35px; font-family: 'Roboto', sans-serif; display: inline-block; text-transform: uppercase; font-size: 16px; margin-bottom: 30px; } a.bdanzer-ajax-load:hover { background: #c3ad89; color: white; transition: 0.7s; } /*@Media 767*/ @media screen and (max-width: 767px) { .bdanzer-thumbnails img { /* float: left; */ width: calc(33.3333% - 20px); height: 90px; } .bdanzer-left, .bdanzer-right { width: 100%; } .gridtab--0 { width: 100%; margin: 40px auto 40px; } } |
Bdanzer.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 |
jQuery(document).ready(function($){ $('body').on('click','.port-item .port-contents',function(e){ var el = $(this); if ( el.parent().find('.port-expander').is(':visible') ) { $('.port-expander').removeClass('active').slideUp(300); $('.port-item').css('margin-bottom',0); return; } $('.port-item').css('margin-bottom',0); $('.port-expander').removeClass('active').slideUp(300); setTimeout(function(){ el.parent().css('margin-bottom',1500); },290) setTimeout(function(){ el.parent().find('.port-expander').addClass('active').slideToggle({ complete: function(){ if ( $(this).is(':visible') ) { var h = $('.port-expander.active').outerHeight(); $(this).parent().css('margin-bottom',h); } $('.port-expander:not(.active)').slideUp(); } }); },300) }); $('body').on('click','.port-expander .close',function(e){ e.preventDefault(); $(this).parents('.port-expander').slideUp(); $('.port-item').css('margin-bottom',0); }) $("[data-fancybox]").fancybox(); $('.filter-buttons').on( 'click', 'span', function() { $('.filter-buttons li span').removeClass('active'); $(this).addClass('active'); var l = $('.port-item:visible').length; var filterValue = $(this).data('filter'); if ( filterValue == '*' ) { var noposts = 'No more posts to load'; } else { var noposts = 'You\'ve loaded all the content for this category'; } if ( $(this).hasClass('no-posts') ) { $('.no-posts-loaded').show(); $('.bdanzer-ajax-load').hide(); } else { $('.bdanzer-ajax-load').show(); $('.no-posts-loaded').hide(); } if ( filterValue != '*' ) { $('.port-item:not('+filterValue+')').addClass('toHide'); setTimeout(function(){ $('.toHide').hide().removeClass('toHide'); $(filterValue).show(); },300) } else { $('.port-item').show(); } }); $('body').on('click','.bdanzer-ajax-load',function(e){ e.preventDefault(); var filter = $('.filter-buttons span.active').data('filter'); var params = { action: 'filter_ports', posts_per_page: 9 } var l = $('.port-item:visible').length; var d = l % 9; params['offset'] = l; if ( l < 9 ) { params['posts_per_page'] = d+l; } if ( filter == '*' ) { params['category'] = 'all'; var noposts = 'No more posts to load'; } else { params['category'] = filter; var noposts = 'You\'ve loaded all the content for this category'; } $.post( bdanzer.ajaxurl, params, function(result){ if ( result != '' ) { $('.port-items').append(result); $("[data-fancybox]").fancybox(); } else { $('.bdanzer-ajax-load').hide(); $('.no-posts-loaded p').text(noposts); $('.no-posts-loaded').show(); $('.filter-buttons span.active').addClass('no-posts'); } } ) }) }) |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php /* Template Name: Upwork */ ?> <?php get_header(); ?> <ul class="filter-buttons"> <li><span class="active" data-filter="*">All</span></li> <?php $categories = get_terms(array('taxonomy'=>'category')); foreach ($categories as $category) { printf('<li><span data-filter=".%s">%s</span></li>',$category->slug, $category->name); } ?> </ul> <div class="port-items"> <?php $args = array( 'post_type' => 'product', 'posts_per_page' => 9 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); get_template_part( 'template-pages/template', 'port' ); endwhile; ?> </div> <p style="text-align:center;"><a href="" class="bdanzer-ajax-load">Load More</a></p> <div class="no-posts-loaded" style="display: none; text-align: center;"><p>You've loaded all the content for this category</p></div> <?php get_footer(); ?> <?php wp_footer(); ?> |
Template-port.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<div class="port-item <?php foreach((get_the_category()) as $category) { echo $category->slug .'';} ?>"> <div class="port-contents"> <figure > <img class="port-trigger" alt="<?php the_title(); ?>" src="<?php the_post_thumbnail_url('full'); ?>"> <figcaption> <h3><?php the_title(); ?></h3> <p><!--<a href=" <?php //the_permalink(); ?> ">Read More</a>--><a onclick="event.preventDefault();" class="bdanzer-open">Open</a></p> </figcaption> </figure> </div> <div class="port-expander"> <div class="port-expander-contents"> <div class="bdanzer-container"> <div class="bdanzer-left"> <h1 style="text-align:center;">Thumbnails</h1> <div class="bdanzer-featured"> <a href="<?php the_post_thumbnail_url('full'); ?>" data-fancybox="<?php the_ID(); ?>" data-caption=""> <img src="<?php the_post_thumbnail_url('full'); ?>" alt="" /> </a> </div> <div class="bdanzer-thumbnails"> <div class="bdanzer-thumb-box"> <?php // Checks if post has a feature image, grabs the feature-image and outputs that along with thumbnail SRC as a REL attribute if (class_exists('MultiPostThumbnails')) { // Loops through each feature image and grabs thumbnail URL $i=1; while ($i<=6) { $image_name = 'feature-image-'.$i; // sets image name as feature-image-1, feature-image-2 etc. if (MultiPostThumbnails::has_post_thumbnail('product', $image_name)) { $image_id = MultiPostThumbnails::get_post_thumbnail_id( 'product', $image_name, $post->ID ); // use the MultiPostThumbnails to get the image ID $image_thumb_url = wp_get_attachment_image_src( $image_id,'small-thumb'); // define thumb src based on image ID $image_feature_url = wp_get_attachment_image_src( $image_id,'feature-image' ); // define full size src based on image ID $attr = array( 'class' => "folio-sample", // set custom class 'rel' => $image_thumb_url[0], // sets the url for the image thumbnails size 'src' => $image_feature_url[0], // sets the url for the full image size ); // Use wp_get_attachment_image instead of standard MultiPostThumbnails to be able to tweak attributes $image = wp_get_attachment_image( $image_id, 'feature-image', false, $attr ); echo '<a href="', $image_feature_url[0], '"data-fancybox=', the_ID(), ' data-caption="">', $image, '</a>'; } $i++; } }; // end if MultiPostThumbnails ?> </div> </div> </div> <div class="bdanzer-right"> <a class="close" href="#close">X</a> <h1 style="text-align:center;"><?php the_title(); ?></h1> <div class="bdanzer-right-content"> <p><?php the_content(); ?></p> </div> <p style="display:inline-block"><strong>Categories:</strong></p> <p style="display:inline-block"><?php the_category(', '); ?></p> </div> </div> </div> </div> </div> |
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.