Использование Magnific Popup (http://dimsemenov.com/plugins/magnific-popup/documentation.html#known_issues), я УСПЕШНО создал изображение лайтбокса, написав его вручную в текстовом редакторе. Мой успешный код:
<!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 всплывающее окно/лайтбокс не инициализируется. Вместо загрузки изображения в лайтбоксе/всплывающем окне оно загружается как отдельное изображение в окне браузера. Я считаю, что правильно поставил в очередь все стили и скрипты. Вот мой исходный код 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>
