до и после на jquery

Эффект до и после на JQuery

Всем привет, в этой записи я вам покажу как сделать эффект до и после. Мы создадим слайдер из 2 изображений, которые будут переключаться с помощью флажка и создавать эффект изменения до и после.

Посмотреть как это работает можно здесь.

Демо

Для реализации данного эффекта мы будем использовать готовую библиотеку TwentyTwentyhttps://github.com/zurb/twentytwenty

Для начала нам нужно скачать все необходимые файлы и подключить к своему проекту. Для подключения вам нужно скопировать код и поменять пути на свои.

<!--ПОДКЛЮЧАЕМ БИБЛИОТЕКУ JQUERY-->
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

<!--ПОДКЛЮЧАЕМ ФАЙЛЫ TwentyTwenty -->
<script src="js/jquery.event.move.js" type="text/javascript"></script>
<script src="js/jquery.twentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" />

Теперь давайте добавим изображения которые будем использовать. В качестве контейнера можно использовать любой div с произвольным классом, в моем случае это container1.

<div id="container1">  
<!-- Изображение "ДО" -->
<img src="http://before.png" />
<!-- Изображение "ПОСЛЕ" -->
<img src="http://after.png/" />
</div>

В самом низу кода необходимо разместить следующий скрипт.

$(function(){   
$("#container1").twentytwenty();
});

Этого достаточно чтобы скрипт работал, теперь давайте рассмотрим дополнительные параметры.

Дополнительные параметры

$(function(){
$("#container1").twentytwenty({
default_offset_pct: 0.5, /* Какая часть изображения отображается при загрузке страницы*/
orientation: 'horizontal', /* Ориентация фотографий('horizontal' or 'vertical')*/
before_label: 'January 2017', /* Set a custom before label*/
after_label: 'March 2017', /* Set a custom after label*/
no_overlay: true, /*Не показывать наложение до и после*/
move_slider_on_hover: false, /* Переместить ползунок при наведении мыши?*/
move_with_handle_only: true, /* Позволяет пользователю проводить пальцем в любом месте изображения для управления движением ползунка.*/
click_to_move: false /* Разрешить пользователю нажимать (или касаться) в любом месте изображения, чтобы переместить ползунок в это место.*/
});
});
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

37
Оставить комментарий

avatar
37 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
34 Авторы комментариев
treantincAndrewBogAndrewBogMurrayVumMurrayVum Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Coumadine Buy Online [url=http://apcialisle.com/#]Buy Cialis[/url] Viagra Corazon cheapest cialis 20mg Viagra Quelle Dose

JanleF
Гость

Cialis Generico Collaterali [url=https://apcialisle.com/#]comprare cialis online[/url] Can You Treat Chlamydia With Flagyl 200 Cialis Cephalexin Prescription Number

Bupbaipt
Гость
Bupbaipt

generic viagra buy uk pain meds online without doctor prescription viagra 100 mg sale

Bupbaipt
Гость
Bupbaipt

buy cialis 20 mg online cialis online buy levitra overnight

JanleF
Гость

Bactrim Ds Fors Sale [url=https://abcialisnews.com/#]Cialis[/url] Is Cephalexin Penacillin buying cialis online forum Provera Best Website Amex Accepted

Bupbaipt
Гость
Bupbaipt

order viagra australia cialis online cialis online discount

Arturojep
Гость
Arturojep

cheap viagra soft tabs https://viagrawithoutdoctorspres.com how to cut cialis pills

JimmyGoori
Гость
JimmyGoori

cheapest cialis https://edpillsphrm.com cheap viagra with prescription

JanleF
Гость

Viagra Zurich Kaufen [url=https://buycialisuss.com/#]cialis generic online[/url] Priligy De 30 O 60 Cialis Mail Order Amoxicillin Mexico

RaymondLem
Гость
RaymondLem

viagra sale sydney https://www.sildwithdoctorprescription.com can you buy cialis canada

Harryraw
Гость
Harryraw

viagra online order india http://alexa24ph.com – viagra online generic cialis

Harryraw
Гость
Harryraw

cheap viagra canada online http://zithazi.com – buy Azithromycin order cialis daily

Harryraw
Гость
Harryraw

buy cialis brisbane http://zithazi.com – cheap zithromax order viagra for men

Harryraw
Гость
Harryraw

where can i buy real viagra online http://zithazi.com – buy zithromax buy cialis online cheapest

BradleyAnync
Гость
BradleyAnync

order generic viagra uk
viagra

BradleyAnync
Гость
BradleyAnync

buy viagra at cvs
viagra

BradleyAnync
Гость
BradleyAnync

cialis online cheap canada
sildenafil

BradleyAnync
Гость
BradleyAnync

order cialis viagra
viagra

BradleyAnync
Гость
BradleyAnync

buy levitra overnight
generic viagra 100mg

BradleyAnync
Гость
BradleyAnync

cheap viagra wholesale
generic viagra 100mg

BradleyAnync
Гость
BradleyAnync

can you just buy viagra
viagra pills

BradleyAnync
Гость
BradleyAnync

can you buy viagra vietnam
viagra pills

MathewDaups
Гость
MathewDaups

cialis dosage 40 mg dangerous
http://cialisxtl.com/ cialis in canada

MathewDaups
Гость
MathewDaups

interactions for cialis
http://cialisxtl.com/ fastest delivery of cialis buying online

AndrewCig
Гость
AndrewCig

cost of viagra 100mg walmart https://sildenafilprof.com
viagra super active for sale&39;

AndrewCig
Гость
AndrewCig

viagra in action https://sildenafilprof.com
buy cheapest cialis online

Robertorell
Гость
Robertorell

cialis dosage 40 mg dangerous can you have multiple orgasms with cialis

RichardHap
Гость
RichardHap

generic viagra prices: generic viagra coupon order viagra nz

RichardHap
Гость
RichardHap

viagra erection: viagra prescription viagra sale boots pharmacy

unsenty
Гость

viagra contre indications [url=https://abuycialisb.com/]online cialis[/url] Cephalexin And Mao Inhibitors cheapest cialis Amlodipine Online Pharmacy

MurrayVum
Гость
MurrayVum

prescription drugs online without doctor prescription drugs online
onlinepharmacyero.com cvs prescription prices without insurance

MurrayVum
Гость
MurrayVum

legal to buy prescription drugs from canada pain meds online without doctor prescription
onlinepharmacyero.com prescription drugs online

MurrayVum
Гость
MurrayVum

best price for generic viagra on the internet ambien without a doctor’s prescription
onlinepharmacyero.com ed meds online without prescription or membership

MurrayVum
Гость
MurrayVum

buy prescription drugs from india sildenafil without a doctor’s prescription
onlinepharmacyero.com viagra without doctor prescription

AndrewBog
Гость
AndrewBog

switching from tamsulosin to cialis cialis

AndrewBog
Гость
AndrewBog

cialis 5mg coupon cheap cialis

treantinc
Гость
treantinc

q buy cialis online [url=https://cheapcialisll.com/]Cialis[/url] Viaga Suppliers Cialis Levitra In Women