jQuery-плагин Before/After
30 марта 2011, 19:20. Разместил: Mysterious Master
Вполне сносно, не правда ли? Возможности данного плагина безграничны. Доктора могут использовать данный плагин для отображения своих пациентов до и после, гуру Photoshop’а могут демонстрировать свои манипуляции, редизайнеры могут хвастаться своими воплощенными проектами. Данный плагин весит всего 7кб и может использоваться для отображения сразу нескольких изображений на странице.
Скачать
Скачать jquery.beforeafter.zip (версия 1.2.0 – Октябрь 20, 2010)
Внимание! У вас нет прав для просмотра скрытого текста.
Что же такого хорошего в данном плагине?
* Приятный эффект без применения Flash
* Вес в 7кб (4кб в архиве)
* Возможность многократного использования на одной странице
* Возможность адаптации к браузерам без включенной поддержки javascript.
Как им пользоваться
Начнем с того, что у обоих ваших изображений должен быть одинаковый размер. Каждое изображение должно быть размещено в отдельный div, и эти оба div’а должны быть размещены в одном с заданным ID. Смотрите пример.
<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, а также сам плагин. Разместите файлы у себя на сервере и установите ссылки на них:
<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/’).
Опции добавляются при вызове скрипта:
$('#container').beforeAfter({
animateIntro : true,
introDelay : 2000,
introDuration : 500,
showFullLinks : false
});Наслаждайтесь!
Посмотреть демо
* Пример 1
* Пример 2
Учтите, что плагин использует несколько изображений, которые хранятся в одной и той же папке, где расположен сам плагин. Если вы переместите плагин в другую папку на севере, то обновите пути к изображениям.
Вернуться назад