Добавление стильного эффекта лайтбокса в галерею WordPress

Откройте main.js и введите jQuery-оболочку без конфликтов, чтобы убедиться, что знак $ jQuery не конфликтует с другими сценариями, использующими тот же символ псевдонима:

 (function($) { //All your code goes inside this wrapper })(jQuery); 

Теперь ваш документ jQuery настроен. Давайте продолжим!

Написание сценария jQuery

Инициализация jQuery Colorbox так же проста, как написание следующей строки кода:

 selector.colorbox(); 

Селектор обозначает элемент привязки HTML, к которому вы хотите применить эффект лайтбокса.

Но с таким настраиваемым плагином вы можете сделать немного больше. Существует множество настроек, которые вы можете настроить, чтобы Colorbox делал то, что вы хотите. Давайте начнем с настройки некоторых из них. Внутри jQuery без конфликтной оболочки напишите следующий фрагмент кода:

 //Settings for lightbox var cbSettings = { rel: 'cboxElement', width: '95%', height: 'auto', maxWidth: '660', maxHeight: 'auto', title: function() { return $(this).find('img').attr('alt'); } } 

Приведенный выше код хранит набор настроек внутри литерала объекта JavaScript с именем cbSettings :

• rel используется для группировки фотографий. Установка этого атрибута включает навигационные стрелки в лайтбоксе, чтобы пользователи могли переходить от одной фотографии к предыдущей или следующей фотографии в группе. cboxElement — это класс, который Colorbox автоматически добавляет к ссылкам привязки, к которым прикреплена функциональность лайтбокса, но вы можете группировать фотографии под другим именем.
• ширина и высота соответствуют размерам лайтбокса. Процентное значение ширины помогает компоненту оставаться жидким и отзывчивым. maxWidth и maxHeight относятся к максимальной ширине и максимальной высоте содержимого, загружаемого в лайтбокс, который в данном случае является фотографией галереи.
• название может быть использовано для отображения подписи к фотографии в лайтбоксе. Здесь установлена ​​короткая функция, которая сообщает Colorbox извлечь значение атрибута alt изображения и использовать его в качестве заголовка изображения.

Вы можете найти список всех доступных настроек на веб-сайте jQuery Colorbox .

После настройки параметров инициализируйте Colorbox:

 //Initialize jQuery Colorbox $('.gallery a[href$=".jpg"], .gallery a[href$=".jpeg"], .gallery a[href$=".png"], .gallery a[href$=".gif"]').colorbox(cbSettings); 

Фрагмент выше выбирает все теги привязки внутри элемента с классом gallery . Кроме того, выбранные теги привязки должны иметь значение href которое заканчивается на .jpg , .jpeg , .png или .gif (наиболее распространенные форматы файлов изображений). Наконец, Colorbox вызывается для этого выделения, передавая объект cbSettings в качестве аргумента.

Современный веб-дизайн — это адаптивный веб-дизайн, поэтому для нас важно, чтобы лайтбокс соответствовал размерам экрана. Ввиду этого добавьте следующий фрагмент, который заботится об этом важном аспекте:

 //Keep lightbox responsive on screen resize $(window).on('resize', function() { $.colorbox.resize({ width: window.innerWidth > parseInt(cbSettings.maxWidth) ? cbSettings.maxWidth : cbSettings.width }); }); 

При изменении размера браузера $.colorbox.resize() метод $.colorbox.resize() . Внутри этого метода приведенный выше код устанавливает значение width для условного оператора тройного оператора JavaScript . Это утверждение делает следующее:

1. возвращает width экрана;
2. он сравнивает эту width со значением maxWidth из настроек плагина, которое в нашем случае составляет 660px ;
3. если width экрана больше 660px , он устанавливает width лайтбокса на значение 660px . Однако, если размер экрана меньше 660px , width лайтбокса изменяется до width указанной в настройках, что в данном случае составляет 95% .

Больше об этом решении доступно на странице Colorbox GitHub .

Вот и все сейчас на фронте JavaScript, вы вернетесь к нему позже, чтобы разобраться с интернационализацией WordPress. Давайте поговорим о WordPress-стороне проекта.

 function themeslug_enqueue_styles_scripts() { //Colorbox stylesheet wp_enqueue_style( 'colorbox', get_template_directory_uri() . '/colorbox/colorbox.css' ); //Your theme CSS wp_enqueue_style( 'themeslug-style', get_stylesheet_uri() ); //Colorbox jQuery plugin js file wp_enqueue_script( 'colorbox', get_template_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '', true ); //Add main.js file wp_enqueue_script( 'themeslug-script', get_template_directory_uri() . '/js/main.js', array( 'colorbox' ), '', true ); } //Hook the function above add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_styles_scripts' ); 

 wp_enqueue_script( 'colorbox', get_template_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '', true ); 

 //Make the Colorbox text translation-ready $current = 'current'; $total = 'total'; wp_localize_script( 'colorbox', 'themeslug_script_vars', array( 'current' => sprintf(__( 'image {%1$s} of {%2$s}', 'themeslug'), $current, $total ), 'previous' => __( 'previous', 'themeslug' ), 'next' => __( 'next', 'themeslug' ), 'close' => __( 'close', 'themeslug' ), 'xhrError' => __( 'This content failed to load.', 'themeslug' ), 'imgError' => __( 'This image failed to load.', 'themeslug' ) ) ); 

 current: themeslug_script_vars.current, previous: themeslug_script_vars.previous, next: themeslug_script_vars.next, close: themeslug_script_vars.close, xhrError: themeslug_script_vars.xhrError, imgError: themeslug_script_vars.imgError 

 //Settings for lightbox var cbSettings = { rel: 'cboxElement', width: '95%', height: 'auto', maxWidth: '660', maxHeight: 'auto', title: function() { return $(this).find('img').attr('alt'); }, current: themeslug_script_vars.current, previous: themeslug_script_vars.previous, next: themeslug_script_vars.next, close: themeslug_script_vars.close, xhrError: themeslug_script_vars.xhrError, imgError: themeslug_script_vars.imgError }