I tried to integrate wootheme's Flexslider on my site and it looks/works great except for when it is loading.
When you refresh the page with the slider, before flexslider loads (about 1 second) the first slide appears very big and flashes to black then dissapears and then the carousel appears.
I think the image is loading faster than the jquery? How can I hide the image unti jquery loads (like on the demo website, even if i refresh 3 billion times, the problem is never repeated on their website, it all loads gracefully! - http://flexslider.woothemes.com/carousel-min-max.html )
I loaded the flexlisder.js right after jquery and copied the same html code from the demo (to match the .css file that is also loaded. And here is the init code I am using - from the demo site also:
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
You need to deal with the callback functions for the plugin you are using
hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});
Set the default style for "display" to "none". using show() will change this style value.
Also Found that the slides flash before loading and display stacked down the page with list item bullets.
Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.
Remember to Include the CSS!
… i had the same problem, tried the js solution above - it worked well but then i realized when js is disabled for some reason - that nothing will be shown up, so i decided to look for a non js solution:
i just put some thing like that for the specific slider:
.MySlider {
.flexslider .slides img {
max-height: 400px;
width: 940px;
}
}
worked well, even responsive. Hope that may help!
I experienced a similar issue when I forgot to include the flexslider.css
I just set in the CSS of the div that contains the slider: overflow:hidden ; height: the height of the images you use, then it works perfect!
update: this is not a responsive solution as the slider changes the size... what can I do??
Related
So, I'm using the fullPage.js to create a one page style site. I decided I wanted to add some animations, however not having any knowledge of jQuery, I decided to opt for animate.css and WOW.js to go with it.
As I understand, however, fullPage.js removes the scrollbar and so WOW.js can't see when I've scrolled past a point. so I used
scrollBar: true
and
body,html{
overflow: hidden !important;
}
to remove the scrollbar. This method works, however for some reason the animation when I'm scrolling to the first section (top of the page) is gone. I still get the animation when scrolling down. How can I fix this? (GIF: http://i.imgur.com/pom46OF.gifv)
EDIT: here's the site by the way - https://farooq.gq/portfolio/#top
The anchor option seems to mess with animations, remove it. And also make sure you initialize wow on section or slide leave:
JS:
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
'navigationPosition': 'right',
navigationTooltips: ['Top', 'Who Am I?'],
scrollBar: true,
onLeave: function(){
new WOW().init();
}
});
});
Codepen: http://codepen.io/leonlaci/pen/WxoNqN
DEMO
Steps : click 1-3 again and again and then click on active thumnail twice then next thumnail click wont work.
I have implemented Flexi Slider with Thumbnails, Its working fine, but sometimes The Thumbnails are not clickable. Not sure where Iam going Wrong.
/* New Slider */
$('.sliderNew #carousel').flexslider({
animation : "slide",
controlNav : true,
animationLoop : true,
slideshow : true,
itemWidth : 140,
itemMargin : 5,
minItems : 1,
asNavFor : '.sliderNew #slider',
reverse : false
});
$('.sliderNew #slider').flexslider({
animation : "slide",
controlNav : false,
animationLoop : true,
slideshow : true,
reverse : false,
sync : ".sliderNew #carousel",
start: function( slider ) {
$('.sliderNew #carousel .slides li').on('click',function(event){
//alert('asd')
$('.sliderNew #slider').flexslider("play");
});
}
});
/* New Slider */
Appreciate your help..
Thanks..
I've done some digging and found that this is probably due to a bug in the FlexSlider version you're using (version 2.1). In the Github updates (unfortunately they only go back to version 2.2) I did read something about "click handler updates", so I guess you've been so unfortunate to stumble upon an old bug. I've tracked it back to this update on GitHub, but that's more or less a guess.
On the bright side, they've fixed the bug. I've updated the JSFiddle to use the new version of FlexSlider:
http://jsfiddle.net/ennesht2/
You probably also want to check what you're doing with your CSS/positioning, because the demo looks like it's falling apart in Safari/Chrome (OSX). I've done one quick fix in your CSS to make the navigation element appear in this new version (uncommented the height:0), but you'll also want to update your CSS to use FlexSlider's version 2.3 one.
.sliderNew #carousel .flex-viewport {
border :none;
//height:0;
display:inline-block;
width:100%;
}
Firstly, since you are already using IDs to grab your DOM elements, you can simply use $('#slider') instead of $('.sliderNew #slider'). The same logic goes for the carousel element :)
I think you may wish to set the click handler on the img element, rather than its parent (the li element). So perhaps:
start: function( slider ) {
$('#carousel .slides li img').on('click',function(event){
$('#slider').flexslider("play");
});
}
I have a hunch on this one, I think that whenever your slide is running, it's coming over your thumbs, this happened once in a project I participated in.
The following is not a good practice of z-index but it should help you find out if this is the problem.
Add the following to your css to test the theory:
#carousel .slides li{
z-index:9999;
}
I cannot successfully recreate this error in a fiddle. Here's a link to the site (which will never come down).
When you arrive at the site, you'll see a news ticker at the bottom of the site. As you scroll down, you'll notice as you pass 1. Main Slider, 2. Announcement Slider, and 3. Images for Military, Nursing, and Georgia... the ticker gets tucked behind all of these.
How can I keep this on top?
I've already placed this script to be called after the DOM is loaded, and before the slider script is called...
$(function() {
$('div.latest-news').jNewsbar({
position: 'bottom',
effect: 'slideup',
height: 25,
animSpeed: 600,
puaseTime: 4000,
toggleItems: 5,
theme: 's-orange'
});
});
It's using jQuery 1.9.1 (CDN).
First, you can give the CSS Class jnewsbar the attribute z-index: 99
The reason that the other elements — which are OVER the newsbar — are over the newsbar is that they are all position: relative which makes them open for the z-index. And the newsbar is position: absolute — which is also subject to z-index
Due to the fact, that all of the other elements are coming in the DOM later, they are getting a higher "priority", than the newsbar.
So either you use z-index: 99 or you move the jnewsbar DIV down in your HTML.
I have created a slider using CSS3 to display my testimonials.. Now I need to add some animation to this slider using Jquery. But I dont have any idea how to use Jquery with this slider.. and what are the suitable plugin for this. So anybody can tell me How can I add an animation to this slider?
any ideas are greatly appreciated.
Thank you.
Here is a link to the slider code: jsfiddle.net/XJVYj/82
I think it will be very hard to find a Plugin that exactly matches your code. But I could code you the jQuery stuff for it. But then I would have two Questions.
How much of the CSS can I change? Or should it also still work without js activated?
Are you staying with a number of 3 items in the future? Or do you want to change the number of slides dynamically?
// EDIT
OK it works now. I know its not very elegant, but I dont wanted to change too much of your code. So I just had to edit two of your css selectors (I commented the old one out). You also wanna notice, that with this solution your old method still works when javascript is disabled.
The jQuery Code follows...
$("div.one").css({"left":0, "opacity":1});
$("div.two").css({"left":300, "opacity":1});
$("div.three").css({"left":600, "opacity":1});
$("input#first").click(function(){
$("div.one").animate({left:0},600);
$("div.two").animate({left:300},600);
$("div.three").animate({left:600},600);
});
$("input#second").click(function(){
$("div.one").animate({left:-300},600);
$("div.two").animate({left:0},600);
$("div.three").animate({left:300},600);
});
$("input#third").click(function(){
$("div.one").animate({left:-600},600);
$("div.two").animate({left:-300},600);
$("div.three").animate({left:0},600);
});
jsfiddle.net/mYhEV/2/
Hope it helps.
PS: For a cleaner solution you would have to rethink a bit. One method would be to put all the sliders in a wrapper and just moving this wrapper instead of moving.
Try Using these:
Flex Slider
Timelinr
SmartGallery
Skitter
There is documentation literally right in the script file which has options you can use:
$.tiny.carousel = {
options: {
start: 1, // where should the carousel start?
display: 1, // how many blocks do you want to move at 1 time?
axis: 'x', // vertical or horizontal scroller? ( x || y ).
controls: true, // show left and right navigation buttons.
pager: false, // is there a page number navigation present?
interval: false, // move to another block on intervals.
intervaltime: 3000, // interval time in milliseconds.
rewind: false, // If interval is true and rewind is true it will play in reverse if the last slide is reached.
animation: true, // false is instant, true is animate.
duration: 1000, // how fast must the animation move in ms?
callback: null // function that executes after every move.
}
};
Secifcally: animation: true, // false is instant, true is animate.
Try setting the animation to true when you call the slider on your element (you provided no script code so I can't edit it for you.)
$('YOUR_SLIDERr').tinycarousel({ animation: true });
I'm having trouble to integrate the Galleria image gallery plugin onto one of my Jquerytools tabs. When navigating directly to the page with Galleria (example: www.domain.com/index.php#tabnameofgalleriapane), there's no problem.
Whenever the pane with galleria is not loaded immediately (default pane is another pane), Gallery throws an error: Fatal error: Could not extract a stage height from the CSS. Traced height: 0px., which is logical, because when the Galleria pane is not active, it's css is probably display:none;...
Defining the height & width literally does not seem to work. This was the previous setup:
jQuery("#jp_nav").tabs(".jp_pane", { history: true } );
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
So I was thinking to bind the load of the Galleria plugin onload of the pane that contains the Galleria plugin, because in that moment, the Galleria pane does have a height... I've found something to help me on my way, but now I'm getting other JavaScript conflict errors (see below for explanation).
jQuery("#jp_nav").tabs(".jp_pane", {
initialIndex: 0,
onBeforeClick: function(event, i) {
// get the pane to be opened
var pane = this.getPanes().eq(i);
var src = this.getTabs().eq(i).attr("href");
pane.load(src, "#jp_images", function(){
jQuery('#gallery').galleria({
imageCrop: false,
transition: 'slide',
autoplay: 7000,
width: 960,
height: 640
});
});
},
history: true
});
For reasons beyond my control, the website I'm writing this for uses both jQuery and Prototype/Scriptaculous. So please take into account that the script has to be written in noConflict mode. (Which I'm doing in my setup $.noConflict();)
Can someone please tell me if the script below puts me on the right track?
Can someone help me modify the script to work when the #jp_images tab is loaded?
Right now, the above script gives me conflict errors with Prototype.
Anxiously awaiting your expert views!
Regards,
Maarten
I've managed to find a quick and dirty solution (thanks to vfxdude)
Anytime the tab with the Galleria is clicked, I force a page reload, like so:
tabName = 'jp_images';
jQuery('#jp_nav a[href="#'+tabName+'"]').click(function() { if (location.hash == '') location.replace(location.href+'/#'+tabName); });
After this, I can just use the regular old Galleria plugin initialisation.
Granted, it is a little dirty, but it's an easy and quick fix for when on a deadline.