Develop Reference

Swiping image slider swiping over too far

I attempted to add a swiping function to my slider to allow users to swipe through the images on their touchable devices. It hasn't turned out the best. When swiping at the images they do not slide over all of the way and then when I get to the end of the gallery (end of fourth image), the slider goes blank (goes white) and then it goes back to normal after a while.
I have added the important code to this question, as well as added a Fiddle to try it out.
The fiddle doesn't replicate the issue, so if you would like to see what this is doing, please go here to see it live. Scroll about halfway down and then you will see the slider.
The example I used had three images instead of four and I am thinking this may be my issue, but when I remove my 4th image (a repeat of the first image for a smoother transition back to the first), the issue is still present. I'm 99% sure the issue resides within the javascript, but I can't locate it.
Does anyone see what I am doing wrong or how to improve this?
Please note. I am putting the full code for this function, but I believe the issue resides within the move or end function here:
move: function(event) {
// Continuously return touch position.
this.touchmovex = event.originalEvent.touches[0].pageX;
// Calculate distance to translate figure.
this.movex = this.index*this.slideWidth + (this.touchstartx - this.touchmovex);
// Defines the speed the images should move at.
var panx = 100-this.movex/6; // was /6
if (this.movex < 600) { // Makes the figure stop moving when there is no more content.
this.el.figure.css('transform','translate3d(-' + this.movex + 'px,0,0)');
}
if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving.
this.el.imgSlide.css('transform','translate3d(-' + panx + 'px,0,0)');
}
},
end: function(event) {
// Calculate the distance swiped.
var absMove = Math.abs(this.index*this.slideWidth - this.movex);
// Calculate the index. All other calculations are based on the index.
if (absMove > this.slideWidth/2 || this.longTouch === false) {
if (this.movex > this.index*this.slideWidth && this.index < 2) {
this.index++;
} else if (this.movex < this.index*this.slideWidth && this.index > 0) {
this.index--;
}
}
// Move and animate the elements.
this.el.figure.addClass('animate').css('transform', 'translate3d(-' + this.index*this.slideWidth + 'px,0,0)');
this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 100-this.index*50 + 'px,0,0)');
Full code:
if (navigator.msMaxTouchPoints) {
$('#slider').addClass('ms-touch');
$('#slider').on('scroll', function() {
$('.slide-image').css('transform','translate3d(-' + (100-$(this).scrollLeft()/6) + 'px,0,0)');
});
} else {
var slider = {
el: {
slider: $("#slider"),
figure: $(".figure"),
imgSlide: $(".slide-image")
},
slideWidth: $('#slider').width(),
touchstartx: undefined,
touchmovex: undefined,
movex: undefined,
index: 0,
longTouch: undefined,
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
this.el.figure.on("touchstart", function(event) {
slider.start(event);
});
this.el.figure.on("touchmove", function(event) {
slider.move(event);
});
this.el.figure.on("touchend", function(event) {
slider.end(event);
});
},
start: function(event) {
// Test for flick.
this.longTouch = false;
setTimeout(function() {
window.slider.longTouch = true;
}, 250);
// Get the original touch position.
this.touchstartx = event.originalEvent.touches[0].pageX;
// The movement gets all janky if there's a transition on the elements.
$('.animate').removeClass('animate');
},
move: function(event) {
// Continuously return touch position.
this.touchmovex = event.originalEvent.touches[0].pageX;
// Calculate distance to translate figure.
this.movex = this.index*this.slideWidth + (this.touchstartx - this.touchmovex);
// Defines the speed the images should move at.
var panx = 100-this.movex/6; // was /6
if (this.movex < 600) { // Makes the figure stop moving when there is no more content.
this.el.figure.css('transform','translate3d(-' + this.movex + 'px,0,0)');
}
if (panx < 100) { // Corrects an edge-case problem where the background image moves without the container moving.
this.el.imgSlide.css('transform','translate3d(-' + panx + 'px,0,0)');
}
},
end: function(event) {
// Calculate the distance swiped.
var absMove = Math.abs(this.index*this.slideWidth - this.movex);
// Calculate the index. All other calculations are based on the index.
if (absMove > this.slideWidth/2 || this.longTouch === false) {
if (this.movex > this.index*this.slideWidth && this.index < 2) {
this.index++;
} else if (this.movex < this.index*this.slideWidth && this.index > 0) {
this.index--;
}
}
// Move and animate the elements.
this.el.figure.addClass('animate').css('transform', 'translate3d(-' + this.index*this.slideWidth + 'px,0,0)');
this.el.imgSlide.addClass('animate').css('transform', 'translate3d(-' + 100-this.index*50 + 'px,0,0)');
}
};
slider.init();
}
.animate {
transition: transform 0.3s ease-out;
}
#company-slider-section {
width: 100%;
height: auto;
position: relative;
}
div#slider {
width: 100%;
overflow: hidden;
position: relative;
}
div#slider .figure {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
}
.ms-touch.slider {
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: none;
/* Hides the scrollbar. */
-ms-scroll-chaining: none;
/* Prevents Metro from swiping to the next tab or app. */
-ms-scroll-snap-type: mandatory;
/* Forces a snap scroll behavior on your images. */
-ms-scroll-snap-points-x: snapInterval(0%, 100%);
/* Defines the y and x intervals to snap to when scrolling. */
}
.figure2 {
animation: 20s company-slider infinite;
margin: 0;
}
#keyframes company-slider {
0% {
left: 0%;
}
30% {
left: 0%;
}
35% {
left: -100%;
}
55% {
left: -100%;
}
60% {
left: -200%;
}
90% {
left: -200%;
}
95% {
left: -300%;
}
100% {
left: -300%;
}
}
.slide-wrapper img {
width: 25%;
min-height: 100%;
float: left;
position: relative;
overflow: hidden;
}
.slide {
height: 100%;
position: relative;
}
.slide:before {
content: "";
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}
<div id="company-slider-section">
<div class="section-blocks left">
<div id="slider" class="slider">
<figure class="figure figure2">
<div class="slide-wrapper">
<div class="slide"><img src="/images/work/projects/eslich/es-test1.jpg" alt class="slide-image"></div>
</div>
<div class="slide-wrapper">
<div class="slide"><img src="/images/work/projects//desktop-service.jpg" alt class="slide-image"></div>
</div>
<div class="slide-wrapper">
<div class="slide"><img src="/images/work/projects//es-test2.jpg" alt class="slide-image"></div>
</div>
<div class="slide-wrapper">
<div class="slide"><img src="/images/work/projects//es-test1.jpg" alt class="slide-image"></div>
</div>
</figure>
</div>
</div>
</div>

Prevent Over Scrolling

After studying, looking at tutorials, getting some help here, I almost got this script working as intended. However, I'm not at a stand still and my brain hurts trying to figure out the logic.
The problem is the script allows for over scrolling forward. How can I stop that?
jQuery:
var $item = $('.slider'),
start = 0,
view = $('#main-header').width(),
end = $('.slider').width();
$('.next').click(function () {
if (start < view) {
start++;
$item.animate({
'left': '-=100%'
});
}
});
$('.prev').click(function () {
if (start > 0) {
start--;
$item.animate({
'left': '+=100%'
});
}
});
HTML:
<div id="main-header">
<div class="slider">
<div class="item-post" style="background: url(http://4.bp.blogspot.com/-LjJWOy7K-Q0/VOUJbMJr0_I/AAAAAAAAdAg/I2V70xea8YE/s320-c/enviroment-5.jpg) center"></div>
<div class="item-post" style="background: url(http://1.bp.blogspot.com/-l3UnbspFvv0/VOUK8M-34UI/AAAAAAAAdA0/ooGyXrHdNcg/s320-c/enviroment-2.jpg)"></div>
<div class="item-post" style="background: url(http://2.bp.blogspot.com/-cun1kQ42IBs/VOUaSPfnebI/AAAAAAAAdBQ/yTEj9K-BGdk/s320-c/fashion-3.jpg)"></div>
</div>
<div class="prev"></div>
<div class="next"></div>
</div>
CSS:
#main-header {
overflow: hidden;
position: relative;
}
.slider {
width: 100%;
height: 200px;
position: relative;
}
.item-post {
width: 100%;
height: 200px;
background: rgba(0, 0, 0, 0.1);
background-size: cover !important;
background-position: center !important;
position: absolute;
top: 0;
}
.item-post:first-of-type {
left: 0;
}
.item-post:nth-of-type(2) {
left: 100%;
}
.item-post:last-of-type {
left: 200%;
}
.prev, .next {
position: absolute;
top: 0;
bottom: 0;
width: 25px;
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
jsfiddle: http://jsfiddle.net/51maaks8/8/

In order to determine whether there is another slide visible, you could create a function that adds the .offsetLeft value of the parent element to the .offsetLeft value of the last visible slide element and its width. You would then subtract the width of the parent element from the sum of these calculations.
In doing so, you are essentially calculating the position of the last slide element relative to the left positioning of the .item-wrapper parent element.
function moreVisibleSlides() {
var $last = $('#slider > .item-wrapper > .item-post:last:visible'),
positionRelativeToParent = $last.parent()[0].offsetLeft + $last[0].offsetLeft + $last.width() - $item.width();
return positionRelativeToParent > 5;
}
For the click event listener, only slide the element if there are more visible slides, which is determined by the boolean returned by the moreVisibleSlides function. In addition, I also added a check (!$item.is(':animated')) to prevent the next slide from being animated if there is currently an animation in progress. This ensures that you can't click the .next button multiple times during an animation and then over scroll regardless of whether or not there are more visible slides.
Updated Example
$('.next').click(function () {
if (moreVisibleSlides() && !$item.is(':animated')) {
start++;
$item.animate({
'left': '-=100%'
});
}
});

jitter when using jquery to alter background-position

Here's the jsfiddle.
It's the interface to cropping an image. As you can see the selection div takes the same background image and positions it to the negative of the top and left attributes of the selection div. In theory this should give a perfect overlap, but there's a jitter as you move the selection div around, and I can't seem to figure out what is causing it.
html
<div id="main">
<div id="selection"></div>
</div>
css
#main {
width: 600px;
height: 450px;
position: relative;
background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
background-size: contain;
}
#selection {
width: 100px;
height: 100px;
position: absolute;
background: url("http://cdn-2.historyguy.com/celebrity_history/Scarlett_Johansson.jpg");
border: 1px dotted white;
background-size: 600px 450px;
}
jquery
$(document).ready(function () {
var move = false;
var offset = [];
var selection = null;
$("#selection").mousedown(function (e) {
move = true;
selection = $(this);
offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
});
$("#selection").mousemove(function (e) {
if (move == true) {
selection.css("left", e.pageX - offset[0]);
selection.css("top", e.pageY - offset[1]);
selection.css("background-position", (((-selection.position().left) - 1) + "px " + ((-selection.position().top ) - 1) + "px"));
}
});
$("#selection").mouseup(function (e) {
move = false;
});
})

It would appear that there is a value of 5 offset that needs to be added to ensure seamlessness
DEMO http://jsfiddle.net/nzx0fcp5/2/
offset = [e.pageX - selection.offset().left + 5, e.pageY - selection.offset().top + 5];

So, while experimenting I discovered that this was only a problem at certain sizes of the image. At the original size it is no problem, neither at half nor a quarter of this size. It wasn't simply a matter of keeping the image in proportion not having the image square or using even pixel sizes. I'm assuming this had something to do with partial pixel sizes, but I'm not sure, and I couldn't see any way to work around this, at least none that seemed worth the effort.
So while checking out the code of other croppers I took a look at POF's image cropper, they seem to have got round the problem by not using the background-position property at all (I'm not sure if it's plugin or they coded it themselves). They just set the image down and then used a transparent selection div with 4 divs stuck to each edge for the shading. So there's no pixel crunching on the fly at all. I like the simplicity and lightweight nature of this design and knocked up a version myself in jsfiddle to see if I could get it to work well.
new jitter free jsfiddle with no pixel crunching
I liked the solution for the preview box as well.
html
<body>
<div id="main">
<img src="http://flavorwire.files.wordpress.com/2012/01/scarlett_johansson.jpg" />
<div id="upperShade" class="shade" > </div>
<div id="leftShade" class="shade" > </div>
<div id="selection"></div>
<div id="rightShade" class="shade"></div>
<div id="lowerShade" class="shade" ></div>
</div>
</body>
css
#main {
position:relative;
width: 450px;
height: 600px;
}
#selection {
width: 148px;
height: 148px;
position: absolute;
border: 1px dotted white;
top: 0px;
left: 0px;
z-index: 1;
}
.shade {
background-color: black;
opacity: 0.5;
position: absolute;
}
#upperShade {
top: 0px;
left: 0px;
width: 600px;
}
#leftShade {
left: 0px;
top: 0px;
height: 150px;
width: auto;
}
#rightShade {
left: 150px;
top: 0px;
height: 150px;
width: 450px;
}
#lowerShade {
left:0px;
top: 150px;
width: 600px;
height: 300px;
}
jquery
$(document).ready(function () {
var move = false;
var offset = [];
var selection = null;
$("#selection").mousedown(function (e) {
move = true;
selection = $(this);
offset = [e.pageX - selection.offset().left, e.pageY - selection.offset().top];
});
$("#selection").mousemove(function (e) {
if (move == true) {
selection.css("left", e.pageX - offset[0]);
selection.css("top", e.pageY - offset[1]);
setShade();
}
});
function setShade() {
$("#upperShade").css("height", selection.position().top);
$("#lowerShade").css("height", 600 - (selection.position().top + 150));
$("#lowerShade").css("top", selection.position().top + 150);
$("#leftShade").css("top", selection.position().top);
$("#leftShade").css("width", selection.position().left);
$("#rightShade").css("top", selection.position().top);
$("#rightShade").css("left", selection.position().left + 150);
$("#rightShade").css("width", 450 - selection.position().left);
}
$("#selection").mouseup(function (e) {
move = false;
});
});

Animate elements on .click () using .clone () and .animate ()

There're next HTML:
<div class="garden">
<div class="point left">◄</div>
<div class="trees">
<div id="apple">Apple</div>
<div id="cherry">Cherry</div>
<div id="pear">Pear</div>
<div id="oak">Oak</div>
<div id="fir">Fir</div>
</div>
<div class="point right">►</div>
</div>
And CSS:
.garden { position: absolute; top: 135px; left: 150px; }
.garden > div { display:inline-block; }
.trees { width:550px; height:53px; position:relative; font-size:70%; }
.point { width: 16px; height: 15px; background: url(/point-sprite.png) no-repeat;}
.point.left { background-position: -16px 0; }
.point:hover { background-position: 0 0; }
.point.right { background-position: -32px 0; }
.point:hover { background-position: -48px 0 }
.trees > div span { min-width:50px; position:absolute; display:inline-block; top:25px; left:15px; text-align:center; }
#apple, #cherry, #pear, #oak, #fir { position: absolute; color: #0094d9; }
#apple { top: 10px; }
#cherry { top: 2px; left: 90px; }
#pear { left: 180px; }
#oak { left: 280px; }
#fir { top: 2px; left: 373px; }
I need to change the position of the elements to the left after each clicking "point left". And to the right after each clicking "poin right". When an item has a position of leftmost and click "point left" then this item should go right to the rightmost position. One great man (https://stackoverflow.com/users/2121519/stuart-miller) help me to creat next script:
JS
$(document).ready(function () {
function changePositionLeft() {
var trees = $('#trees');
trees.children().each( function(index, child) {
if (index == 0) {
$(child).animate(trees.children().last().position());
}
else {
$(child).animate(trees.children().eq(index - 1).position());
}
});
trees.children().first().appendTo(trees);
}
$(".point.left").click(function() {
changePositionLeft();
});
});
Help transform it according to my task with using .clone. Thanks in advance
Link for script: http://jsfiddle.net/8kkfw7mu/5/

You want us to code the changePositionRight function?
If so, here it is.
I kept the same structure as the changePositionLeft method, but changed the following:
if (index == trees.children().length -1) {
$(child).animate(trees.children().first().position());
}
Instead of targetting the first element and putting it in the last position, we target the last one, and put it in first position.
Then:
else {
$(child).animate(trees.children().eq(index + 1).position());
}
Instead of moving the others elements to the previous position, move them to the next position.
Final result
Add this to your script:
function changePositionRight(){
var trees = $('#trees');
trees.children().each( function(index, child) {
if (index == trees.children().length -1) {
$(child).animate(trees.children().first().position());
}
else {
$(child).animate(trees.children().eq(index + 1).position());
}
});
trees.children().last().appendTo(trees);
}
$(".point.right").click(function() {
changePositionRight();
});

jquery slider responsive problems

I am a beginner with jQuery and I was trying to make an slider responsive and is working but I have some bugs that I want to fix, first of all when is passing to the next picture some times it just turn white and it does not working any more, and second some times it start to go faster and faster.
Any suggestions?
.mascara
{ width: 100%; height: 100%;
overflow: hidden;
}
.carrusel{ position: relative; width: 100%; height: 100%; }
.carrusel li{ width:25%; height: 100%; float: left; background-repeat: no-repeat; background-position: center; background-size: cover; }
<script src="jquery-2.0.3.min.js"></script>
<script>
var cantidadFotos = $('.carrusel li').size();
var incremento = $('.mascara').width();
var limite = (cantidadFotos-1) * incremento;
var velocidad = 550;
$('.carrusel').css('width', (cantidadFotos*100)+"%");
$('.carrusel li').css('width', incremento+"px");
var posX = 0;
resize();
function resize()
{
$(window).resize(function () {
incremento = $('.mascara').width();
$('.carrusel li').css('width', incremento+"px");
posX = -(incremento * imagenes);
$('.carrusel').css('left', posX+"px");
});
setInterval(function(){ nextFoto(); }, 3000);}
var imagenes = 0;
function nextFoto(){
imagenes++;
posX+= -incremento;
if (posX<-limite){
posX=0;
imagenes = 0;
$('.carrusel').css({ left: posX });
}
$('.carrusel').animate({ left: posX},350);
// $('.carrusel').css({ left: posX});
return false;
}
</script>

If you want to remove the blank page when sliding, change to this:
In .carrusel
Change:
position: relative;
To:
position: absolute;
And to make it faster, change:
setInterval(function () {
nextFoto();
}, 3000);
To
setInterval(function () {
nextFoto();
}, 1000);
Change according to your needs to make it faster!
Demo