当手动编码时，将启动，而在转换为WordPress时不会启动。
当手动编码时，将启动，而在转换为WordPress时不会启动。
提问于 2014-06-11 20:32:31
使用Magnific (issues)，我已经成功地在文本编辑器中手工编写了一个lightbox映像。我成功的代码是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/magnific-popup.css">
</head>
<body>
<h1>Hello, world!</h1>
<div>
<a href="https://bourassarehab.com/files/stacks_image_85.jpg" title="Test caption 1" class="image-link">Show img 1</a>
<a href="https://bourassarehab.com/files/stacks_image_126.jpg" title="Test caption" class="image-link">Show img 2</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="assets/jquery.magnific-popup.min.js"></script>
<script>
$('div').magnificPopup({
type: 'image',
delegate: 'a',
gallery:{enabled:true},
callbacks: {
buildControls: function() {
// re-appends controls inside the main container
this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
}
}
});
</script>
</body>
</html>但是，当将模板转换为WordPress主题时，弹出/光明框将不会初始化。它在浏览器窗口中作为独立图像加载，而不是加载到lightbox/弹出窗口中。我相信我正确地排列了所有的样式和脚本。这是我的WordPress源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php bloginfo('name'); ?></title>
<?php
add_action('wp_enqueue_scripts', 'lime_enqueue_scripts' );
function lime_enqueue_scripts() {
wp_enqueue_style('bootstrap-css', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
wp_enqueue_style('flat-ui', get_stylesheet_directory_uri() . '/frameworks/flat-ui/css/flat-ui.css');
wp_enqueue_style('magnific-popup-css', get_stylesheet_directory_uri() . '/assets/helpers/magnific-popup/magnific-popup.css');
wp_enqueue_style('styles', get_stylesheet_uri());
wp_enqueue_script('bootstrap-js', '//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js', array('jquery'));
wp_enqueue_script('magnific-popup-js', get_stylesheet_directory_uri().'/assets/helpers/magnific-popup/jquery.magnific-popup.min.js', array('jquery'));
} ?>
<?php wp_head(); ?>
</head>
<body>
<div>
<a href="https://bourassarehab.com/files/stacks_image_85.jpg" title="Test caption 1" class="image-link">Show img 1</a>
<a href="https://bourassarehab.com/files/stacks_image_126.jpg" title="Test caption" class="image-link">Show img 2</a>
</div>
<?php wp_footer(); ?>
<script>
$('div').magnificPopup({
type: 'image',
delegate: 'a',
gallery:{enabled:true},
callbacks: {
buildControls: function() {
// re-appends controls inside the main container
this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
}
}
});
</script>
</body>
</html>这是我的WordPress编译代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Prairie Garden Seeds</title>
<meta name='robots' content='noindex,follow' />
<link rel='stylesheet' id='bootstrap-css-css' href='//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='flat-ui-css' href='http://macbook.local:5757/wp-content/themes/prairie-garden-seeds/frameworks/flat-ui/css/flat-ui.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='magnific-popup-css-css' href='http://macbook.local:5757/wp-content/themes/prairie-garden-seeds/assets/helpers/magnific-popup/magnific-popup.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='styles-css' href='http://macbook.local:5757/wp-content/themes/prairie-garden-seeds/style.css?ver=3.9.1' type='text/css' media='all' />
<script type='text/javascript' src='http://macbook.local:5757/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://macbook.local:5757/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js?ver=3.9.1'></script>
<script type='text/javascript' src='http://macbook.local:5757/wp-content/themes/prairie-garden-seeds/assets/helpers/magnific-popup/jquery.magnific-popup.min.js?ver=3.9.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://macbook.local:5757/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://macbook.local:5757/wp-includes/wlwmanifest.xml" />
</head>
<body>
<div>
<a href="https://bourassarehab.com/files/stacks_image_85.jpg" title="Test caption 1" class="image-link">Show img 1</a>
<a href="https://bourassarehab.com/files/stacks_image_126.jpg" title="Test caption" class="image-link">Show img 2</a>
</div>
<script>
$('div').magnificPopup({
type: 'image',
delegate: 'a',
gallery:{enabled:true},
callbacks: {
buildControls: function() {
// re-appends controls inside the main container
this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
}
}
});
</script>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-08-16 00:39:18
事件侦听器无法工作，因为WordPress在无冲突模式下加载jQuery，因此使用$无法工作。若要解决以下任一问题，请执行以下操作：
- 将您的jQuery包装在一个无冲突的包装中。 $(Document).ready(函数(){ $(#somefunction) . })；
或
将$的所有实例更改为jQuery
Stack Overflow用户
发布于 2014-06-13 07:50:06
有WordPress插件:安道尔灯箱。带灯箱的栅格画廊。它使用的是万能弹出脚本。
在WordPress插件站点上查看它：http://wordpress.org/plugins/andora-lightbox/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24172064
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号