Иногда возникает следующая проблема: иллюстраций к статье много и, по меньшей мере, глупо будет вставить их все.
Ведь кому-то больше интересен текст, чем иллюстрации к нему, а некоторым наоборот. Да и вообще будет странно смотреться обильное количество иллюстраций.
Для решения этой проблемы мы будем использовать излюбленный мною 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 написал:
Решение интересное, но большинству пользователей думаю будет неочевидное
Михаил написал:
Егор! Пожалуйста ответь мне.
Михаил
Олег написал:
Прикольная вещь, жаль, что не все браузеры нормально понимают…
Комментариев нет:
Отправить комментарий