目前，大多数Wordpress主题没有集成常用的附件图像灯箱Lightbox效果。往往我们需要下载相应的插件来实现弹窗显示大图像。但各类插件功能多，使用过多插件会导致网页加载速度慢。这个时候我们就需要自己动手修改一下，来实现简单的弹窗Lightbox效果。下面分享几种常用jQuery灯箱 – 弹出脚本的集成…
目前，大多数Wordpress主题没有集成常用的附件图像灯箱Lightbox效果。往往我们需要下载相应的插件来实现弹窗显示大图像。但各类插件功能多，使用过多插件会导致网页加载速度慢。这个时候我们就需要自己动手修改一下，来实现简单的弹窗Lightbox效果。下面分享几种常用jQuery灯箱 – 弹出脚本的集成方法，希望梦满足您的需求。
Magnific popup
1. 从 Github: github.com/dimsemenov/Magnific-Popup下载最新版的magnific-popup.js；
2. 解压并保存在本地，打开文件夹，复制或是上传jquery.magnific-popup.min.js和magnific-popup.css两个文件到你的主题目录下，一般在asset文件夹下面的js和css文件夹内；
3.创建一个新的js文件并将其命名为jquery.magnific-popup-init.js。 它是用户初始化灯箱效果。将文件保存到主题文件夹中asset中的js文件夹内，保持和jquery.magnific-popup.min.js在同一文件夹内。打开jquery.magnific-popup-init.js文件，把下面的代码复制粘贴进行，并保存。
jQuery(document).ready(function($) { $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').each(function() { if ($(this).parents('.gallery').length == 0) { $(this).magnificPopup({ type: 'image', closeOnContentClick: true, mainClass: 'mfp-with-zoom', // this class is for CSS animation below image: { markup: '<div class="mfp-figure">' + '<div class="mfp-close"></div>' + '<div class="mfp-img"></div>' + '<div class="mfp-bottom-bar">' + '<div class="mfp-title"></div>' + '<div class="mfp-description" style="text-align: left;font-size: 12px;line-height: 16px;color: #f3f3f3;word-break: break-word;padding-right: 36px;"></div>' + '<div class="mfp-counter"></div>' + '</div>' + '</div>', titleSrc: function(item) { return '<strong>' + item.el.find('img').attr('alt') + '</strong>'; } }, zoom: { enabled: true, duration: 300, easing: 'ease-in-out', // By default it looks for an image tag: opener: function(openerElement) { return openerElement.is('img') ? openerElement: openerElement.find('img'); } } }); } }); // initialize magnific popup galleries with titles and descriptions $('.gallery').magnificPopup({ callbacks: { open: function() { $('.mfp-description').append(this.currItem.el.attr('title')); }, afterChange: function() { $('.mfp-description').empty().append(this.currItem.el.attr('title')); } }, delegate: 'a', type: 'image', image: { markup: '<div class="mfp-figure">' + '<div class="mfp-close"></div>' + '<div class="mfp-img"></div>' + '<div class="mfp-bottom-bar">' + '<div class="mfp-title"></div>' + '<div class="mfp-description" style="text-align: left;font-size: 12px;line-height: 16px;color: #f3f3f3;word-break: break-word;padding-right: 36px;"></div>' + '<div class="mfp-counter"></div>' + '</div>' + '</div>', titleSrc: function(item) { return '<strong>' + item.el.find('img').attr('alt') + '</strong>'; } }, gallery: { enabled: true, navigateByImgClick: true } });});4.打开在主题文件夹中 functions.php文件。 添加以下代码：
/* Magnific popup - https://dimsemenov.com/plugins/magnific-popup/ */add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_styles');function enqueue_magnificpopup_styles() { wp_enqueue_style('magnific_popup_style', get_stylesheet_directory_uri().'/asset/css/magnific-popup.css', array());} add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_scripts');function enqueue_magnificpopup_scripts() { wp_enqueue_script('magnific_popup_script', get_stylesheet_directory_uri().'/asset/js/jquery.magnific-popup.min.js', array('jquery')); wp_enqueue_script('magnific_init_script', get_stylesheet_directory_uri().'/asset/js/jquery.magnific-popup-init.js', array('jquery'));}5.如果您有一些高于垂直视点的图像。 为了能够在看到高图像时滚动，我们必须在magnific-popup.css文件中添加一些额外的CSS。 滚动到您看到img.mfp-img css类的位置。 添加max-height：100％！对所有图像都很重要，以显示其原始大小。下面是最基本的CSS代码。强烈建议您新增下面的代码。
/* Main image in popup */img.mfp-img { width: auto; max-width: 100%; height: auto; max-height: 100% !important; /* ADDED */ display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }Colorbox
1.转到Colorbox网站并下载colorbox master zip文件。
2.查看各种示例并找到要修改的示例。
3.在主题文件夹的根目录中添加一个新文件夹并将其命名为colorbox。
4.将images文件夹与内容以及colorbox.css从主颜色框示例复制到新的colorbox文件夹中。
5.从本地colorbox文件夹中，还将jquery.colorbox-min.js复制到主题colorbox文件夹。
6.创建一个新的js文件并将其命名为colorbox-init.js。 将其保存在colorbox文件夹中。 然后，该文件将初始化colorbox，告诉它如何使用它。 添加以下代码：
/* Initialize jQuery Colorbox*/jQuery(function( $ ){ $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').colorbox({ transition:'none', rel: 'gallery', opacity:.85, title: function() { return $(this).find('img').attr('alt'); } });});7.打开在主题文件夹中 functions.php文件。 添加以下代码：
/* Enqueue Colorbox */add_action( 'wp_enqueue_scripts', 'enqueue_colorbox' );function enqueue_colorbox() { wp_enqueue_style( 'colorbox-css', get_template_directory_uri(). '/colorbox/colorbox.css' ); wp_enqueue_script( 'colorbox',get_template_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '', true ); wp_enqueue_script( 'colorbox-init', get_template_directory_uri() . '/colorbox/colorbox-init.js', array( 'colorbox' ), '', true ); }
评论(0)