Implementing the lightbox effect into Genesis Simple Filter Plugin

For lightbox effect I’m using the Easy Fancybox plugin. Download the plugin from WordPress plugin’s repository and activate on your server.

If you have not Genesis Simple Filter plugin then you can buy it from here and setup it on your server.

After activating the plugins you will follow the following process:

1. First creating a JS file

Create a new file “gsf-fancybox.js” and upload it into your childtheme/js folder. Now add this following code:

function popupContent( post_id ) {
  var data = {
    "action"  : "popup_content",
    "post_id" : post_id 
  };
  
  jQuery.post(FB.ajaxurl, data, function(response) {
    if( response ) {
      jQuery("#fancyboxID-" + post_id).html( response );
    }
  });
}

2. Enqueuing this JS file

I’m enqueuing this JS file for my filter page only. So file will only load when you will visit the filter page. Add this small snippet in your functions.php file.

//* Enqueue gsf-fancybox.js file
add_action( 'wp_enqueue_scripts', 'gsf_fancybox_scripts' );
function gsf_fancybox_scripts() {
  global $post;
  
  $page_tpl = get_post_meta( $post->ID, '_wp_page_template', true );
  if ( 'page' == $post->post_type && in_array( $page_tpl, array( "templates/page-gsf.php", "templates/page-gsf-horizontal.php" ) ) ) {
    wp_enqueue_script( 'gsf-fancybox', get_stylesheet_directory_uri() . '/js/gsf-fancybox.js', array(), CHILD_THEME_VERSION, true );
    wp_localize_script( 'gsf-fancybox', 'FB', array( 'ajaxurl' => admin_url('admin-ajax.php') ) );
  }
}

3. Removing the permalink from Post Title and adding inline content div

//* Removing default hook
remove_action( 'gsf_entry_content', 'gsf_post_content', 12, 1 );

//* Removing the permalink from title and adding inline content div
add_action( 'gsf_entry_content', 'gsf_post_content_with_lightbox_link', 12, 1 );
function gsf_post_content_with_lightbox_link( $gsf_options ) {
  printf( "\t\t\t\t<div %s>", genesis_attr( 'entry-content' ) );

  //* Adding inline content div
  echo '<div style="display:none" class="fancybox-hidden">
          <div id="fancyboxID-' . get_the_ID() . '" style="width:750px;height:525px"></div>
       </div>' . "\n";
    
  echo "\n\t\t\t\t\t" . '<div class="overlay-effect">' . "\n";
  
    echo "\t\t\t\t\t\t";
    genesis_entry_header_markup_open();
    
    printf( "\n\t\t\t\t\t\t<h2 %s>\n", genesis_attr( 'entry-title' ) );        
    printf( "\t\t\t\t\t\t\t" . '<a onclick="%s" title="%s" href="#fancyboxID-' . get_the_ID() . '" class="fancybox-inline">%s</a>', 'JavaScript: popupContent('. get_the_ID() .');', the_title_attribute( 'echo=0' ), get_the_title() );        
    echo "\n\t\t\t\t\t\t</h2>\n";
    
    echo "\t\t\t\t\t\t";
    genesis_entry_header_markup_close();
    
    do_action('gsf_custom_entry_content');
  
  echo "\n\t\t\t\t\t" . '</div><!-- /.overlay-effect -->' . "\n";
  echo "\t\t\t\t" . '</div><!-- /.entry-content -->' . "\n";
}

** Add this snippet in your functions.php file

4. Populating lightbox content

Lightbox content is populating via AJAX. I am using wp_ajax_ action which is inbulit into WordPress. Add this code in your functions.php file.

add_action( 'wp_ajax_popup_content', 'popup_content' );
add_action( 'wp_ajax_nopriv_popup_content', 'popup_content' );
function popup_content() {
  $post_id = $_POST['post_id'];
  
  $post = new WP_Query( array( 'post_type' => 'listing', 'p' => intval( $post_id ) ) );
  
  if( $post->have_posts() ) {
    while( $post->have_posts() ) {
      $post->the_post();
      
      genesis_entry_header_markup_open();
      genesis_do_post_title();
      genesis_entry_header_markup_close();
      
      echo '<div class="entry-content">' . "\n";
        
        $img = genesis_get_image( array(
    			'format'  => 'html',
    			'size'    => 'feature-wide',
    			'attr'    => array ( 'alt' => get_the_title() ),
    		) );
  
  		  if ( ! empty( $img ) )
          printf( '%s', $img );
      
      echo '<p>' . do_shortcode( '[property_details]' ) . '</p>';
      
      printf( '<p style="text-align:center"><a class="button" href="%s">%s</a></p>', get_permalink(), __( 'View Listing', 'winning' ) );
        
      echo '</div>' . "\n";
      
    }
  }

  //* reset query
  wp_reset_query();
  
  die();
}

popup_content() function is fetching the content from Listing Post Type. Because I’m using the Winning Agent Pro theme and AgentPress Listings plugin . You will modify this custom query as per your requirement.

See the live demo here.