javascript - Magnific-popup 在我的 WordPress 主题页面模板中不起作用
问题描述
我正在尝试在我的主题中加载 magnific-popup,但是它不起作用,我不知道为什么。当我单击图像时,它只显示标准原始图像。
当我只用 html 构建它时,它运行良好,但是在 wordpress 中它似乎不起作用。
我确实用 alert('hi'); 测试了 main.js 和 jquery.magnific-popup.min.js;并且他们俩都吐出了警报,因此他们俩都在工作。
我的排队文件似乎是正确的,尽管我不确定我使用的是正确的 'the_post_thumbnail_url();' 在我的页面模板中用于图像链接的功能?
任何人都可以发现问题吗?
仅供参考:我不想使用该插件。
我的目录的图像
排队文件
function add_theme_scripts()
{
wp_enqueue_style('magnific-popup', get_stylesheet_uri() . '/assets/css/magnific-popup/magnific-popup.css', true);
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_script('jquery-3.5.1', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js', '3.5.1', true); /*when uploaded to server, wordpress already has jquery*/
wp_enqueue_script('magnific-popup', get_template_directory_uri() . '/assets/js/magnific-popup/jquery.magnific-popup.min.js', '1.1.0', true);
wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');
我的页面-project.php
<?php
/**
* Template Name: Project Page
* Template Post Type: post
*/
get_header();
?>
<div class="content">
<h1 class="title main-title"><?php the_title(); ?></h2>
<?php if (have_posts()) : while (have_posts()) : the_post();
the_content();
endwhile;
endif; ?>
<?php
$projects = new WP_Query(array(
'posts_per_page' => 5,
'post_type' => 'projects',
)); ?>
<div class="the-content">
<?php if ($projects->have_posts()) : while ($projects->have_posts()) : $projects->the_post(); ?>
<div class="post-content">
<div class="project-images">
<?php if (has_post_thumbnail()) : ?>
<a class="popup" href="<?php the_post_thumbnail_url(); ?>">
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
</a>
<?php endif; ?>
</div>
<h2 class="title"><?php the_title(); ?></h2>
<?php endwhile;
else : _e('Sorry, no posts seem to have been found');
endif; ?>
</div>
</div>
<div class="step-back">
<a href="<?php echo site_url('/'); ?>">home</a></p>
</div>
来自 main.js 的 js 文件
// magnific popup
jQuery('.project-images').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 3], // Will preload 0 - before current, and 1 after the current image
tPrev: 'Previous', // title for left button
tNext: 'Next', // title for right button
},
removalDelay: 300,
closeOnContentClick: true,
midClick: true,
mainClass: 'mfp-fade',
callbacks: {
buildControls: function () {
// re-appends controls inside the main container
this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
}
}
});
解决方案
我遇到了弹出窗口无法正常工作的问题,对我来说这是一个 jQuery 冲突。事实证明我需要使用不同的 jQuery 版本。这对我有用。
添加 magnific-popup.min.css 后,我必须取消注册现有的 jQuery 并加入 3.5.1 版。注意依赖是jquery。这是一个文档参考。
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery3.js');
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/jquery3.js');
wp_enqueue_script( 'magnific-popup', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array('jquery'), '', true );
wp_enqueue_script( 'magnific-popup-init', get_template_directory_uri() . '/js/jquery.magnific-popup.init.js', array('jquery'), '', true );
wp_enqueue_script( 'custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '', true );
推荐阅读
- java - 嘿,我正在编写一个程序,它使用文本输入对话框读取两个圆的半径、x 位置和 y 位置并获取差异
- python - 实例化后如何更改 ImageDataGenerator 的批量大小?
- java - 如何更改 Java 代码摇摆以更改 GUI
- javascript - 订购 Recharts 酒吧
- rsa - 有没有办法使用 AWS-KMS 密钥连接到 Snowflake?
- r - ggplot:显示虚线图例
- c# - 插入xml postgres c#
- arrays - Delphi - 指向TRecord的const数组?
- r - R pivot_wider 所以重复行成为标题
- python - 根据来自另一个数据框列的值选择列值