Итак, бесплатные воскресные приятности. Иконки: 1. "Cute Critters Free Icon Pack" от Elio Rivero 13 иконок размером 512×512px в PNG-формате
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Спешу поделиться свежей и симпатичной штуковиной для организации lightbox-ов или, выражаясь русским языком, всплывающих окон.
Штуковина представляет собой плагин к JQuery, очень легковесная и простая в использовании. Имя ей “PrettyPhoto”.
В отличии от некоторых своих собратьев по цеху, PrettyPhoto не является комбайном по отображению чего угодно во всплывающем окне. Плагин создан и работает только с целью показа изображений – как одиночных, так и в составе набора (галереи), но от этого не становится менее привлекательным.
Скрипт отлично уживается со следующими браузерами:
- Firefox 3.0 (Mac/PC/Linux)
- Firefox 2.0 (Mac/PC)
- Safari 3.1.1 (Mac)
- Opera 9+ (Mac/PC)
- Internet Explorer 6.0 (PC)
- Internet Explorer 7.0 (PC)
Распространяется по лицензии: Creative Commons Attribution 2.5.
В действии плагин можно посмотреть вот здесь.
Как использовать
Все как обычно:
Подключаем JQuery, сам плагин и его CSS.
1 2 3 | <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> |
В случае, если вам жизненно необходимо поддержать несчастный IE6 в его попытках выглядеть как браузер и отображать прозрачность в PNG, то понадобится еще прописать такую конструкцию:
1 2 3 4 5 6 | <!--[if IE 6]> <script src="js/DD_belatedPNG_0.0.7a-min.js"></script> <script> DD_belatedPNG.fix('.pp_left,.pp_right,a.pp_close,a.pp_arrow_next,a.pp_arrow_previous,.pp_content,.pp_middle'); </script> <![endif]--> |
Далее добавляем к нужным ссылкам на изображения атрибут rel=”prettyPhoto”.
Т.е., если сначала было:
1 | <a href="images/fullscreen/1.jpg" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a> |
Теперь станет:
1 | <a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a> |
Внимание:
- если вы хотите отображать описание к изображению – помещайте текст описания в значение атрибута ‘title' ССЫЛКИ;
- если вы хотите отображать заголовок у окошка с изображением – текст заголовка помещайте в значение атрибута ‘alt’ ИЗОБРАЖЕНИЯ;
И, наконец, инициализируем плагин:
1 2 3 4 5 | <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); }); </script> |
Для любителей наприменять различные настройки, инициализация может выглядеть так:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'normal', padding: 40, opacity: 0.35, showTitle: true, allowresize: true, counter_separator_label: '/', theme: 'light_rounded' }); }); </script> |
Расшифруем параметры.
- animationSpeed – скорость анимации. Возможные варианты: 'fast', 'slow', 'normal'
- padding – padding для изображения
- opacity – коэффициент прозрачности области, заполняющей все пустой пространство. Значение может быть в интервале от 0 до 1.
- showTitle – показывать/не показывать заголовки. Варианты: ‘true’, 'false'
- allowresize – разрешить или запретить скрипту изменять размеры изображения и тем самым подстраиваться под размер окна браузера. Возможные вариатны: ‘true’, 'false'
- counter_separator_label – разделитель в счетчике изображений в галерее. Например, «3/5» - третье изображение из пяти. Вот значок "/» вы можете заменить на что-нибудь другое.
- theme – тема оформления. Возможные варианты: ‘light_rounded’, 'light_rounded', 'dark_rounded', 'light_square', 'dark_square'.
Чтобы организовать переход между изображениями внутри лайтбокса, измените rel=”prettyPhoto” на rel=”prettyPhoto“ у каждого изображения из набора.
Демонстрация. Архив с исходным кодом примера.
Вот и всё. Удачи в разработках!
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Временная запись для определения стиля (e727c2fd-a655-4387-85aa-14f3fb89e30e - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
Это временная запись, которая не была удалена. Удалите ее вручную. (1eb47618-dc06-4757
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Сегодня мы посмотрим, как, имея в распоряжении новостной RSS-канал, PHP, SimplePie, JQuery и 20 минут времени сочинить симпатичный новостной блок с плавной прокруткой записей (смотреть демо).
Коротко о главном. Если вы не в курсе, что такое «SimplePie» - рассказываю.
SimplePie – это очень простая в использовании PHP-библиотека, предназначенная для работы с RSS-каналами. Поддерживаются следующие версии каналов: RSS (0.90, 0.91, 0.92, 1.0, 2.0), Atom (0.3, 1.0). С помощью с этого скрипта мы можем выводить текст новостей, заголовки и другие нужные штуки, как, например, дату публикации или изображение к новости. На самом деле у библиотеки гораздо больше возможностей, чем здесь перечислено. С полным перечнем функций можно ознакомиться на официальном сайте библиотеки.
Итак, приступим.
В работе нам понадобится:
- PHP не ниже версии 4.3
- PHP-библиотеки: XML Parser, PCRE, Mbstring, CURL, Zlib, iconv
- Библиотека SimplePie
- JQuery и плагин для плавной прокрутки текста - jquery.newsScroll.js
- Адрес RSS-канала - в примере будет использована одна из лент Хабра.
Шаг первый. На старт…
На своём тестовом сервере создаём папку, в которой у нас будет храниться наш новостной МегаМодуль. Назовем ее, например, «simple-news» и создадим внутри простую, но удобную структуру директорий для размещения требуемых файлов.
Simple-news (корневая директория)
- lib (директория для библиотеки SimplePie)
- cache (кэш, который будет генерировать SimplePie)
- js (директория для JQuery и плагина прокрутки новостей)
- css (стили оформления)
- images
Теперь:
- в корневой директории (Simple-news) создаем пустой php-файл. Назовем его «index.php». В этом файле мы чуть позже будем реализовывать функционал нашего новостного модуля.
- в папку «lib» помещаем файл «simplepie.inc» (это и есть так нужная нам библиотека).
- в «js» закидываем последнюю версию jquery и jquery.newsScroll.js
- в директории «css» создаем файл «style.css».
Всё. Едем дальше.
Шаг второй. Простой вывод новостей.
Самое время позаниматься программированием). Открываем «index.php» в любимом редакторе и начинаем.
1) сначала создадим простейшую HTML-разметку страницы, не забыв подключить CSS и нужные нам js-скрипты.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?php //Здесь мы позже что-нибудь накодим ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" /> <title>Новостной модуль</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.newsScroll.js"></script> </head> <body> <!--Начало модуля--> <div class="news"> <h1>Новостной модуль</h1> <span>PHP, SimplePie, jQuery... и всё, собсно</span> <!--В этой области будем организовывать вывод новостей --> </div> <!--Конец модуля--> </body> </html> |
2) подключаем SimplePie
Для этого в начале index.php вставим следующий код:
1 2 3 | require_once 'simplepie.inc'; //подключение библиотеки $feed = new SimplePie('http://feeds2.feedburner.com/jquery/'); //создаём объект класса, скармливая при этом адрес нужного нам фида $feed->handle_content_type(); // настройка HTTP-заголовков страницы с указанием нужной кодировки |
Это все, что необходимо в нашем случае.
Теперь самое главное: контент, который будет импортироваться из указанного RSS , доступен с помощью метода
$feed->get_items()
Кстати, в $feed->get_items() можно указывать диапазон записей. Так, например:
$feed->get_items(0, 5)
получит для нас 5 записей RSS-фида.
Итак, давайте допишем еще одну строчку кода к трем вышеперечисленным:
1 | $news = $feed->get_items(0, 5); //получаем массив записей |
Теперь в $news содержится массив с записями, и все, что нам нужно – пройтись в цикле по полученным значениям:
foreach ($news as $item){ … }
Мы хотим выводить получаемую информацию в следующем формате:
- дата
- заголовок новости (ссылкой на полный текст оригинала)
- текст новости
Применительно к используемому нами SimplePie, интересующие нас атрибуты записей мы получаем с помощью следующих методов:
- дата: $item->get_date()
- заголовок : $item->get_title()
- ссылка на оригинал: $item->get_permalink()
- текст новости: $item->get_description()
Чтобы познакомиться поближе с упомянутыми методами, а также получить информацию по многим другим - рекомендую почитать справочник по API библиотеки SimplePie , который специально для вас расположен вот тут.
Давайте уже применим все полученные нами знания и изобразим рабочий вариант новостного модуля.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <?php require_once 'lib/simplepie.inc'; //подключение библиотеки $feed = new SimplePie('http://www.gazeta.ru/export/rss/first.xml'); //создаём объект класса, скармливая при этом адрес нужного нам фида $feed->handle_content_type(); // настройка HTTP-заголовков страницы с указанием нужной кодировки $news = $feed->get_items(0,5); //получаем массив записей ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="windows-1251" /> <title>Новостной модуль</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.newsScroll.js"></script> </head> <body> <!--Начало модуля--> <div class="news"> <h1>Новостной модуль</h1> <span>PHP, SimplePie, jQuery... и всё, собсно</span> <ul> <?php foreach($news as $item) {?> <li> <h3><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h3> <span class="date"><?php echo $item->get_date(); ?></span> <p><?php echo $item->get_description(); ?></p> </li> <?php }?> </ul> </div> <!--Конец модуля--> </body> </html> |
Выглядеть все будет примерно так:
Шаг третий. Красивости и прочие приятности.
Настало время облагородить вывод информации.
Посмотрим, что нас не устраивает в текущем положении вещей:
- Различная длинна сообщений
- Надоедливая ссылка «Читать дальше»
- Изображения к текстам то отсутствуют, то присутствуют в эпических размерах (например, 800 пикселей в ширину) - не по фен-шую как-то.
- Общая бледность и некрасивость.
Будем исправлять.
Для начала, “заберем” из общего текста изображение (если оно там есть, конечно) и сделаем его ссылкой на статью. А если картинки нет – поставим вместо нее графическую «заглушку». Плюс ко всему, очистим текст от HTML-тэгов и обрежем его до пятидесяти слов. Для этого воспользуемся небольшим вспомогательным классом (есть в архиве с исходными кодами), в котором содержатся необходимые методы. Класс имеет чисто символическое название - «MyHelper» и содержит всего два метода - один из которых извлечет картинку из текста, а другой – впоследствии очистит и обрежет текст.
Итак, подключаем класс:
1 | require_once 'lib/helper.class.php'; |
Теперь получим изображение и очищенный текст. Вставим следующий фрагмент внутрь ‘foreach’:
1 2 3 | $helper = new MyHelper($item->get_description()); $img = $helper->getimg_from_tag(); //достаем картинку из текста $text = $helper->clean_text(); //очищаем текст и обрезаем его до 50 слов |
добавим $img к выводу новостей и заменим $item->get_description() на $text.
Ура, наши новости приобретают все более завершенный вид. Самое время применить CSS-магию к нашему творению. Думаю, на данном этапе действия не требуют объяснений – каждый может оформить результаты по своему вкусу. А сейчас просто посмотрим, что получилось:
Шаг четвертый и заключительный. Эффекты.
Еще на первом этапе нашего эксперимента мы создали папку “js” и поселили в ней JQuery и его плагин. Самое время снова вернуться к ним.
Напомню, плагин ‘newsScroll' нужен нам, чтобы организовать прокрутку новостей в нашем блоке.
Инициализация плагина происходит следующим образом:
1 2 3 4 5 6 | <script type="text/javascript"> $('.news ul').newsScroll({ speed: 2000, delay: 5000 }); </script> |
Но, прежде чем подключать эффекты, нам необходимо произвести некоторые манипуляции с CSS, - в частности, сделать высоту нашего новостного блока фиксированной – примерно по высоте двух записей.
Итак, фиксируем высоту списка и, для порядка, высоту каждого элемента списка – тоже.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .news ul { overflow: hidden; background: #E5DAC0; padding: 1em; border: 1px solid #F1EAD4; height: 260px; position: relative; float: left; min-width: 450px; } .news ul li { clear: left; list-style: none; overflow: hidden; position: relative; height: 130px; } |
Смотрим на результат. Впечатляемся ).
Как мы смогли убедиться, SimplePie - действительно простой и удобный инструмент для импорта RSS.
На этом все, до новых встреч.
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Jon Cazier на днях написал очень симпатичный плагин к JQuery, предназначением которого является произведение благоприятного впечатления на неискушенных пользователей посредством всяческих всплываний и постепенных проявлений текста. Конечно, в данное время ассортимент подобных плагинов достаточно обширен, но к этому творению, все-таки, предлагаю приглядеться повнимательнее.
Первый приятный момент – вес скрипта. В плагине всего 2,2 Кб и это не может не радовать.
Вторая приятность - авторское оформление всплывающей подсказки выглядит вполне прилично, так что – можно просто брать и использовать (что иногда бывает просто необходимо).
Ну и последнее – чистенький код плагина. Мелочь, а приятно ).
«Базовая комплектация» плагина представляет собой следующие файлы:
- jquery.betterTooltip.js – сам плагин
- style.css – файл стилей
- png-изображения в количестве 3-ч (трёх) штук.
Естественно, еще нам понадобиться двигатель всего этого благолепия – JQuery, последнюю версию которого вы можете скачать на офсайте.
Теперь посмотрим, как, собственно, заставить эту штуку работать.
1. Подключаем стили
1 | <link href="theme/style.css" rel="stylesheet" type="text/css" media="all" /> |
2. Подключаем JQuery
1 | <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script> |
3. Подцепляем плагин
1 | <script src="js/jquery.betterTooltip.js" type="text/javascript"></script> |
4. Инициализируем плагин
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function(){ $('.tTip').betterTooltip({speed: 150, delay: 300}); }); </script> |
В
1 | $('.tTip') |
указываем class или id элемента (элементов), title которого будет обработан плагином. Соответственно, таким элементом может являться все, что имеет title.
Например, это может быть:
1 | <a class="tTip" title="Текст всплывающей подсказки" href="#">Ссылочка</a> |
или вот:
1 | <div class="tTip" title="Текст всплывающей подсказки">Текст, по наведению на который будет появляться подсказка</div> |
Как мы видим, у плагина даже есть пара настроек:
1 | $('.tTip').betterTooltip({speed: 150, delay: 300}); |
- Параметр `speed` - время, в течении которого появляется подсказка. Чем больше значение этого параметра, тем МЕНЬШЕ скорость появления.
- Параметр `delay` - задержка появления подсказки. Чем больше параметр – тем больше времени будет проходить между наведением курсора на элемент и появлением подсказки
Все это в действии можно посмотреть вот здесь.
А здесь архив с демонстрационными материалами.
У меня пока все, удачных экспериментов!
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Шпаргалки по JQuery 1.2 и 1.3. Отлично помогают в процессе работы. Скачать. okbm("http://www
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru
Подписаться на:
Сообщения (Atom)
Сообщения
