Как сделать открытие картинок из слайдера RoyalSlider для WP в pop-up

Как сделать открытие картинок из слайдера RoyalSlider для WP в pop-up. Для того, чтобы можно было открывать картинки из слайдера Royal Slider в popup нужно:

1. Подключить скрипты плагина Magnific Popup в футере, сам плагин можно скачать на github (версия не для WP, необходимо подключить его как обычный скрипт)

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/libs//magnific-popup/magnific-popup.css" />
<script src="<?php bloginfo('template_directory'); ?>/libs//magnific-popup/jquery.magnific-popup.min.js"></script>

2. И изменить этот код формата слайдера «Edit slide markup»

<div class="rsContent">
  {{image_tag}}
  {{thumbnail}}
  {{html}}
  {{animated_blocks}}
  {{#link_url}}
  <a class="rsLink" href="{{link_url}}">{{title}}</a>
  {{/link_url}}
</div>

на этот

<div class="rsContent">
<a class="fancybox image" href="{{image_url}}" rel="gallery">
  {{image_tag}}
</a>
</div>

здесь:

Как сделать открытие картинок из слайдера RoyalSlider для WP в pop-up

3. В файл functions.php добавить такую функцию:

/* подключаем настройки для слайдера, чтобы слайды открывались в попап окне */
function add_additional_rs_code() {
  ?>

  jQuery('.royalSlider').magnificPopup({ 
  delegate: '.fancybox', 
  type: 'image', 
  gallery: {
  enabled: true
} 
});

  <?php
}
add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
/* конец настроек pop-up для royal slider*/
Просмотров:

Добавить комментарий