Develop Reference

Disable mouseover until animation complete

I use jquery caroufredsel to create a slider, and then attach mouseover event to the items so that when mouse over the item it will center the selected one. here is the script
$(document).ready(function(){
$('#carousel-popular').carouFredSel({
width: '100%',
items: 5,
scroll: 1,
auto: false,
prev: '#prev-popular',
next: '#next-popular',
pagination: '#pager'
});
$('#carousel-popular img').off('mouseover').on('mouseover', function(){
var self = this;
$(this).attr('data-url', '<?php echo site_url('video/video_display'); ?>/'+$(this).data('vid'));
$('#carousel-popular').trigger('slideTo', [$(this), -2]);
$('#home-sidebar').load('<?php echo site_url('home/get_imdb');?>/'+$(this).data('vid'), function(){
$('#carousel-popular img').removeClass('selected');
$(self).addClass('selected');
});
// $('.caroufredsel_wrapper').css({
// "background" : "url(<?php echo base_url(); ?>images/shadow.png) center 95% no-repeat"
// });
});
$('#carousel-popular img').on('click', function(){
if($(this).hasClass('selected')){
window.location = $(this).data('url');
}
})
var sbHeight = $('body').height() - $('#header').height();
$('#home-sidebar').css({
"height": sbHeight+'px'
});
setTimeout(function(){
$('#carousel-popular img').eq(0).trigger('mouseover');
}, 500);
});
The problem is when an item is sliding to center another images catch the mouseover because the mouse pointer is still on the track. How to disable this mouseover event untill the selected image is centered?
fiddle

I'm not entirely sure of the issue, but you could try this:
$('#carousel a').on('mouseenter', function(){
$('#carousel').trigger('slideTo', [$(this), -2]);
});
That triggers the animation when the mouse moves over the element

pretty unclear question to me, is this what you want: http://jsfiddle.net/8W25g/2/
$('#carousel').carouFredSel({
items: 4,
scroll: 1,
auto: false,
prev: '#prev-popular',
next: '#next-popular',
pagination: '#pager'
});
var mouseoverFunc=function(){
$('#carousel a').unbind('mouseover');
$('#carousel').trigger('slideTo', [$(this), -2]);
};
var mouseoutFunc=function(){
setTimeout(function(){
$('#carousel a').bind('mouseover',mouseoverFunc);
},400);
};
$('#carousel a').bind('mouseover', mouseoverFunc);
$('#carousel a').bind('mouseout', mouseoutFunc);

Reinit flexslider 2 at breakpoint

I want to remove an element form Flexslider 2 when screen.width > 960 and then add it back in screen.width < 960.
Is there a way to reinit Flexslider? And if not what are my options?
Here is the js setup I am using:
$(window).load(function() {
// Load functions here.
$('#contentSlider').flexslider({
animation: "slide",
animationSpeed: 500,
direction: "vertical",
controlNav: true,
controlsContainer: "#controls",
directionNav: false,
animationLoop: false,
slideshow: false,
sync: "#bgslide",
start: function(slider){
$('body').removeClass('loading');
},
after: function(slider){
if (slider.currentSlide == 0) {
$('.info-link, .signup-link').removeClass('is-active');
$('.welcome-link').addClass('is-active');
}
if (slider.currentSlide == 1) {
$('.welcome-link, .signup-link').removeClass('is-active');
$('.info-link').addClass('is-active');
}
else if (slider.currentSlide == 2) {
$('.welcome-link, .info-link').removeClass('is-active');
$('.signup-link').addClass('is-active');
}
}
});
$('#bgslide').flexslider({
animation: "fade",
animationSpeed: 1000,
controlNav: false,
directionNav: false,
animationLoop: false,
slideshow: false
});
});
I am also using http://wicky.nillia.ms/enquire.js/ which I want to use to reinit/destroy and build the sliders to switch between 2 and three slides.
enquire.register("screen and (min-width: 720px)", {
match : function() {
$('body').removeClass('mobile');
$('body').addClass('desktop');
// remove Item three Here
},
unmatch : function() {
$('body').removeClass('desktop');
$('body').addClass('mobile');
// If item 3 does not exist Add item 3 back in.
}
});
My HTML(using slim) setup is as follows:
#main role="main"
#controls
#contentSlider.flexslider
ul.slides
li.item1
li.item2
li.item3
#bgslide.backgrounds
.gradient
ul.slides
li.item1-bg
li.item2-bg
li.item3-bg
Hopefully that will make things a bit clearer as to what I am trying to achieve.

Make jCarousel slider slide continously

I have a jCarousel, with autoscrolling, like: http://sorgalla.com/projects/jcarousel/examples/static_auto.html
Is it possible to make it slide continously, smoothly? instead of scrolling few items at a time?
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({ auto: 1, wrap: 'circular', animation: 'fast', scroll: 1, initCallback: mycarousel_initCallback });
});
</script>
<ul id="mycarousel" class="jcarousel-skin-tango">
<!-- My slides here -->
</ul>
Also, can I do something to keep the autoscroll after I click on the navigation arrows, and the mouse is not hover the slider?
I haven't found nothing related in their documentation: http://sorgalla.com/projects/jcarousel/

Delete that line so your hover mouse will not stop animation:
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
and try delete this:
carousel.buttonNext.bind('click', function() { carousel.startAuto(0); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(0); });
it may help you to get not starting all the time from (0) element. but first please check it.
so as you see you can delete whole function callback.

I have found what I was looking for. So my code look like:
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
carousel.buttonNext.bind('click', function() { carousel.startAuto(); });
carousel.buttonPrev.bind('click', function() { carousel.startAuto(); });
carousel.clip.hover(function() { carousel.stopAuto(); }, function() { carousel.startAuto(); }); };
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({ auto: .01, wrap: 'circular', animation: 2000, scroll: 1, easing: 'linear', initCallback: mycarousel_initCallback });
});
</script>
It looks like these two settings combined "animation: 2000, easing: 'linear'" , are doing what I needed.

Fancy box transition effect broken

The transition effect in the code below is broken, instead of fading in, the fancybox just jumps up from the top of the window down in the middle.
How can I make this work correctly?
window.onload = function() {
$(function(){
function showfb(id) {
if (/^#.*/.test(id)) {
$(id).show();
$.fancybox({
href: id,
type:'inline',
'transitionIn': 'fade', // elastic, none, ease, fade
'transitionOut': 'fade',
onClosed: function() {
$(id).hide();
}
});
}
}
showfb(location.hash);
$('a.profile').click(function(e){
showfb($(this).attr('href'));
});
});
};

How to show the next slide when you click on the image in flexslider

I'm using the flexslider plugin and i wanted to know if there is an easy way (apart from changing the core of the plugin which is what i am going to do if i don't find an easy answer)
to show the next slide when you click on the current slide. I set up the flexslider like this
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
I disabled the Prev/Next command because i didn't like them. What should i do?

Maybe a little bit too late, but here's the solution for Flexslider 2:
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.slides li img').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});

I had a Safari problem with the code above. This is my easy solution.
jQuery( document ).ready( function( $ ) {
$('.flexslider').on('click', function(){
$(this).find('.flex-next').click();
});
}
$(window).load(function() {
// Slider
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
});

Here's a small update to the accepted answer above that targets the specific slider clicked, rather than all the sliders on the page:
$('.flexslider').flexslider({
start: function(slider) {
$('.slides li img', slider).click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});

After each slider animation completes, find the active slide and change the image src
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
touch: true,
itemWidth: 235,
itemMargin: 10,
after: function (slider) {
$(slider).find('.flex-active-slide').find("img").each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src");
});
});