kodie
9/3/2015 - 8:32 PM

Dynamically display wordpress content and gravity forms inside fancybox

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