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.
Leave A Reply