Code

Making of the google image dropdown effect with Gridtab + Fancybox

Posted on May 11, 2017by bdanzer

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.

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
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

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

JavaScript
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

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

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.

 

Leave a Reply

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