Изображение ДО и ПОСЛЕ

  • Не нравится
  • +2
  • Нравится
С помощью этого плагина jQuery можно увидеть изображение до и после изменения, перемещая ползунок на изображении. Этот плагин подойдет сайтам - галереям или просто тому, кто увлекается фотошопом: показывать какая была картинка, и какая стала.

Плагин устроен таким образом что одно изображение накладывается на другое а перемещая ползунок можно регулировать видимую часть изображения до и после. Под изображением располагаются соответствующие кнопки «До» и «После» нажав на которые можно сразу переключиться на одно из изображений.

Изображение ДО и ПОСЛЕ


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

Сам плагин и картинки лежат в архиве. Библиотеку jQuery и jQueryUI скачайте с оф. сайта.

Что делать?


Для начала подключаем плагин, вставляем в исходник вот этот кусок файла. Это настройка плагина.
<script type="text/javascript">
$(function(){
$('#zvlad-beforeafter').beforeAfter({
animateIntro : true,
introDelay : 2000,
introDuration : 500,
showFullLinks : false
});
</script>


Теперь надо две картинки. Вставляем их вот так:

<div id="zvlad-beforeafter">
<div><img src="/uploads/posts/2012-03/1331570227_before.jpg" width="400" ></div>
<div><img src="/uploads/posts/2012-03/1331570185_after.jpg" width="400" ></div>
</div>


Все DIV обязательные!

Настройки



id="zvlad-beforeafter" - это ид картинок. Можно использовать и class если картинок много, а настройки одни.

  • animateIntro — разрешает или запрещает ползунку перемещаться от правой части изображения до центра, значения true или false.
  • introDelay — задержка до начала появления ползунка на изображении, указывается в миллисекундах.
  • introDuration — скорость передвижения ползунка от края до центра, указывается в миллисекундах.
  • showFullLinks — разрешает или запрещает отображение кнопок «До» и «После» под изображением, значения true или false.


Пример



Изображение ДО и ПОСЛЕ

Изображение ДО и ПОСЛЕ


jquery-beforeafter.rar [2.92 Kb] (cкачиваний: 94)

Коментарии