15 дек. 2011 г.

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

Как-то трудно было кратко сформулриовать тему, но смысл этого поста в том, что я активно пользуюсь плагином для jQuery под названием Colorbox, чтобы создавать лайтбоксы (это такие окошки). Принцип его работы в том, что он перехватывает значение атрибута href в ссылке и при помощи AJAX загружает в выскакивающем окошке содержимое того файла, на который ведет ссылка.


Все отлично, но нажать на ссылке правой кнопкой мыши и выбрать пункт «Открыть в новой вкладке», либо открыть ссылку в новой вкладке каким-то другим способом, то в этой самой новой вкладке открывается окошко без шапки, подвала и прочих радостей, которые есть в дизайне сайта. То есть вот так:


Конечно, не все посетители кидаются открывать эти окошки в новых вкладках или окнах, но некоторые все таки вытворяют такие фокусы. И к тому же для тех же самых поисковиков это не круто, потому что они индексируют у вас на сайте непонятно что, и потом в выдаче тоже ссылаются на это самое непонятно что, которое на картинке.

И вот я сел и задумался, а потом еще ехал в маршрутке и думал, а потом ужинал и думал, а потом засыпал и думал, а потом... Короче мне очень захотелось сделать, чтобы все было красиво. Думал я, думал, и вспомнил, что в этом самом Colorbox есть параметр href, который позволяет вместо такого же из ссылки подставлять для окошка совершенно другой.

То есть нам достаточно прописать в параметрах плагина следующее:


$("a[rel='number']").colorbox({
 href:function(){
  return '/ajax/number.php?comicvine='+$(this).attr('to');
 },
 opacity:0.5
});


А ссылка будет иметь следующий вид:

<a href="/publishers/31/18462/164834/" rel="number" to="164834">Nova (2007) #27</a>

То есть в элементе A атрибут href у нас будет использоваться для перехода на нормальную страницу, а атрибут to, будет использоваться для передачи переменной в скрипт для создания окошка. Я понимаю, что в спецификации такого атрибута нет, но любой браузер его просто проигнорирует, а вот jQuery воспринимает вполне нормально такие обращения со спецификацией.

И да, в параметрах Colorbox для ссылки на новое окошко у нас используется функция потому, что если попытаться передать просто ссылку такого вида:

/ajax/number.php?comicvine='+$(this).attr('to')

то ничего не получится. Colorbox не воспримет нормально $(this).attr('to'). И в окошке появится надпись undefined, то есть переменная не перехватывается. А вот с функцией все работает корректно.

То есть все решается довольно просто.