Изображение ДО и ПОСЛЕ
С помощью этого плагина jQuery можно увидеть изображение до и после изменения, перемещая ползунок на изображении. Этот плагин подойдет сайтам - галереям или просто тому, кто увлекается фотошопом: показывать какая была картинка, и какая стала.
Плагин устроен таким образом что одно изображение накладывается на другое а перемещая ползунок можно регулировать видимую часть изображения до и после. Под изображением располагаются соответствующие кнопки «До» и «После» нажав на которые можно сразу переключиться на одно из изображений.
Для использования плагина понадобиться подключить библиотеку jQuery, jQueryUI и сам плагин jQuery.beforeafter.
Так же надо загрузить пару изображений, которые отвечают за ползунки. Пути этих изображений настраиваются в самом плагине.
Сам плагин и картинки лежат в архиве. Библиотеку jQuery и jQueryUI скачайте с оф. сайта.
Для начала подключаем плагин, вставляем в исходник вот этот кусок файла. Это настройка плагина.
Теперь надо две картинки. Вставляем их вот так:
<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 если картинок много, а настройки одни.
Плагин устроен таким образом что одно изображение накладывается на другое а перемещая ползунок можно регулировать видимую часть изображения до и после. Под изображением располагаются соответствующие кнопки «До» и «После» нажав на которые можно сразу переключиться на одно из изображений.
Для использования плагина понадобиться подключить библиотеку jQuery, jQueryUI и сам плагин jQuery.beforeafter.
Так же надо загрузить пару изображений, которые отвечают за ползунки. Пути этих изображений настраиваются в самом плагине.
Сам плагин и картинки лежат в архиве. Библиотеку jQuery и jQueryUI скачайте с оф. сайта.
Что делать?
Для начала подключаем плагин, вставляем в исходник вот этот кусок файла. Это настройка плагина.
<script type="text/javascript">
$(function(){
$('#zvlad-beforeafter').beforeAfter({
animateIntro : true,
introDelay : 2000,
introDuration : 500,
showFullLinks : false
});
</script>
$(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.
Пример
- Владислав
- 13-03-2012, 11:28
- 7 241