В последнее время web-мастера нередко размещают на сайте фотографии, призванные отображать некие объекты До и После некоего события или отрезка времени. Например, на веб-сайте New York Times такие изображения отображены посредством Flash’а – они представляет собой нечто вроде бутерброда, в котором одна фотография лежит поверх другой, а пользователь может посредством специального слайдера, скажем так, «намазывать масло на хлеб». Очень наглядный и эффективный способ представления. Но ведь такого эффекта возможно добиться и при помощи javascript и jQuery, и Flash здесь совершенно не обязателен.
Посмотреть демо:
Пример 1
Пример 2
Вполне эффектно, не правда ли? Возможности этого расширения поистине впечатляющи. Врачи смогут использовать данный плагин для отображения своих пациентов до и после лечения, знатоки Photoshop’а - демонстрировать свое мастрество, редизайнеры похвастаются реализованными проектами. Ничто, к слову, не мешает вам использовать этот плагин не единожды на одной и той же странице.
Скачать
jquery.beforeafter.zip
(версия 1.2.0 – Октябрь 20, 2010)
Чем же так примечателен этот плагин?
- Приятный эффект без применения Flash
- Вес в 7кб (4кб в архиве)
- Возможность многократного использования на одной странице
- Возможность адаптации к браузерам без включенной поддержки JS
Способ использования
Прежде всего - у ваших изображений должен быть одинаковый размер. Каждый рисунок должен быть помещен в отдельный div, и эти два div’а должны быть размещены в одном с заданным ID, например:
Code:
<div id="container">
<div><img alt="before" src="before.jpg" width="600" height="366" /></div>
<div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>
У всех изображений обязательно укажите параметры ширины и высоты, иначе плагин не будет работать в Safari, Chrome и, вполне возможно, вообще в браузерах семейства webkit.
Для использования плагина понадобится копия jQuery и jQuery UI, или укажите ссылку на jquery и на jqueryui в Google, а также сам плагин. Разместите файлы на своем сервере и установите ссылки на них:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
$('#container').beforeAfter();
});
</script>
Пожалуй, это все. Теперь можно применить этот плагин к любому количеству изображений на странице и смотреть, что же у нас получилось.
Опции
Эти функции позволят вам оптимально настроить плагин под свои цели и задачи:
- animateIntro – функция самостоятельно прокручивает слайдер полностью до правой части контейнера, а затем возвращает ползунок на центральную точку (по умолчанию: false)
- introDelay – Если animateIntro = true, то здесь можно указать количество миллисекунд, после которых запустится автоматическая прокрутка (по умолчанию 1000).
- introDuration – Если animateIntro = true, то здесь можно указать количество миллисекунд, в течение которых будет идти автоматическая прокрутка (по умолчанию 1000).
- showFullLinks – отображение или отключение ссылок, расположенных под изображениями для перехода в полный размер (по умолчанию: true)
- imagePath – путь (абсолютный или относительный) до каталога хранения изображений (default ‘/js/beforeAfter/’).
Опции добавляются при вызове скрипта:
Code:
$('#container').beforeAfter({
animateIntro : true,
introDelay : 2000,
introDuration : 500,
showFullLinks : false
});
Не забывайте, что плагин использует несколько изображений, хранящихся в одной и той же собственной директории. Если вы переносите плагин в иной каталог - обновите пути.
Enjoy!
Прочесть оригинал статьи
