Как передать параметры в fancybox при выполнении AJAX запроса

Многие из вас слышали про библиотеку fancybox. Всё немного усложняется, если необходимо передать параметры, а затем, например, на PHP, обработать их.

jQuery Fancybox – как передать параметры из ajax?

Про AJAX уже было написано несколько статей и вы можете ознакомится с ними кликнув на соответствующую ссылку ЧАСТЬ 1 и ЧАСТЬ 2.

Пропустим момент где нужно подключать все необходимые файлы и начнем с момента когда у вас уже подключена jQuery, скрипт fancybox и его стили. Первое, что нам необходимо, это HTML, у нас есть некая ссылка:

<a href="ajax.php" class="js-portfolio">Ссылка</a>

Начинаем писать обработчик по клику:

$('body').on('click', '.js-portfolio', function (e) {
  return false;
}

Сам параметр можно записать как атрибут тега, вернем к HTML:

<a data-id="<?=$myID?>" href="ajax.php" class="js-portfolio">Ссылка</a>

Если вы используете PHP, то в $myID находится переменная.

$('body').on('click', '.js-portfolio', function (e) {
	var $id = $(this).data('id');
	e.preventDefault();
});

Пока что всё понятно, теперь взглянем на код целиком, а после, разберем детальней:

$('body').on('click', '.js-portfolio', function (e) {
	var $id = $(this).data('id');
	e.preventDefault();
	$.ajax({
	  type: "POST",
	  cache: false,
	  url: this.href,
	  data: {'id': $id},
	  success: function (data) {
		// on success, post (preview) returned data in fancybox
		$.fancybox(data, {
		  // fancybox API options
		  fitToView: false,
		  width: 800,
		  height: 400,
		  autoSize: false,
		  closeClick: false,
		  openEffect: 'none',
		  closeEffect: 'none'
		}); // fancybox
		//console.log(data);
	  } // success
	}); // ajax
}); // on

При помощи создания переменной, со значением из data-атрибута ( var $id = $(this).data(‘id’); ), мы передаем наш ID, который изначально получили при помощи PHP ($myID ).
Чтобы передать данные через ajax запрос, мы пишем:

data: {'id': $id}

А чтобы данные попали в fancybox, необходимо его вызвать в функции успеха, передав для нашего “всплывающего окна” полученный результат с той страницы, на которую мы передали параметр (в моем случае это ajax.php):

...
 success: function (data) {
   $.fancybox(data, {
...

а дальше идут параметры, которые вы найдете в официальной документации.

Самые внимательные из вас поняли что сама библиотека не получила никаких параметров, кроме как “результат со страницы аякса”. В этом и заключается вся хитрость 🙂 .

П.С. на странице ajax.php переменная находится в $_REQUEST[‘id’] (или $_POST[‘id’], ведь именно этот тип выставлен в скрипте).