понедельник, 24 ноября 2008 г.

Правильные иллюстрации к статьям

Правильные иллюстрации к статьям

Иногда возникает следующая проблема: иллюстраций к статье много и, по меньшей мере, глупо будет вставить их все.





Ведь кому-то больше интересен текст, чем иллюстрации к нему, а некоторым наоборот. Да и вообще будет странно смотреться обильное количество иллюстраций.

Для решения этой проблемы мы будем использовать излюбленный мною jQuery и очень интересный плагин, который я сегодня накопал.

Итак, называется он «popeye» и весит, если это кому-нибудь интересно, 19 килобайт.

Он представляет из себя гремучую смесь скромного слайд-шоу и лайтбокса, а также реализован очень семантичено.

Инструкция по применению

Скачиваем архив со скриптом, в котором идут стилевые таблицы и даже иконки.

Подключаем к вашей странице все стили и библиотеки.

Теперь перейдём к созданию блока, в котором будут наши изображения

<div id="popeye" class="popeye">
 <ul>
  <li><a href="img1.jpg"><img src="img1_tr.jpg" alt="Описание 1." /></a></li>
  <li><a href="img2.jpg"><img src="img2_tr.jpg" alt="Описание 2." /></a></li>
  <li><a href="img3.jpg"><img src="img3_tr.jpg" alt="Описание 3." /></a></li>
  <li><a href="img4.jpg"><img src="img4_tr.jpg" alt="Описание 4." /></a></li>
  <li><a href="img5.jpg"><img src="img5_tr.jpg" alt="Описание 5." /></a></li>
 </ul>
</div> 

Теперь применим к этому списку с картинками наш скрипт


$(document).ready(function () {  
   $('.popeye').popeye();
});

Что из этого получилось, вы сможете увидеть, перейдя на страничку с примером, ссылку на которую вы найдете ниже.

  • Страничка плагина «popeye»
  • Пример использования «popeye»

Автор: Егор Чернёв.

Интересное...



Комментарии:


AndreyAney написал:
Спасибо большое, выглядит отличненько, обязательно воспользуюсь!

zluk написал:
В сафари под маком не видно картинок на демо страничке :(

-=Vovan=- написал:
У меня в Опера: Нажимаю на картинку из слайдшоу - увеличивается, нажимаю еще раз - убирается обратно, нажимаю на нее еще раз, чтобы снова увеличилась, и скрипт виснет на стадии показа загрузки. Вобще любую просмотренную (увеличенно) картинку нельзя посмотреть (увеличить) второй раз.
Вот както так, сори, если непонятно=)

CharnaD написал:
У меня все нормально (Opera 9.61). плагин прикольный, спасибо.

Максим Покровский написал:
Впечатляет. Очень удобно с помощью него делать обзоры конференций и фоторепортажи.

Yohan написал:
Ничего не видно под IE6. :(
Специально использую этот браузер - если он показал - значит везде нормально будет отображено…. :)

Дмитрий написал:
Да и в IE7 тоже криво показывает. По второму клику картинка уже не увеличивается. Жаль, удобная штука.

Геннадий написал:
да, штука удобная, может кто даже будет извращаться оформлять посты на Вордпрессе при помощи нее:)
Спасибо автору за интересный материал!

Евгений написал:
Отличный плагин, спасибо за новость!

livetrace написал:
Нажимаю на картинку из слайдшоу - увеличивается, нажимаю еще раз - убирается обратно, нажимаю на нее еще раз, чтобы снова увеличилась, и скрипт виснет на стадии показа загрузки. Вобще любую просмотренную (увеличенно) картинку нельзя посмотреть (увеличить) второй раз.
-К сожалению, та-же история. Opera 9.62, причём и для своей странички и для онлайнового примера

NickS написал:
Достаточно много уже скриптов написано на библиотеке jQuery, этот очнь популярен..

laberso написал:
Хороший, с практической точки зрения, плагин, но кастомизовать его… Внешний вид больно неказист.

zloy написал:
весьма интересно, но может кто нибудь поможет мне его поставить ?
Был бы весьма признателен…

Область реагирования | О юзабилити веб интерфейсов написал:
[...] Егор Чернев рассказывает об иллюстрациях [...]

Jman написал:
В Safari втом блоке где дескрипшн фотки появляются полоски прокрутки… причёмс странно, захотели появились, захоотели исчезли. ИМХО потому, что я прочёл выше, в продакшене это юзать нельзя. Разве что напильником пройтись, чтобы во всех браузерах заработало, если для своих нужд, всё равно напильник в руки, что бы хотя бы в нормальных браузерах без багла работало.

psp написал:
В мозилле всё окей работает спа!

lilumi написал:
Очень оригинальное решение, счас попробую к себе прикрутить.

mataleao написал:
Ребята, а не поможете прикрутить это слайд-шоу? Очень нужно.

Ириска написал:
О, боже мой! Как же у вас всех получилось все собрать и открыть в html странице??? Я уже который день ковыряюсь и не получается… )
Уважаемый автор, пардон за сей просьбу, Вас не затруднит скинуть мне на мыло папку со всей этой фигней и html файлом?.. чтоб просто - взял открыл и все. Буду очень благодарна!!
:покраснела:
)))

Диана написал:
Спасибо за статью буду пробовать

Автолюбитель написал:
Да-да-да, давно искал нечто подобное! Спасибо большое. Пикчи в тему - очень важно.

Semen написал:
Решение интересное, но большинству пользователей думаю будет неочевидное

Михаил написал:
Егор! Пожалуйста ответь мне.
Михаил

Олег написал:
Прикольная вещь, жаль, что не все браузеры нормально понимают…


Другие посты по этой теме:



Комментариев нет: