Question

我陷入了一些奇怪的问题。

我在WP Bakery Page Builder（Visual Composer）中创建了一个自定义元素，我还创建了一个自定义帖子类型。

所以我的自定义元素所做的是它需要我的帖子类型项的ID，它显示它的标题和其他字段，它完美地工作。

但是我如何整合弹出功能呢？虽然我已经集成了一个jquery弹出插件，但它适用于其他普通文本块，但它在我的自定义元素中不起作用。

到目前为止，这是我的代码。

 <?php
/*
Element Description: Video Popup Box
*/

// Element Class
class videoPopupBox extends WPBakeryShortCode {

// Element Init
function __construct() {
add_action( 'init', array( $this, 'video_popupbox_mapping' ) );
add_shortcode( 'video_popupbox', array( $this, 'video_popupbox_html' ) );
}

// Element Mapping
public function video_popupbox_mapping() {

// Stop all if VC is not enabled
if ( !defined( 'WPB_VC_VERSION' ) ) {
return;
}

// Map the block with vc_map()
vc_map(
    array(
        'name' => __('Video Popup box', 'text-domain'),
        'base' => 'video_popupbox',
        'description' => __('Box for video popup', 'text-domain'),
        'category' => __('SSQ Custom Elements', 'text-domain'),
        'icon' => get_template_directory_uri().'/assets/img/vc-icon.png',
        'params' => array(

        array(
        'type' => 'textfield',
        'holder' => 'h3',
        'class' => 'title-class',
        'heading' => __( 'Video ID', 'text-domain' ),
        'param_name' => 'video_id',
        'value' => __( '', 'text-domain' ),
        'description' => __( 'Put video ID here', 'text-domain' ),
        'admin_label' => false,
        'weight' => 0,
        'group' => 'Custom Group',
    ),

    array(
        'type' => 'textfield',
        'holder' => 'div',
        'class' => 'text-class',
        'heading' => __( 'Exercise #', 'text-domain' ),
        'param_name' => 'exercise_no',
        'value' => __( '', 'text-domain' ),
        'description' => __( 'Put Exercise Number', 'text-domain' ),
        'admin_label' => false,
        'weight' => 0,
        'group' => 'Custom Group',
    )
    ),
    )
);

}


// Element HTML
public function video_popupbox_html( $atts ) {

// Params extraction
extract(
shortcode_atts(
array(
'video_id'   => '',
'exercise_no' => ''
),
$atts
)
);

$vl_post = get_post($video_id);
$thumb_id = get_post_thumbnail_id($vl_post);
$thumb_url = wp_get_attachment_image_src($thumb_id,'thumbnail-size', true);


// Fill $html var with data
$html = '<div class="wpb_text_column  prg-video-bx">
    <div class="wpb_wrapper">
        <p>
            <a href="'.get_permalink( $vl_post->ID ).'">
                <img class="alignleft size-full wp-image-100" src="'.$thumb_url[0].'" alt="" width="210" height="123">
            </a><br>
            EXERCISE '.$exercise_no.'
        </p>
        <h2><a href="'.get_permalink( $vl_post->ID ).'">'.$vl_post->post_title.'</a></h2>
    </div>
</div>';

$html .= '<a class="cb-'.$video_id.'">Click</a>

<div id="vp-'.$video_id.'" style="display:none;">
    <h1>This is for '.$video_id.'</h1>
    <p>Here we go!</p>
    <ul>
        <li>LINK '.get_permalink( $vl_post->ID ).'</li>
        <li>EXERCISE '.$exercise_no.'</li>

    </ul>
</div>

<script>

jQuery(function ($) {
$(\'a.cb-'.$video_id.'\').on("click", function(e) {

e.preventDefault();
$(this).simplePopup({ type: "html", htmlSelector: "#vp-'.$video_id.'" });
});
});
</script>';
/*  $html .='<a class="two">Click</a>

<div id="popup1">
    <h1>This is it!!</h1>
    <p>Here we go!</p>
    <ul>
        <li>Check this list</li>
        <li>Beautiful</li>
        <li>...</li>
    </ul>
</div>';*/
return $html;

}

} // End Element Class

// Element Class Init
new videoPopupBox();

脚本标记部分显示在前端，同时检查元素而不工作，它也在DOM元素中使用相同的post id，这样如果多个元素调用，它将不会相互冲突。

谢谢

自定义Visual Composer元素弹出窗口

0 个答案: