×
HeadHunter and Superjob rezume updater on Ruby on Rails (21 авг 2017)

Практикуемся в написании кода под rails.

Вопрос jQuery-плагин Before/After

Больше
6 года 6 мес. назад - 6 года 6 мес. назад #1 от Aleksej
Aleksej создал эту тему: jQuery-плагин Before/After
В последнее время 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, например:
<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
});
Не забывайте, что плагин использует несколько изображений, хранящихся в одной и той же собственной директории. Если вы переносите плагин в иной каталог - обновите пути.

Enjoy!

Прочесть оригинал статьи
Последнее редактирование: 6 года 6 мес. назад от Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.