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");
});
Related
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();
}
});
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.
When I try to use "basic flexlisder" (http://flexslider.woothemes.com/index.html) and "basic carousel" (http://flexslider.woothemes.com/basic-carousel.html) on one page, carousel does not display properly. I guessed it's fault of clashing class names (since both are in <div class="flexslider">). However, after analyzing source code on flexslider page, I found they put the carousel in <div class="flexslider carousel"> , unlike what is written in the example, but it still did not help. Carousel still behaves like slider.
I also tried copying styles for new class, which I called flexcarousel, but it didn't work (even after making changes in jquery call as well). Anyone has simple example of slider and carousel working on a simple page?
My javascript:
<script type="text/javascript">
//slideshow
$(window).load(function() {
$('.flexslider').flexslider({
animation : "slide",
start : function(slider) {
$('body').removeClass('loading');
}
});
});
//carousel
$(window).load(function() {
$('.flexcarousel').flexslider({
animation : "slide",
animationLoop : false,
itemWidth : 210,
itemMargin : 5,
minItems : 2,
maxItems : 4
});
});
</script>
The carousel class does not actually make it a carousel, you have to assign the items a width using itemWidth, within the options:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210, // Must have a size set for it to switch to carousel view.
});
});
Make sure to use different IDs to target each individual flexslider (if you have more than one):
<div id="main-slider" class="flexslider">
<div id="secondary-slider" class="flexslider">
I have a flexslider in my website at: this link.
I need to get a bullet point style or horizontal bullet point for navigation. Following this I have added necessary <ul> and the code in JS, as like:
jQuery(function(){
jQuery('.flexslider').flexslider({
animation: "slide",
controlNav: true,
manualControls: $(".flex-control-nav li"),
});
});
But i can't get it to work. Any help is appreciated.
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!.