Ищу плагин До/После
Здравствуйте! В сети много плагинов, которые работают в принципу, как этот слайдер.
Но вот вопрос: Может кто-нибудь встречал, чтобы в этот слайдер можно было вставить не картинку, а div с определенными контентом, плюс чтобы он был вертикальным? По ссылке выше плагин имеет возможность вертикального слайдера, но там нельзя вставить div. Прошу о помощи:) Спасибо! |
Rise,
Там беда в том получается еще, что если в диве что-то размещаешь, то потом выделить ничего нельзя. Блок сверху видно как-то все перекрывает Блоки кликабельны внутри быть должны.. |
Alexbelkevich,
а убрать то что мешает в плагине кликам? |
:write:
(function($){
$.fn.twentytwenty = function(options) {
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
return this.each(function() {
var sliderPct = options.default_offset_pct;
var container = $(this);
var sliderOrientation = options.orientation;
var beforeDirection = (sliderOrientation === 'vertical') ? 'down' : 'left';
var afterDirection = (sliderOrientation === 'vertical') ? 'up' : 'right';
container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
//container.append("<div class='twentytwenty-overlay'></div>");
var beforeImg = container.find(".img:first");
var afterImg = container.find(".img:last");
container.append("<div class='twentytwenty-handle'></div>");
var slider = container.find(".twentytwenty-handle");
slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
container.addClass("twentytwenty-container");
beforeImg.addClass("twentytwenty-before");
afterImg.addClass("twentytwenty-after");
var overlay = container.find(".twentytwenty-overlay");
//overlay.append("<div class='twentytwenty-before-label'></div>");
//overlay.append("<div class='twentytwenty-after-label'></div>");
var calcOffset = function(dimensionPct) {
var w = beforeImg.width();
var h = beforeImg.height();
return {
w: w+"px",
h: h+"px",
cw: (dimensionPct*w)+"px",
ch: (dimensionPct*h)+"px"
};
};
var adjustContainer = function(offset) {
if (sliderOrientation === 'vertical') {
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
}
else {
beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
}
container.css("height", offset.h);
};
var adjustSlider = function(pct) {
var offset = calcOffset(pct);
slider.css((sliderOrientation==="vertical") ? "top" : "left", (sliderOrientation==="vertical") ? offset.ch : offset.cw);
adjustContainer(offset);
}
$(window).on("resize.twentytwenty", function(e) {
adjustSlider(sliderPct);
});
var offsetX = 0;
var offsetY = 0;
var imgWidth = 0;
var imgHeight = 0;
slider.on("movestart", function(e) {
if (((e.distX > e.distY && e.distX < -e.distY) || (e.distX < e.distY && e.distX > -e.distY)) && sliderOrientation !== 'vertical') {
e.preventDefault();
}
else if (((e.distX < e.distY && e.distX < -e.distY) || (e.distX > e.distY && e.distX > -e.distY)) && sliderOrientation === 'vertical') {
e.preventDefault();
}
container.addClass("active");
offsetX = container.offset().left;
offsetY = container.offset().top;
imgWidth = beforeImg.width();
imgHeight = beforeImg.height();
});
slider.on("moveend", function(e) {
container.removeClass("active");
});
slider.on("move", function(e) {
if (container.hasClass("active")) {
sliderPct = (sliderOrientation === 'vertical') ? (e.pageY-offsetY)/imgHeight : (e.pageX-offsetX)/imgWidth;
if (sliderPct < 0) {
sliderPct = 0;
}
if (sliderPct > 1) {
sliderPct = 1;
}
adjustSlider(sliderPct);
}
});
container.find(".img").on("mousedown", function(event) {
//event.preventDefault();
});
$(window).trigger("resize.twentytwenty");
});
};
})(jQuery);
|
Rise,
ок!:) ... где-то на форуме были решения на данную тему |
до и после, минимальная версия
:) :write: нажать на белую полосу и переместить вверх/вниз
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
body{
background-color: #A9A9A9;
}
.container {
width: 500px;
height: 300px;
margin: 80px auto;
position: relative;
text-align: center;
}
.container a{
color: #FFFFFF;
}
.container > .top {
height: 100%; width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background: blue;
}
.container > .bottom {
height: 100%; width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;
background: red;
}
.container > .bar {
height: 3px;
position: absolute;
top: 0px;
right: 0;
left: 0;
background: #FFFFFF;
cursor: move;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".container"), function(b) {
var k = b.querySelector(".bottom"),
c = b.querySelector(".bar"),
d, e = b.clientHeight,
l = b.clientWidth,
g = function(a) {
a = a.clientY - d;
a = Math.min(e, Math.max(0, a));
f(a)
},
f = function(a) {
k.style.clip = "rect(0," + l + "px," + a + "px,0)";
c.style.top = a + "px"
};
f(e / 2);
var h = function(a) {
window.removeEventListener("mousemove", g, !0);
window.removeEventListener("mouseup", h, !0)
};
c.addEventListener("mousedown", function(a) {
d = a.clientY - c.offsetTop;
window.addEventListener("mousemove", g, !0);
window.addEventListener("mouseup", h, !0)
}, !0)
})
});
</script>
</head>
<body>
<div class="container">
<div class="top"><h2><a href="http://javascript.ru/forum/" title="http://javascript.ru/forum/">forum</a></h2></div>
<div class="bottom"><h2><a href="http://www.yandex.ru/" title="http://www.yandex.ru/">yandex</a></h2></div>
<div class="bar"></div>
</div>
<div class="container">
<div class="top"><h2><a href="http://javascript.ru/forum/" title="http://javascript.ru/forum/">forum</a></h2></div>
<div class="bottom"><h2><a href="http://www.yandex.ru/" title="http://www.yandex.ru/">yandex</a></h2></div>
<div class="bar"></div>
</div>
</body>
</html>
|
Спасибо Вам большое!!!
|
рони,
Не сочтите за наглость. А не подскажете, как заставить работать разделяющую линию по тапу? Чтобы на сенсорах работало? Хотя бы в какую сторону копать? |
Alexbelkevich,
Цитата:
не хватит тогда сюда https://developer.mozilla.org/en-US/...I/Touch_events https://habrahabr.ru/post/118318/ |
Спасибо!
|
Alexbelkevich,
версия для сенсорных экранов, найдите простую проверку поддержки TouchEvent устройством и добавьте если хотите, чтоб переключало "на лету" if(Touch) mousemove = touchmove и т.д.
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".container"), function(b) {
var k = b.querySelector(".bottom"),
c = b.querySelector(".bar"),
d, e = b.clientHeight,
l = b.clientWidth,
g = function(a) {
a = a.changedTouches[0];
a = a.clientY - d;
a = Math.min(e, Math.max(0, a));
f(a)
},
f = function(a) {
k.style.clip = "rect(0," + l + "px," + a + "px,0)";
c.style.top = a + "px"
};
f(e / 2);
var h = function(a) {
window.removeEventListener("touchmove", g, !0);
window.removeEventListener("touchend", h, !0)
};
b.addEventListener("touchstart", function(a) { a = a.changedTouches[0];
d = a.clientY - c.offsetTop;
window.addEventListener("touchmove", g, !0);
window.addEventListener("touchend", h, !0)
}, !0)
})
});
|
| Часовой пояс GMT +3, время: 19:34. |