How to add threshhold onclick() jQuery?
Question
How to add a click threshhold on the images in the slider? The problem is that if I move the slider to a page to other by clicking and dragging a picture, this one gets selected.
How can I add a threshhold or something so that it doesn't get selected when I move from one slide to other?
Second question might be: How can select the images without moving (because if I select one the other 2 are moving) and I want them to be centered on the swiper (same distance between them and bottom, top, left and right)
I want this effect for a phonegap mobile application I use jQuery and jQuery mobile. I also use the swiper plugin.
This is the code: http://jsfiddle.net/alecstheone/pDNJ7/
HTML:
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide red-slide">
<img class="image" src="http://athleticsfrontier.com/wp-content/uploads/2010/07/cal-logo.jpg">
<img class="image" src="http://rs1228.pbsrc.com/albums/ee443/aneesha_scott-morton/cute-puppies.jpg~c200">
<img class="image" src="http://cdn3.www.babble.com/wp-content/uploads/2014/03/pup3-200x200.jpg">
</div>
<div class="swiper-slide blue-slide">
<img class="image" src="http://th09.deviantart.net/fs47/200H/i/2012/019/4/c/husky_puppy_1341_by_sooper_husky-d274ud4.jpg">
<img class="image" src="http://careforyourpuppy.org/wp-content/themes/headlines/thumb.php?src=wp-content/uploads/2010/12/puppy.jpg&w=200&h=200&zc=1&q=90">
<img class="image" src="http://khloekardashian.celebuzz.com/wp-content/uploads/2013/03/Khloe-Kardashian-Lamar-Odom-New-Puppy-3-200x200.jpg">
</div>
</div>
<div class="pagination"></div>
</div>
</body>
CSS:
/*
* Swiper 2.5.1
* Mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/sliders/swiper/
*
.swiper-container {
margin:0 auto;
position:relative;
overflow:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
/* Fix of Webkit flickering */
z-index:1;
}
.swiper-wrapper {
position:relative;
width:100%;
-webkit-transition-property:-webkit-transform, left, top;
-webkit-transition-duration:0s;
-webkit-transform:translate3d(0px,0,0);
-webkit-transition-timing-function:ease;
-moz-transition-property:-moz-transform, left, top;
-moz-transition-duration:0s;
-moz-transform:translate3d(0px,0,0);
-moz-transition-timing-function:ease;
-o-transition-property:-o-transform, left, top;
-o-transition-duration:0s;
-o-transform:translate3d(0px,0,0);
-o-transition-timing-function:ease;
-o-transform:translate(0px,0px);
-ms-transition-property:-ms-transform, left, top;
-ms-transition-duration:0s;
-ms-transform:translate3d(0px,0,0);
-ms-transition-timing-function:ease;
transition-property:transform, left, top;
transition-duration:0s;
transform:translate3d(0px,0,0);
transition-timing-function:ease;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
float: left;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
}
/* ===============================================================
Your custom styles, here you need to specify container's and slide's
sizes, pagination, etc.
================================================================*/
.swiper-container {
/* Specify Swiper's Size: */
/*width:200px;
height: 100px;*/
}
.swiper-slide {
/* Specify Slides's Size: */
/*width: 100%;
height: 100%;*/
}
.swiper-slide-active {
/* Specific active slide styling: */
}
.swiper-slide-visible {
/* Specific visible slide styling: */
}
/* ===============================================================
Pagination Styles
================================================================*/
.swiper-pagination-switch {
/* Stylize pagination button: */
}
.swiper-active-switch {
/* Specific active button style: */
}
.swiper-visible-switch {
/* Specific visible button style: */
}
/* Demo Styles */
html {
height: 100%;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
color: #fff;
text-align: center;
}
.red-slide {
background: #ca4040;
}
.blue-slide {
background: #4390ee;
}
.orange-slide {
background: #ff8604;
}
.green-slide {
background: #49a430;
}
.pink-slide {
background: #973e76;
}
.swiper-slide .title {
font-style: italic;
font-size: 42px;
margin-top: 80px;
margin-bottom: 0;
line-height: 45px;
}
.pagination {
position: absolute;
z-index: 20;
left: 10px;
bottom: 10px;
}
.swiper-pagination-switch {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 8px;
background: #222;
margin-right: 5px;
opacity: 0.8;
border: 1px solid #fff;
cursor: pointer;
}
.swiper-visible-switch {
background: #aaa;
}
.swiper-active-switch {
background: #fff;
}
.image {
width:180px;
height:180px;
}
.selected {
border-style: solid;
border-color: black;
border-width: 2.5px;
}
JS:
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true
})
$(".image").click(function() {
if($(this).hasClass("selected"))
$(this).removeClass("selected");
else
$(this).addClass("selected");
});
2 answers
solution1
1 ACCPTED 2014-03-19 14:37:11
Two problems. First, you are getting a rounding error with the 2.5px border. Try changing it to 2 or 3px. Second, the border is effectively adding a 2-3px margin around the images which is causing them to jump. Try having a margin around the images that disappears when you add the border. Like this:
.image {
width:180px;
height:180px;
margin: 3px;
}
.selected {
border-style: solid;
border-color: black;
border-width: 3px;
margin: 0;
}
As for not swiping when clicking on an image. As per the Swiper API add noSwiping: true when initializing your swiper and add the class swiper-no-swiping to any element you don't want to swipe. I've added it to the 3 <img> tags on the first page in the following jsfiddle:
For not highlighting/unhighlighting when sliding try the following code:
mySwiper.addCallback('SlideChangeStart', function(swiper){
sliding = true;
}) ;
mySwiper.addCallback('SlideChangeEnd', function(swiper){
sliding = false;
}) ;
$(".image").click(function() {
if(!sliding){
if($(this).hasClass("selected"))
$(this).removeClass("selected");
else
$(this).addClass("selected");
}
});
solution2
1 2014-03-19 15:01:35
You could check, wether the mouse was moved a certain distance since you pressed the mouse button down until you released it, because the click event gets fired after you released the mouse button. When it the traveled distance is to high, then supress the selection. You can store the startposition of the mouse in one variable and check it in your click event.
$(".image").click(function() {
if(distancetravelled>treshhold)
{
if($(this).hasClass("selected"))
$(this).removeClass("selected");
else
$(this).addClass("selected");
}
});
$(".image").onmousedown(function()
{
startposition = currentMousePos
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.