lightbox image is resizing wrong - javascript

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();
}
});

Related

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

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});
}
}

flexslider content change on button press

I am trying to create a flex slider. Where we have button at the top, when the user selects any button the content below it changes using the flex slider, my flexslider is working but I am not able to pass parameter into the jquery to change content.
currently my flexslider js is :
$(document).ready(function()
{
$(window).load(function(){
$('.cmsslider').flexslider({
animation: 'slide',
selector:'.slidercontent .row',
animationLoop:true,
slideshow:false,
controlsContainer: ".container",
controlNav: true,
manualControls: "#thumbnail img",
slideshowSpeed: 700
});
});
});
Maybe you're looking for something like:
$("#someBtn").click(function(){
$(".cmsslider").html("//new content here");
});

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.

Alter Javascript on window resize

first post here; apologies for any information that is missed. I'm a complete novice at Javascript so apologies in advanced also.
I am currently creating a responsive website with a slider.
The slider takes up the entire background of the site on larger devices, but when the window is less than 480px I would like the slider to scale down to a smaller area. I have this working correctly, in terms of when the device first loads up the page. The correct slider settings are being used.
But what I would like is: if the user scales the website below 480px then the javascript will change at that point (like CSS media queries) to use the new slider settings. At the moment, if you scale below or above the threshold, you have to refresh the page to get the new slider settings.
This is some code I managed to find from other questions asked on the site, but it does not allow the change to happen when the window is resized, only on a refresh:
<script>
$(document).ready(function(){
if($(window).width()>480){
$(".slideshow").startslider({
slideTransitionSpeed: 500,
slideTransitionEasing: "easeOutExpo",
sliderFullscreen: true,
sliderAutoPlay: false,
sliderResizable: true,
slidesDraggable: false,
slideImageScaleMode: "fill",
showTimer: false,
showPause: false,
showDots: false
});
return;
} else {
$(".slideshow").startslider({
slideTransitionSpeed: 500,
slideTransitionEasing: "easeOutExpo",
sliderFullscreen: false,
sliderAutoPlay: false,
sliderResizable: true,
slidesDraggable: true,
slideImageScaleMode: "fill",
showTimer: false,
showPause: false,
showDots: false
});
}
});
</script>
I am completely new to Javascript, so this may be a simple problem; but it's beyond me all the same.
You can wrap your code inside a function like this:
function slider() {
// your code here
}
which is then called on page load:
$(function(){
slider();
});
and also on window resize:
$(window).on('resize', function() {
slider();
});

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!.

Categories

Resources