I'm using Owl Carousel 2 along the Mouse Wheel plugin as the website shows how to implement it:
https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html
Here is my example: https://z-testing.000webhostapp.com/_owlcarousel/
This is my code:
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
The problem I have is that the scroll it's not smooth, it is very fast and scrolls through 6-10 slides at once which it's not useable.
I want it to be as smooth as the mouse wheel scroll as posible.
I have find a lightbox plugin that integrates the mousewheel plugin and checked how they do it but I just don't know how to use that with my code, can you help me with it?
This is the plugin: http://fancybox.net
You can check on the Image gallery (ps, try using mouse scroll wheel) popup gallery example.
If you download the plugin it, you can see that they implemented Mouse Wheel plugin this way:
if ($.fn.mousewheel) {
wrap.bind('mousewheel.fb', function(e, delta) {
if (busy) {
e.preventDefault();
} else if ($(e.target).get(0).clientHeight == 0 || $(e.target).get(0).scrollHeight === $(e.target).get(0).clientHeight) {
e.preventDefault();
$.fancybox[ delta > 0 ? 'prev' : 'next']();
}
});
}
Can you help me to make it work correctly with Owl Carousel?
You need to use smartSpeed function to set the scrolling speed.
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
var owl = $('.owl-carousel');
$('.owl-carousel').owlCarousel({
loop:true,
margin:0,
nav:true,
smartSpeed:1000,
responsive:{
0:{
items:1
},
600:{
items:1
},
1000:{
items:1
}
}
});
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY>0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
$(document,window,'html').mouseleave(function(){
$("#footer").fadeOut();
}).mouseenter(function(){
$("#footer").fadeIn();
});
$(function(){
$("#header").load("includes/header.html");
$("#footer").load("includes/footer.html");
});
body { padding-top: 0px;}
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/normalize.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.carousel.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/bootstrap.min.css">
<link rel="stylesheet" href="https://z-testing.000webhostapp.com/_owlcarousel/app/css/main.css">
<header id="header"></header>
<div class="owl-carousel owl-theme">
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-3-ux.png)"></div>
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-4-editorial.png)"></div>
<div class="item" style="background-image:url(https://z-testing.000webhostapp.com/_owlcarousel/app/img/carousel-5-senaletica.png)"></div>
</div>
<footer id="footer"></footer>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/vendor/modernizr-3.11.2.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery-3.5.1.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/bootstrap.bundle.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.justifiedGallery.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/owl.carousel.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/jquery.mousewheel.min.js"></script>
<script src="https://z-testing.000webhostapp.com/_owlcarousel/app/js/main.js"></script>
Related
If I have pauseOnHover set to true, how do I fire an event always when sliders is paused? and when slider is unpaused? I've tried:
$('.slider-element').hover(function(){}).mouseleave(function(){})
But It doesn't match 'pauseOnHover'
<* --- update --- *>
You just need to use jQuery hover event, the slider by default will pause, though you can still include it in the options for the slider.
$('.slick').hover(function() {
console.log('slider is paused');
}, function() {
console.log('slider will resume again');
});
Below is a working example:
How about using slickPause and slickPlay,
in combination with mouseover and mouseleave seems to be working fine.
You can also use jQuery built-in hover function, you are using the callback wrong though. For more information, please check:
https://api.jquery.com/hover/
For more information on how to work with slick methods: https://github.com/kenwheeler/slick/#methods
$('.slick').slick({
autoplay: true,
autoplaySpeed: 1000,
pauseOnHover: true // you don't need to specify this, as it is the default value
});
// MOUSEOVER AND MOUSELEAVE
/*$('.slick').on('mouseover', function() {
$(this).slick('slickPause');
console.log('slider is paused');
});
$('.slick').on('mouseleave', function() {
$(this).slick('slickPlay');
console.log('slider can resume');
});*/
// JQUERY BUILT-IN HOVER
$('.slick').hover(function() {
$('body').addClass('orange');
}, function() {
$('body').removeClass('orange');
});
.orange {
background: orange;
}
.slide {
background: #333;
color: #fff;
line-height: 200px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="slick">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
</div>
Hi i'm experimenting with the auto play function in owl carousel, however whenever i switch to another web tab in chrome and come back to my webpage with the carousel, it stops working unless i give it a drag on the image. Here's my html and jquery code:
<!DOCTYPE html>
<html>
<head lang="en">
<title>MySite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script type="text/javascript" src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel">
<div> <img src="1.jpg"></div>
<div> <img src="2.jpg"></div>
<div> <img src="3.jpg"></div>
<div> <img src="4.jpg"></div>
<div> <img src="5.jpg"></div>
<div> <img src="6.jpg"></div>
</div>
<script>
$(document).ready(function(){
var owl = $(".owl-carousel")
owl.owlCarousel({
items:1,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:3000,
autoplayHoverPause:false
});
owl.trigger('play.owl.autoplay',[5000]);
});
</script>
</body>
</html>
You can try to use ifvisible.js
And try to use both .blur and .focus commands otherwise it won't work
This is implementation for my site
jQuery(window).ready(function(){
var owl = jQuery('.owl-carousel');
owl.owlCarousel({
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:2000,
dots:false,
responsive:{
0:{
items:2
},
620:{
items:3
},
992:{
items:4
},
1200:{
items:6
}
}
})
jQuery('.owl-carousel .owl-item').on('mouseenter',function(e){
jQuery(this).closest('.owl-carousel').trigger('stop.owl.autoplay');
})
jQuery('.owl-carousel .owl-item').on('mouseleave',function(e){
jQuery(this).closest('.owl-carousel').trigger('play.owl.autoplay',[2000]);
})
ifvisible.blur(function(){
owl.trigger('stop.owl.autoplay',[2000]);
});
ifvisible.focus(function(){
owl.trigger('play.owl.autoplay',[2000]);});
});
});
I hope this helps
Here is answer
$(window).on("blur focus", function(e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
switch (e.type) {
case "blur":
// do work
owl.trigger('stop.owl.autoplay');
break;
case "focus":
// do work
owl.trigger('play.owl.autoplay', [1000]);
break;
}
}
$(this).data("prevType", e.type);
});
try this it will work ENJOY :D
You can simply trigger the next slide button. It worked well for me:
$(window).on('focus', function () {
$('.owl-next').trigger('click');
});
I have tried to get a Fancybox iFrame to load automatically and to give the overlay a different color.
So far so good on the autoload.
Got it working.
The color I couldn't get to change.
Now I tried several examples many listed here. But I guess I am doing something wrong.
In my head code I am loading :
<script type="text/javascript">
$(document).ready(function(){
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
'overlayColor' : '#ec2d2d',
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
And my HTML is like this :
<a class="fancybox fancybox.iframe" id="hidden_link" href="iframe.html" title="HOI">Iframe</a>
It opens onload. But I cannot get the overlay to turn red.
What am I missing here?
I have tried as you see several options. But none used the right way.
TIAD
Edit:
When I try to add this code:
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
I seem to make a mess of the Syntax. Because it doesn't respond to this script. But I am clueless of how to do this correctly.
This is what I got now:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
},
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
Also adding the CSS code makes no difference:
#fancybox-overlay{
background-color:#ec2d2d !important;
}
Could it be that there is another JS file loaded that overwrites all of my settings??
These are the libraries loaded:
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
Just set the background color before showing of fancybox.
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
and then remove .fancybox() from $("#hidden_link").fancybox().trigger('click');
Just like this it'll work perfectly.
You should be able to change the overlay color in CSS
#fancybox-overlay{background-color:#ec2d2d !important;}
You can execute the overlay alone,
$.fancybox.helpers.overlay.open({parent: $('body')});
So I am trying to use both Revolution Slider and prettyPhoto here - http://vgoford.com/index3.html
But there is a possible conflict in their jQuery. The prettyPhoto refuses to work. Any idea what could be the issue?
Here's the code for both of them -
<!-- Revolution Slider -->
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.revolution.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/revolution-settings.css" media="screen" />
<script type="text/javascript">
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:890,
startheight:450,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:200,
navigationType:"bullet", //bullet, thumb, none, both (No Shadow in Fullwidth Version !)
navigationArrows:"verticalcentered", //nexttobullets, verticalcentered, none
navigationStyle:"round", //round,square,navbar
touchenabled:"on", // Enable Swipe Function : on/off
navOffsetHorizontal:0,
navOffsetVertical:20,
stopAtSlide:-1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:-1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
</script>
<!-- /Revolution Slider -->
and
<!-- PrettyPhoto -->
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("area[rel^='prettyPhoto']").prettyPhoto();
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',theme:'pp_default',slideshow:4000, opacity: 0.50, deeplinking: false, overlay_gallery: false, autoplay_slideshow: false});
});
</script>
<!-- /PrettyPhoto -->
I believe the issue is here:
var tpj=jQuery;
tpj.noConflict();
If you're going to use noConflict then you have to be sure it's consistent because it will apply to jQuery as a whole.
In almost all cases that I've typically done:
$('selector') // normal way
jQuery('selector') // safe way
var $js = jQuery.noConflict(); // safe way
$j('selector')
Another good alternative would be:
(function($) {
// document.ready code can go here
// $('selector').hide(); for example
})(jQuery);
Hope this helps!
Try to Modify your files in order in your page like as follows:
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/rs-plugin/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/fullwidth.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/revolution-settings.css" media="screen" />
<script type="text/javascript" language="javascript">
// Revolution Slider
jQuery(document).ready(function() {
if (jQuery.fn.cssOriginal!=undefined)
jQuery.fn.css = jQuery.fn.cssOriginal;
jQuery('.fullwidthbanner').revolution({
delay:9000,
startwidth:890,
startheight:450,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
hideThumbs:200,
navigationType:"bullet", //bullet, thumb, none, both (No Shadow in Fullwidth Version !)
navigationArrows:"verticalcentered", //nexttobullets, verticalcentered, none
navigationStyle:"round", //round,square,navbar
touchenabled:"on", // Enable Swipe Function : on/off
navOffsetHorizontal:0,
navOffsetVertical:20,
stopAtSlide:-1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0,....
stopAfterLoops:-1, // Stop Timer if All slides has been played "x" times. ....
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
// PrettyPhoto
jQuery(document).ready(function(){
jQuery("area[rel^='prettyPhoto']").prettyPhoto();
jQuery(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({
animation_speed:'fast',
theme:'pp_default',
slideshow:4000,
opacity: 0.50,
deeplinking: false,
overlay_gallery: false,
autoplay_slideshow: false
});
});
});
</script>
The following code will only let me drag and drop ONE clone onto a droppable area. When I try and drop another clone on the droppable area it disappears. I am able to drag it however.
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
Following the comments from people and the jfiddle provided below, it appears as though this snippet of code is working in a typical setup, however, I am using this in combination with Phonegap and more specifically on an Android device.
I know this is more specific and harder to replicate for other people, but for some reason it will not allow me to drag another clone onto the wrapper still.
Here is my entire code, if someone can spot something, i'd really appreciate it!
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script src="jquery-1.7.min.js"></script>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="ff.css" />
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
originalEvent.preventDefault();
});
}
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
$(".show").live('touchstart', function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginLeft: "-150px"
}, 500 );
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginLeft: "0px"
}, 1000 );
$("#openCloseIdentifier").hide();
}
});
}//onDeviceReady
</script>
</head>
<body>
<div id="wrapper">
<div id="navWrap">
<div id="openCloseIdentifier"></div>
<div id="slider">
<div id="sliderContent">
<img class="shape" src="images/150x150.gif" />
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="images/show.gif" class="show" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Figured it out.
I had the shape being cloned nester in the wrapper div. That won't work.
Took it out and it works!