jsor / jcarousel

Riding carousels with jQuery.
https://sorgalla.com/jcarousel/
MIT License
1.99k stars 734 forks source link

Autoscroll helppppp #761

Closed shenzhenboy closed 9 years ago

shenzhenboy commented 9 years ago

How do i edit this command to make my slider autoscroll and stop once mouse cursor hove over?

Thanks.

jQuery(document).ready(function($) { var start_mobile_size = 960;

if($('body').hasClass('isphone')) { var isphone = true; }

if ( $.isFunction($.fn.jcarousel) ) {
    var jcarousel = $('.slider');

    jcarousel.on('jcarousel:reload jcarousel:create', function () {
        var jcarouselwidth = jcarousel.innerWidth();

        if (jcarouselwidth >= 1200) {
            jcarouselwidth = jcarouselwidth / 6;
        } else if (jcarouselwidth >= 800) {
            jcarouselwidth = jcarouselwidth / 5;
        } else if (jcarouselwidth >= 700) {
            jcarouselwidth = jcarouselwidth / 4;
        } else if (jcarouselwidth >= 500) {
            jcarouselwidth = jcarouselwidth / 3;
        } else if (jcarouselwidth >= 350) {
            jcarouselwidth = jcarouselwidth / 2;
        }

        jcarousel.jcarousel('items').css('width', jcarouselwidth + 'px');
    })
    .jcarousel({
        wrap: ''
    });
    $('.slider-control-prev').jcarouselControl({ target: '-=1' });
    $('.slider-control-next').jcarouselControl({ target: '+=1' });
    $('.header-slider-pagination').on('jcarouselpagination:active', 'a', function() {
        $(this).addClass('active');
    }).on('jcarouselpagination:inactive', 'a', function() {
        $(this).removeClass('active');
    }).on('click', function(e) {
        e.preventDefault();
    }).jcarouselPagination({
        perPage: 1,
        item: function(page) {
            return '<a href="#' + page + '">' + page + '</a>';
        }
    });
}//if function jcarousel

$('.headerlang').change(function() {
    var lang = $(this).val();
    $.cookie('sitelang', lang, { expires: 60, path: '/' });
    location.reload();
});

$('.country-list li .iconcountries').click(function(){
    if($(this).hasClass('icon-down-dir')) {
        $(this).parent().find("ul").slideDown('fast');
        $(this).removeClass("icon-down-dir").addClass("icon-up-dir");
    } else {
        $(this).parent().find("ul").slideUp('fast');
        $(this).removeClass("icon-up-dir").addClass("icon-down-dir");
    }
});

select_payment_gateway();
$('input[name=paymentgateway]').change(function() {
    select_payment_gateway();
});
function select_payment_gateway() {
    var id = $('input[name=paymentgateway]:checked').attr('id');
    $('input[name=paymentgateway]').parent().removeClass("selected");
    $('#'+id).parent().addClass("selected");
    $('.gateway_options').hide();
    $('.'+id+'_options').show();
    if(id == 'other') {
        $('.paymentplanmanualoptions').show();
    } else {
        $('.paymentplanmanualoptions').hide();
    }
    if(id == 'none') {
        $('.allpaymentoption').hide();
    } else {
        $('.allpaymentoption').show();
    }
}

hide_vip_payment_options();
$('#paymentvipunlock').change(function() {
    hide_vip_payment_options();
});
function hide_vip_payment_options() {
    var id = $('#paymentvipunlock').val();
    if(id == "yes") {
        $('.paymentvipoptions').fadeOut();
    } else {
        $('.paymentvipoptions').fadeIn();
    }
}

var settings = {};
//clone content and place in the div that are only seen on a mobile device
$('.countries').clone().prependTo(".left-mobile-sidebar");
$('.header-menu').clone().appendTo( ".left-mobile-sidebar" );

//place current country and city in the mobile country dropdown button
var selected_country = $('.current_page_item_country .sidebar-country-link').html();
var selected_city = $('.current_page_item_city a').html();
if(selected_country) {
    $('.left-mobile-sidebar .selected-location span').html('').append(selected_country);
}
if(selected_city) {
    $('.left-mobile-sidebar .selected-location span').append('<span class="icon icon-angle-right"></span>'+selected_city);
}

//place the first dropdown menu name in the mobile menu
var t = $('.sidebar-right .dropdownlinks-dropdown h4').first().text();
if(t) {
    $('.show-right-mobile-sidebar .label-for-icon').html(t);
}

//add an arrow next to links that have sublinks
$('.left-mobile-sidebar li').each(function() {
    if ( $(this).children('ul').size() > 0 ) {
        $(this).find('a:first').append('<span class="icon-angle-right"></span>');
        $(this).find('ul li a').prepend('- ')
    }
});
$('.left-mobile-sidebar .current_page_item_city').parent('ul').show();

$('.right-mobile-sidebar .sidebar-right').css('width', '');

function prepare_responsive() {
    var headerwidth = $(window).width();
    if(isphone || headerwidth <= start_mobile_size) {
        window.isMobile = true;
    } else {
        window.isMobile = false;
    }

    if(!settings.added_classes && (isphone || headerwidth <= start_mobile_size)) {
        $('header .topnav').addClass('mobile-topnav').removeClass('topnav'); //preparing the header navigation for mobile view
        $('.mobile-topnav').css('padding-top', $('.mobile-menu').height());
        $('.mobile-menu').slideDown();
        $('.social').clone().prependTo(".left-mobile-sidebar");
        $('.move-to-mobile-sidebar').clone().prependTo(".right-mobile-sidebar");
        $('.right-mobile-sidebar .move-to-mobile-sidebar').addClass('sidebar-right');
        settings.added_classes = "1";
    } else if(settings.added_classes && headerwidth > start_mobile_size) {
        $('header nav').addClass('topnav').removeClass('mobile-topnav').css('padding', '');
        settings.added_classes = '';
        $('.mobile-menu').hide('fast');
    }

    //hide top mobile menu on scroll down and show on scroll up
    if((isphone || headerwidth <= start_mobile_size) && !settings.right_panel_active && !settings.left_panel_active) {
        $('.mobile-menu').scrollupbar();
    }//if headerwidth <= 960

    if(settings.left_panel_active == 1 || settings.right_panel_active == 1) {
        $('body').css({"width":$(window).width()});
    }

    if(isphone || headerwidth <= start_mobile_size) {
        //auto stretch social and subnav li elements to fit the screen
        $('header .subnav li').css('width', (headerwidth / $('header .subnav-menu li').length)+'px');
        $('.left-mobile-sidebar .social li').css('width', ($('.left-mobile-sidebar').width() / $('header .social li').length)+'px');
    } else {
        $('header .subnav li').css('width', '');
        $('header .social li').css('width', '');
    }

    if(isphone || headerwidth <= start_mobile_size) {
        //responsive images in profile page
        //only show the images if they are in viewport
        if($('.bigimage').length && $('.lockedsection').length) {
            $('.bigimage').addClass('col100').show();
        }
        function show_profile_images() {
            if($('.mobile-ready-img').length) {
                $('.mobile-ready-img').each(function() {
                    if(isElementInViewport($(this)) && (!$(this).attr('src') || $(this).attr('src') != $(this).data('responsive-img-url'))) {
                        $(this).css('opacity', '0').attr('src', $(this).data('responsive-img-url')).fadeTo('slow', 1);
                    }
                });
            }
        }
        show_profile_images();
        $(window).scroll(function(event){
            if(isphone || headerwidth <= start_mobile_size) {
                show_profile_images();
            }
        });

        $('a[rel=profile-photo]').click(function(event) {
            event.preventDefault();
        });
        var mobile_text = $('.profile-page-no-photos .for-browsers').data('mobile-text');
        var original_text = $('.profile-page-no-photos .for-browsers').data('original-text', $('.profile-page-no-photos .for-browsers').html()).find('p').text(mobile_text);
    } else {
        if($('.bigimage').length && $('.lockedsection').length) {
            $('.bigimage').removeClass('col100').show();
        }
        if($('.mobile-ready-img').length) {
            $('.mobile-ready-img').each(function() {
                if($(this).attr('src') != $(this).data('original-url')) {
                    $(this).attr('src', $(this).data('original-url'));
                }
            });
        };
        $('.profile-page-no-photos .for-browsers').html($('.profile-page-no-photos .for-browsers').data('original-text'));

        //only show pop-up images on click on a big browser
        if ($.isFunction($.fn.fancybox)) {
            $("a[rel=profile-photo]").fancybox({
                beforeShow : function() { this.title = '' + (this.index + 1) + ' / ' + this.group.length + (this.title ? ' - ' + this.title : ''); }
            });
        }
    }//responsive images in profile page

    if(isphone || headerwidth <= start_mobile_size) {
        //add touch capabilities to the header slider
        $(".sliderall").on( "swipeleft", function(event) {
            $('.slider-control-next').click();
        });
        $(".sliderall").on( "swiperight", function(event) {
            $('.slider-control-prev').click();
        });

        //create navigation for front-page slider for premium and normal profiles
        //count the number of profiles and add the same number of link in the pagination div
        $('.mobile-profiles-slider .slider-pagination').each(function(index, el) {
            if(!$(this).html()) {
                var profiles = $(this).siblings('.girl').length;
                if(profiles > 1) {
                    for (var i = 1; i <= profiles; i++) {
                        $(this).append('<a href="#'+i+'">'+i+'</a>');
                    }
                    $(this).find('a:first').addClass('active');
                }
            }
        });

        //switch images on pagination click
        $('.mobile-profiles-slider .slider-pagination a').click(function(event) {
            event.preventDefault();
            $(this).parent().find('a.active').removeClass('active');
            $(this).addClass('active');
            $(this).parents('.mobile-profiles-slider').find('.girl').hide();
            $(this).parents('.mobile-profiles-slider').find('.girl:eq('+(event.target.text - 1)+')').show();
        });

        //front-page hide all profiles except the first one in the list
        $('.mobile-profiles-slider').each(function(index, el) {
            $(this).find('.girl:visible').slice(1).hide();
        });
        //front-page hide all reviews except the first one
        if($('.onereviewtext-homepage')) {
            $('.onereviewtext-homepage:visible').slice(1).hide();
        }

        //swipeleft on frontpage body profiles list
        $('.mobile-profiles-slider').on( "swipeleft", function(event) {
            if(!$(this).find('.girl:last').is(':visible')){
                $(this).find('.girl:visible:first').hide().nextAll('.girl:hidden:first').show();
                $(this).find('.slider-pagination .active').removeClass('active').next('a').addClass('active');
            } else {
                var div = $(this).find('.girl:visible:first');
                var divwidth = $(this).find('.girl:visible:first').width();
                $(div).find('.thumb').animate({
                    width: (divwidth - (divwidth*0.2)), //we shrink the div by 20% to show the visitor that he's at the last image
                    },
                    100, function() {
                    $(this).animate({width: '100%'}, 100);
                });
            }
        }); //swipe right to left

        //swiperight on frontpage body profiles list
        $('.mobile-profiles-slider').on( "swiperight", function(event) {
            if(!$(this).find('.girl:first').is(':visible')){
                $(this).find('.girl:visible:first').hide().prevAll('.girl:hidden:first').show();
                $(this).find('.slider-pagination .active').removeClass('active').prev('a').addClass('active');
            } else {
                var div = $(this).find('.girl:visible:first');
                var divwidth = $(this).find('.girl:visible:first').width();
                $(div).find('.thumb').css('float', 'right').animate({
                        width: (divwidth - (divwidth*0.2)),//we shrink the div by 20% to show the visitor that he's at the first image
                    },
                    100, function() {
                        $(this).animate({width: '100%'}, 100, function(){
                            $(this).css('float', 'left');
                        });
                    });
            }
        }); //swipe left to right
    } else {
        $('.mobile-profiles-slider .girl').show();
    }

    if(!isphone || headerwidth > start_mobile_size) {
        if(settings.left_panel_active == 1) {
            mobile_sidebar('left','hide');
        }
        if(settings.right_panel_active == 1) {
            mobile_sidebar('right','hide');
        }
    }
}//function prepare_responsive()

var headerwidth = $(window).width();
prepare_responsive();
$(window).resize(function(){
    prepare_responsive();
});

//show the sidebar for mobile when clicking the icon in the top menu
$('.show-left-mobile-sidebar').click(function() {
    mobile_sidebar('left','show');
});
$('.show-right-mobile-sidebar').click(function() {
    mobile_sidebar('right','show');
});

//hide the sidebars for mobile when clicking outside the sidebar
$('.mobile-sidebar-content-overlay').click(function() {
    if(settings.left_panel_active == 1) {
        mobile_sidebar('left','hide');
    }
    if(settings.right_panel_active == 1) {
        mobile_sidebar('right','hide');
    }
});

//hide child menus in left mobile sidebar
$('.left-mobile-sidebar li a').click(function(click) {
    if ( $(this).parent().children('ul').size() > 0 && $(this).parent().children('ul').is(':hidden') ) {
        $('.left-mobile-sidebar li ul').slideUp();
        $(this).parent().children('ul').slideDown();
        click.preventDefault();
    }
})

//hide/show country list when clicking the country dropdown
$('.left-mobile-sidebar .countries .selected-location').click(function() {
    $('.left-mobile-sidebar .countries .country-list').slideToggle('slow');
});

$(".sidebar-right .dropdownlinks-dropdown h4").click(function(){
    $(this).parent().find('ul').stop().slideToggle('fast');
});

function mobile_sidebar(sidebar, state) {
    if(sidebar == 'right'){
        var sidebarclass = '.right-mobile-sidebar';
    } else {
        var sidebarclass = '.left-mobile-sidebar';
    }
    if(state == 'show'){
        var sidebarwidth = $(sidebarclass).width();
        $('.mobile-menu').slideUp('fast');
        if(sidebar == 'right'){
            var bodyanimate = { 'right': sidebarwidth };
        } else {
            var bodyanimate = { 'left': sidebarwidth };
        }
        $('body').css({"width":($(window).width() - 20),"position":"absolute", "overflow-x":"hidden"}).animate(bodyanimate, 400);
        $('.mobile-sidebar-content-overlay').css({ opacity: 0 }).show().fadeTo('slow', 0.7);

        $(sidebarclass).show().css(sidebar, "-"+sidebarwidth+"px");
        if(sidebar == 'right'){
            var sidebaranimate = { 'right': "0" };
            $(sidebarclass).find('.dropdownlinks-dropdown ul').first().show('slow');
        } else {
            var sidebaranimate = { 'left': "0" };
        }
        $(sidebarclass).css(sidebar, "-"+sidebarwidth+"px").animate(sidebaranimate, 400, function() {
            if(sidebar == 'right'){
                settings.right_panel_active = 1;
            } else{
                settings.left_panel_active = 1;
            }
        });
    } else {
        if(sidebar == 'right'){
            var bodyanimate = { 'right': "0" };
        } else {
            var bodyanimate = { 'left': "0" };
        }
        $('body').animate(bodyanimate, 400, function(){
            $('body').css({"width":"","position":"inherit", "overflow-x":"", "left":"", "right": ""});
        });

        $('.mobile-sidebar-content-overlay').hide();
        $('.mobile-menu').slideDown('fast');

        var sidebarwidth = $(sidebarclass).width();
        if(sidebar == 'right'){
            var sidebaranimate = { 'right': "-"+sidebarwidth };
        } else {
            var sidebaranimate = { 'left': "-"+sidebarwidth };
        }
        $(sidebarclass).animate(sidebaranimate, 400, function() {
            $(sidebarclass+' li ul').hide();//hide all opened submenus
            $(sidebarclass+' .country-list').hide(); //hide country list dropdown
            $(sidebarclass).hide(); 
        });
        settings.right_panel_active = '';
        settings.left_panel_active = '';
    }
}

//right-sidebar js START
//escort js
$(".sidebar-right .buyfeatured").click(function(){
    $('.buyfeatured_details').slideDown("fast");
});
$(".buyfeatured_details .closebtn_box").click(function(){
    $('.buyfeatured_details').slideUp("fast");
});

$(".sidebar-right .buypremium").click(function(){
    $('.buypremium_details').slideDown("fast");
});
$(".buypremium_details .closebtn_box").click(function(){
    $('.buypremium_details').slideUp("fast");
});

//admin menu js
$(".manuallyactivatetour").click(function(){
    $('.manuallyactivatetour_div').slideDown('fast');
    $('.manuallyactivatevip_div').slideUp('fast');
});
$(".manuallyactivatevip").click(function(){
    $('.manuallyactivatevip_div').slideDown('fast');
    $('.manuallyactivatetour_div').slideUp('fast');
});

//escort menu shown to admin
$('.upgradebutton').click(function(){
    $('.upgradebuttons').slideDown();
    $('.upgradeescortbox').slideUp();
    $(this).parent().siblings('.upgradeescortbox').slideDown('fast');
    $(this).parent().slideUp('fast');
});
$('.upgradeescortbox .closebtn_box').click(function(){
    if($(this).parent().siblings('.upgradebuttons')) {
        $(this).parent().siblings('.upgradebuttons').slideDown('fast');
    }
    $(this).parent().slideUp('fast');
});

//agency js
$('.addescort').click(function(){
    $('.addnewescortform').slideToggle("slow");
    $('.addescort span').toggle();
});
$('.agencyeditbuttons a').click(function(){
    var className = $(this).attr("class");
    if(settings.added_classes == '1'){
        mobile_sidebar('right','hide');
        $('html, body').animate({ scrollTop: ($('.agency_options_'+className).parent().offset().top - $('.mobile-menu').height() - 5) }, 'fast');
    }
    $('.agency_options_dropdowns').slideUp();
    $('.agency_options_'+className).slideDown();
    $('.girlsingle').slideUp();
});
$('.agency_options_dropdowns .closebtn').click(function(){
    $(this).parent().slideUp();
    $('.girlsingle').slideDown();
});
//right-sidebar js END

//animate loader div
loader=function(l, nohtml){
    if(!nohtml) {
        $(l).html('<div class="loader rad3"><span class="rad3"></span></div>');
    }
    if($(l).find('.loader').is(':visible')){
        $(l).find('.loader span').css('left', '-100%').animate({ 'left': '100%'}, 2000, function(){
            loader(l, "no");
        });
    }
}

function isElementInViewport(el) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(el).offset().top;
    var elemBottom = elemTop + $(el).height();
    //return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    return ((elemTop >= docViewTop) && (elemTop <= docViewBottom) || (elemBottom >= docViewTop) && (elemBottom <= docViewBottom));
}

});

function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0; i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } } }

jsor commented 9 years ago

I don't see any initialization of the autoscroll plugin in your code. And please, can you extract the releveant parts into a working jsfiddle.

shenzhenboy commented 9 years ago

Sorry.

       .jcarousel({wrap:"circular", animation: {'easing': 'linear', 'duration': 3000}  })
           .jcarouselAutoscroll({'autostart': true, 'interval': 0});

How do i make my autoscroll stop and start when mouse cursor is on and off?

jsor commented 9 years ago

Just use something like

jcarousel.hover(
    function() {
        jcarousel.jcarouselAutoscroll('stop');
    },
    function() {
        jcarousel.jcarouselAutoscroll('start');
    },
);
shenzhenboy commented 9 years ago

where should i input the command?

jQuery(document).ready(function($) { var start_mobile_size = 960;

if($('body').hasClass('isphone')) { var isphone = true; }

if ( $.isFunction($.fn.jcarousel) ) {
    var jcarousel = $('.slider');

    jcarousel.on('jcarousel:reload jcarousel:create', function () {
        var jcarouselwidth = jcarousel.innerWidth();

        if (jcarouselwidth >= 1200) {
            jcarouselwidth = jcarouselwidth / 6;
        } else if (jcarouselwidth >= 800) {
            jcarouselwidth = jcarouselwidth / 5;
        } else if (jcarouselwidth >= 700) {
            jcarouselwidth = jcarouselwidth / 4;
        } else if (jcarouselwidth >= 500) {
            jcarouselwidth = jcarouselwidth / 3;
        } else if (jcarouselwidth >= 350) {
            jcarouselwidth = jcarouselwidth / 2;
        }

        jcarousel.jcarousel('items').css('width', jcarouselwidth + 'px');
    })
       .jcarousel({wrap:"circular", animation: {'easing': 'linear', 'duration': 3000}  })
           .jcarouselAutoscroll({'autostart': true, 'interval': 0});
}//if function jcarousel
jsor commented 9 years ago

Put it somewhere after

var jcarousel = $('.slider');