I created a custom post type and a custom meta box where I create a new post and input a Youtube URL into the meta box, and I call for it on a custom template page inside an iframe that is inside in a modal (Drublic CSS modal) window where clicking on the post title will open the modal window.
The meta box will return a value on the page, however it displays the most recent URL entered for each of the posts when you open the modal.
How do I get each modal box to display the video assigned to it?
If this is confusing, here's the page that the error is on: http://www.josephkatool.com/Pell/media
and below is the code from the post:
<?php query_posts( 'post_type=videos');?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article class="post" id="post-<?php the_ID(); ?>">
<h2><a href="#modal-text" class="call-modal" ><?php the_title(); ?></a></h2>
<section class="semantic-content" id="modal-text" tabindex="-1"
role="dialog" aria-labelledby="modal-label" aria-hidden="true">
<div class="modal-inner">
<div class="modal-content">
<iframe width="560" height="315" src="//<?php echo get_post_meta($post->ID, "pell_video_url", true); ?>" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<a href="#!" class="modal-close" title="Close this modal" data-close="Close" data-dismiss="modal">×</a>
</section>
</article>
<?php endwhile; endif; ?>
I've been trying to figure this out for a while now and I think I'm losing my mind!! Thanks!
Edit: Here's the code I use to save the meta boxes:
function pell_video_save_post_class_meta( $post_id, $post ) {
if ( !isset( $_POST['pell_video_url_nonce'] ) || !wp_verify_nonce( $_POST['pell_video_url_nonce'], basename( __FILE__ ) ) )
return $post_id;
$post_type = get_post_type_object( $post->post_type );
if ( !current_user_can( $post_type->cap->edit_post, $post_id ) )
return $post_id;
$new_meta_value = ( isset( $_POST['pell-video-url'] ) ? esc_attr( $_POST['pell-video-url'] ) : '' );
$meta_key = 'pell_video_url';
$meta_value = get_post_meta( $post_id, $meta_key, true );
if ( $new_meta_value && '' == $meta_value )
add_post_meta( $post_id, $meta_key, $new_meta_value, true );
elseif ( $new_meta_value && $new_meta_value != $meta_value )
update_post_meta( $post_id, $meta_key, $new_meta_value );
elseif ( '' == $new_meta_value && $meta_value )
delete_post_meta( $post_id, $meta_key, $meta_value );
}
Here's the js. It's the Drublic CSS js script:
(function (global) {
'use strict';
// Storage variable
var modal = {};
// Store for currently active element
modal.lastActive = undefined;
modal.activeElement = undefined;
// Polyfill addEventListener for IE8 (only very basic)
modal._addEventListener = function (element, event, callback) {
if (element.addEventListener) {
element.addEventListener(event, callback, false);
} else {
element.attachEvent('on' + event, callback);
}
};
// Hide overlay when ESC is pressed
modal._addEventListener(document, 'keyup', function (event) {
var hash = window.location.hash.replace('#', '');
// If hash is not set
if (hash === '' || hash === '!') {
return;
}
// If key ESC is pressed
if (event.keyCode === 27) {
window.location.hash = '!';
if (modal.lastActive) {
return false;
}
// Unfocus
modal.removeFocus();
}
}, false);
// Convenience function to trigger event
modal._dispatchEvent = function (event, modal) {
var eventTigger;
if (!document.createEvent) {
return;
}
eventTigger = document.createEvent('Event');
eventTigger.initEvent(event, true, true);
eventTigger.customData = { 'modal': modal };
document.dispatchEvent(eventTigger);
};
// When showing overlay, prevent background from scrolling
modal.mainHandler = function () {
var hash = window.location.hash.replace('#', '');
var modalElement = document.getElementById(hash);
var htmlClasses = document.documentElement.className;
var modalChild;
var oldModal;
// If the hash element exists
if (modalElement) {
// Get first element in selected element
modalChild = modalElement.children[0];
// When we deal with a modal and body-class `has-overlay` is not set
if (modalChild && modalChild.className.match(/modal-inner/)) {
if (!htmlClasses.match(/has-overlay/)) {
// Set an html class to prevent scrolling
document.documentElement.className += ' has-overlay';
}
// Unmark previous active element
if (modal.activeElement) {
oldModal = modal.activeElement;
oldModal.className = oldModal.className.replace(' is-active', '');
}
// Mark modal as active
modalElement.className += ' is-active';
modal.activeElement = modalElement;
// Set the focus to the modal
modal.setFocus(hash);
// Fire an event
modal._dispatchEvent('cssmodal:show', modal.activeElement);
}
} else {
document.documentElement.className =
htmlClasses.replace(' has-overlay', '');
// If activeElement is already defined, delete it
if (modal.activeElement) {
modal.activeElement.className =
modal.activeElement.className.replace(' is-active', '');
// Fire an event
modal._dispatchEvent('cssmodal:hide', modal.activeElement);
// Reset active element
modal.activeElement = null;
// Unfocus
modal.removeFocus();
}
}
};
modal._addEventListener(window, 'hashchange', modal.mainHandler);
modal._addEventListener(window, 'load', modal.mainHandler);
/*
* Accessibility
*/
// Focus modal
modal.setFocus = function () {
if (modal.activeElement) {
// Set element with last focus
modal.lastActive = document.activeElement;
// New focussing
modal.activeElement.focus();
}
};
// Unfocus
modal.removeFocus = function () {
if (modal.lastActive) {
modal.lastActive.focus();
}
};
// Export CSSModal into global space
global.CSSModal = modal;
}(window));
