Dynamically display wordpress content and gravity forms inside fancybox
jQuery(document).ready(function($) {
$('.showroom-item .view-details, .showroom-item .contact-us').on('click', function(){
$('#showroom-lightbox #details').html('');
var details = 0;
var productTitle = $(this).attr('data-product-title');
if ($(this).hasClass('view-details')) { details = 1; }
if (details == 1) {
$("#showroom-lightbox .loading").css('display', 'block');
var data = {
'postid': $(this).attr('data-post-id'),
'action': 'showroom_lightbox'
};
$.post(phpstuff.ajax_url, data, function(response) {
$('#showroom-lightbox #details').html(response);
$("#showroom-lightbox .loading").css('display', 'none');
});
}
$('#showroom-lightbox #contact input[name="product"]').val(productTitle);
$.fancybox.open('#showroom-lightbox');
});
});
function ajax_showroom_lightbox() {
$post = get_post($_POST['postid']);
echo get_the_post_thumbnail($post->ID, 'medium');
echo '<h3 class="delta">'.get_the_title($post->ID).'</h3>';
echo '<strong>Description:</strong>'.apply_filters('the_content', $post->post_content);
die();
}
add_action('wp_ajax_showroom_lightbox', 'ajax_showroom_lightbox');
add_action('wp_ajax_nopriv_showroom_lightbox', 'ajax_showroom_lightbox');
function bierman_enqueue() {
if(!is_admin()) {
wp_register_script('beirman-main-js', SCRIPTS . '/main.js');
wp_enqueue_script('beirman-main-js');
wp_localize_script( 'beirman-main-js', 'phpstuff',
array(
'ajax_url' => admin_url( 'admin-ajax.php' )
)
);
}
}
add_action( 'wp_enqueue_scripts', 'bierman_enqueue' );
#showroom-lightbox {
width: 700px;
height: 400px;
overflow-x: hidden;
display: none;
.delta {
font-family: 'news-gothic-std', 'sans-serif';
text-transform: uppercase;
color: #00529b;
font-size: 20px;
font-weight: 700;
height: 2em;
margin: 0 0 1em 0;
}
img {
float: left;
margin-right: 35px;
}
.loading {
display: none;
margin: 0 auto;
width: 40px;
float: none;
}
.gform_wrapper .gform_body .gform_fields {
.gfield {
clear: none;
float: left;
width: 48%;
padding: 5px;
.gfield_label { margin: 0; }
.ginput_container input { width: 100%; }
}
}
}
<?php if(is_page(16)): ?>
<div id="showroom-lightbox">
<img class="loading" src="<?php echo IMAGES; ?>/loading-blue.gif">
<div id="details"></div>
<div id="contact"><?php echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]'); ?></div>
</div>
<?php endif; ?>