Set to false flexslider slide animation only when under 780px screen width - javascript

Quick little question:
How can I disable the slide animation on flexslider ONLY when under 780px screen width?
Any clever easy javascript I can add?
Possibly target the slideshow: true only when in that specific screen size?
Thanks in advance and good day everyone ^.^
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true
});
});
Maybe adding something like:
$(window).width(780) {
$('.flexslider').flexslider({
slideshow: false
});
but the above attempt seems incorrect. If anyone could share some light <3

I would use matchMedia for this and set up a listener for when the screen size moves above/below the 780px threshold.
var query = window.matchMedia("(max-width: 780px)");
query.addListener(mediaChange);
function mediaChange(query) {
if(query.matches) {
//We are 780px or below, disable flexslider animation
$('.flexslider').flexslider({slideshow: false});
} else {
//We are above 780px, enable flexslider animation
$('.flexslider').flexslider({slideshow: true});
}
}

Related

flexslider direction arrows responsive

I'm currently trying to use the flexslider at full-width and the at a certain breakpoint I want the directional arrows to drop under the slider for mobile use. I would then use text buttons here to move the slider.
I tried a few solutions. Created two sliders: One for full width and one for mobile. I hide the full-width one when it reaches the breakpoint, but I can't seem to combined these two pieces of javascript to make it work.
Has anyone did this before that could help me out?
Basicly trying to use the Basic Slider Here as my full-screen slider and combined it with the Basic Slider customDirectionNav for my mobile slider.
This one is used for full-width
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
This one is used for mobile with the directional arrows/text on the bottom
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
customDirectionNav: $(".custom-navigation a")
});
});
</script>
You could use Modernizr to activate different instances of your script at different brakepoints.
For example:
$("body").each(function() {
if (Modernizr.mq('only screen and (min-width: 750px)')) {
// For full-width
$('.flexslider').flexslider({
animation: "slide"
});
} else {
// For mobile
$('.flexslider').flexslider({
animation: "slide",
customDirectionNav: $(".custom-navigation a")
});
}
});

lightbox image is resizing wrong

I am having a strange issue. Whenever I re-size the window and proceed to launch the lightbox, the image is the wrong size. Once you re size the window again the lightbox detects the window size and re-scales the image properly.
<script type="text/javascript">
jQuery(document).ready(function($){
$(".fancybox").fancybox({
type:'inline',
autoCenter : true,
afterShow: function(){
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
slideshow: true,
touch: true,
animationLoop: false
});
}
}); // fancybox
}); // ready
</script>
I have a demo of the site here link to demo on site
you can also download a small zip with the contents here zip 26kb
so to replicate the error I am seeing.
A .Start by opening the demo.
B. Click on "Inline". Close it.
C. Afterwards rescale the browser window to something like ~400px. Click on "Inline" again.
D. The image should be the wrong size. As soon as you resize with the browser with the lightbox open the problem is fixed. But i want the image to always be the correct size when you launch the lightbox initially.
the image is always cropped incorrectly. Sometimes you see two images and sometimes the image runs off.
You can simply call a window resize in your javascript code, once you have initialised flexslider
$(".fancybox").fancybox({
type:'inline',
autoCenter : true,
afterShow: function(){
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
slideshow: true,
touch: true,
animationLoop: false
});
//force browser re-calculation
$(window).resize();
}
});

Load flexslider after a fancybox div has opened

I've used flexslider and fancybox numerous times and both are great plugins. Separately, both these work great on a site I'm doing but the problem I'm going to describe now occurs when a flexslider gallery is places inside a fancybox div. I must point out this is a responsive website so there are no static widths, all widths are percentage based.
At first everything seems to be working. I load fancybox and flexslider displays as it should, its width 50% of the fancybox container. But if I add display: none; to the fancybox div which it needs to hide the div until its called upon, when fancybox loads all the images in flexslider are tiny, though the width of the flexslider div is correct. I'm assuming that because flexslider loads when the page does it has no idea what its width is. Which is why this doesn't occur when display: none; is set.
My javascript to load the 2 plugins currently looks like this:
// =FANCYBOX
$(".fancybox").fancybox({
padding : 2,
nextEffect: 'fade',
prevEffect: 'fade',
title: false,
});
// =FLEXSLIDER
$(function(){
if($(".flexslider").length > 0) {
$(".flexslider").addClass("loading");
// Can also be used with $(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
directionNav: false,
slideshowSpeed: 5000,
animationSpeed: 360,
easing: "easeInQuad",
useCSS: false,
start: function(slider){
$('.flexslider').removeClass('loading');
}
});
});
}
});
Does anyone know how I can force flexslider to initialise again after fancybox is visible?
Thanks,
Steve
Try initializing flexslider inside fancybox's afterShow callback like :
jQuery(document).ready(function($){
$(".fancybox").fancybox({
padding : 2,
nextEffect: 'fade',
prevEffect: 'fade',
title: false,
afterShow: function(){
$('.flexslider').flexslider({
// flexlslider options
});
}
}); // fancybox
}); // ready
you should avoid display:none; for fancybox, so flexslider can determine image size properly.
this trick may help you:
put fancybox div inside a parent div.
set visibility:hidden; for fancybox div.
set display:none; for parent div.
hope that it helps.

jQuery Fading Text is Jumpy in IE8 and

I'm having a problem fading in and out text with jQuery in IE8.
I'm using FlexSlider (WooThemes).
Plus... I also would like to stop the fade on the background image (after slide 1) if possible.
Here's my test site.
jQuery Code
jQuery(window).load(function(){
jQuery('.flexslider').flexslider({
animation: "fade",
animationLoop: false,
touch: true,
slideshowSpeed: 10000,
startAt: 0,
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
start: function(slider){
jQuery('body').removeClass('loading');
},
after: function(slider) {
jQuery('#backgman').stop("fade");
},
end: function(slider){
// $('#result').load('form.html');
// window.location = "template-form.html"
//alert('Ready was performed.');
}
});
jQuery('#slide-text').css({zIndex:7}).fadeOut(0);
jQuery('#slide-text').css({zIndex:6}).fadeOut(0);
});
I have an IE8 css file and have used opacity:inherit; filter:inherit;
I think I'm really close to getting it... any ideas/suggestions?
Let me know if you need any additional information.
You must to remove div which you have used in "UL" tag and set float:left in your li style.
It should be like this,
<ul>
<li style="float:left;">...</li>
<li style="float:left;">...</li>
</ul>
For, example, take a look at this link where it was working fine.
Hope, this one will help you!.

Flexsilder issue - playing in the descending order

I'm not sure whether this is a css or JS issue. I have installed the flexslider plugin' which seems to have been installed correctly however I have a problems with the flexslider carousel, code posted at github. My sliders are playing in descending order, i'm not quite sure why or how it's doing this... below is the Jquery in corresponding JS
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
slideshow:true,
directionNav: true,
minItems: 1,
maxItems: 1,
controlsContainer: false,
manualControls: '.custom-controls li',
start: function(slider){
$('body').removeClass('loading');
}
});
});
My Example Site
Maybe you are overriding flex-slider CSS from your own CSS? Maybe you have floated flex-slider's contents (image, div or what ever) to right or reverse direction? If so try to fix that :)
I have tested this after seeing your post. So I changed flex-slider inline float:left to float: right and now I get last slide as first slide and all slides are reversed.
It's a bug in Flexslider 2.2.2.
Downli
https://github.com/woothemes/FlexSlider

Categories

Resources