Как-то трудно было кратко сформулриовать тему, но смысл этого поста в том, что я активно пользуюсь плагином для 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, то есть переменная не перехватывается. А вот с функцией все работает корректно.
То есть все решается довольно просто.