Плагин ColorBox и Iframe

colorbox, iframe

Ещё одна неохваченная обзором функция jQuery плагина ColorBox - это работа с фреймами.
Все мы знаем про фреймы и наслышаны об их пользах и недостатках. Фремы бывают внутренними (когда выводится страница со своего же домена) и внешние (кроссдоменные фреймы).
Два важных качества фреймов: они индексируются Яндексом (это и хорошо и плохо, по ситуации) и легко внедряются в тело статьи. Правда в нашем, рассматриваемом случае, поисковик никаких фреймов не увидит, а только ссылку, которую можно просто прикрыть атрибутом nofollow.

ColorBox работает с фреймами и выводит их выводит их также во всплывающем/модальном окне, как и любой другой поддерживаемый контент.

Можете посмотреть демку:


Посмотреть рекламу!

Собственно, сфера применения для фреймов довольно широкая (часто используются в рекламе), особенно это касается Blogger, где нет возможности создавать пустые страницы, и нет файлового пространства. Демо я накидал по-быстрому: размеры относительные, в процентах. Для более точного результата, думаю, лучше использовать размеры в пикселях.

Установка в Blogger.
1) Выполням три шага из установки, описанной в статье "Модальное окно и скрытый текст с помощью ColorBox".

2) Настроечный скрипт будет таким:
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"50%", height:"30%", scrolling: false});
});
</script>
Где:
  • width и height // ширина и высота, указываются в процентах (%) или пикселях (px)
  • scriolling //функция прокрутки, если содержимое модального окна не умещается в самом окне
Остальные опции перечислены здесь.
Скрипт можно разместить прямо на странице, где планируется использование ссылки на модальное окно с фреймом.

3) Понадобится внешний хостинг, на который нужно поместить html-страничку (та, что будет выводиться во фрейме). Страничку накидаете в любом html_редакторе. Не забудьте про кодировку документа (UTF-8).

4) HTML код - ссылка на окно с фреймом будет выглядить так:
<a class='iframe' href="ваша_страница_на_хостинге.html" rel="nofollow">Посмотреть рекламу!</a>

Полезная ссылка:
htmlbook.ru - Теги HTML - Тег <iframe>.

5 комментариев:

  1. Привет,если честно я не читал пост!
    Можешь оказать услугу мне?
    Посмотри на мой блог http://www.risegrace.ru/
    Можешь что нибудь сказать?Дамир-тот точка ру говорит отстой,хочется еще мнений!Я буду очень признателен...

    ОтветитьУдалить
  2. Ну вообще, Дамир не просто так сказал.
    Идея и реализация шаблона крутые.

    Но это шаблон не для блога, а для сайта, представляющего какой-либо бренд, раскрученную марку.

    А нам, простым блогерам нужно что-то проще.Я вот тоже хотел бы навертеть на блоге, скриптов в запасе много, однако понимаю, что это убъёт его.

    Главное в блоге - контент (статьи), затем навигация, затем сео-оптимизация. Когда эти три условия начнут выполняться, можно и рюшечки подкрутить, но в очень-очень скромных пределах, увлекаться нельзя.

    Это ИМХО, может я и не прав.

    ОтветитьУдалить
  3. Спасибо!
    Я понимаю что дамир не просто так сказал...Просто наверно эт один из немногих шаблонов который в корне отличается от других блогеровских...
    Ладненько,видимо все-таки придется менять!(((

    ОтветитьУдалить
  4. Кстати на счет навигации...ее ведь все-таки можно улучшить на этом же шаблоне,например,хлебные крошки прописать,выставить виджет популярных постов,даже баннеры склеить для тем интересных и опять же таки в виде виджетов вывесить на блоге...что думаешь?

    ОтветитьУдалить
  5. Конечно можно, но это лишние трудности.
    Ведь вы в первую очередь не продавец, а писатель. И ваша задача - донести до читателя свои труды.

    Представьте книгу в нестандартном переплёте, которую трудно читать за столом, в метро и т.п. ...
    Конечно, её можно усовершенствовать, но зачем такие изобретения?

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

    Гости уже привыкли, что зайдя на сайт кнопка подписки будет тут-то, ссылки там-то, облако тегов здесь.
    Вот я "украл" дизайн с Хабра не просто так (я не помешан на Хабре, как может показаться). Он продуман, удобен, я могу не задумываться над тем, как лучше акцентировать внимание посетителя на том или ином элементе.

    Ищите свой стиль, анализируйте чужие блоги и берите лучшее.

    ОтветитьУдалить