Sorgalla Jcarousel Autoscroll Plugin Sorunu

21/Oca/14 19:57

Kısayol

Şikayet

Özel Mesaj

lepusmorris

Kayıt Tarihi: 31/Mart/2007

kullandığım bir tasarımda jcarousel olarak http://sorgalla.com/jcarousel/ adresindeki uygulama kullanılmış. gayet güzel çalışıyor ama otomatik geçiş olmasını istiyorum ve bir türlü yapamadım. ingilizce dökümanlara da baktım; fakat sike sürülür birşey bulamadım. Otomatik geçişle ilgili döküman http://sorgalla.com/jcarousel/docs/plugins/autoscroll/ adresinde mevcut ama bendeki

//Carousel Başlangıç

(function($){
   $(document).ready(function(){

// Add classes for other carousels
var $carousel = $('.latest-work-jc');

var scrollCount;

function adjustScrollCount() {
   if( $(window).width() < 768 ) {
       scrollCount = 1;
   } else {
       scrollCount = 1;
   }

}

function adjustCarouselHeight() {

   $carousel.each(function() {
       var $this    = $(this);
       var maxHeight = -1;
       $this.find('li').each(function() {
           maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
       });
       $this.height(maxHeight);
   });
}
function initCarousel() {
   adjustCarouselHeight();
   adjustScrollCount();
   var i = 0;
   var g = {};
   $carousel.each(function() {
       i++;

       var $this = $(this);
       g[i] = $this.jcarousel({
           animation           : 500,
           scroll              : scrollCount,
           wrap: 'circular'
       });
       $this.jcarousel('scroll', 0);
       $this.prev().find('.jcarousel-prev').bind('active.jcarouselcontrol', function() {
           $(this).addClass('active');
       }).bind('inactive.jcarouselcontrol', function() {
           $(this).removeClass('active');
       }).jcarouselControl({
           target: '-='+scrollCount,
           carousel: g[i]
       });

       $this.prev().find('.jcarousel-next').bind('active.jcarouselcontrol', function() {
           $(this).addClass('active');
       }).bind('inactive.jcarouselcontrol', function() {
           $(this).removeClass('active');
       }).jcarouselControl({
           target: '+='+scrollCount,
           carousel: g[i]
       });

       $this.touchwipe({
       wipeLeft: function() {
           $this.jcarousel('scroll','+='+scrollCount);
       },
       wipeRight: function() {
           $this.jcarousel('scroll','-='+scrollCount);
       }
   });

   });
}
$(window).load(function(){
   initCarousel();
});

$(window).resize(function () {
   $carousel.each(function() {
       var $this = $(this);
       $this.jcarousel('destroy');
   });
   initCarousel();
});

});

})(this.jQuery);

//SON

bu koda ekleyemedim. bu otomatik geçiş olayındaki kodu hangi satıra eklemem gerekiyor?

..

Alıntı yap

22/Oca/14 00:02

Kısayol

Şikayet

Özel Mesaj

lepusmorris

Kayıt Tarihi: 31/Mart/2007

up

..

Alıntı yap

22/Oca/14 18:23

Kısayol

Şikayet

Özel Mesaj

lepusmorris

Kayıt Tarihi: 31/Mart/2007

meseleyi çözdüm.

kütüphanesine autoscroll pluginini ekledim. yani;

jCarousel.plugin('autoscroll', function($) {
    return {
        options: {
            scroll: '+=1',
            interval: 3000,
            autostart: true
        },
        timer: null,
        _init: function() {
            if (this.option('autostart')) {
                this.start();
            }
        },
        _destroy: function() {
            this.stop();
        },
        start: function() {
            this.stop();

            this.carousel()._bind('animateend.' + this.pluginName, $.proxy(this.start, this));

            this.timer = setTimeout($.proxy(function() {
                this.carousel().scroll(this.option('scroll'));
            }, this), this.option('interval'));

            return this;
        },
        stop: function() {
            if (this.timer) {
                this.timer = clearTimeout(this.timer);
            }

            this.carousel()._unbind('animateend.' + this.pluginName);

            return this;
        }
    };
});

bu kodu. daha sonrada bunu bi fonksiyonla çağırdım. onu da;

$.easing['easeOutCirc'] = function (x, t, b, c, d) {
    return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
};

$(function() {

$('.latest-work-jc').jcarousel({
       animation: {duration:1200, easing: 'easeOutCirc'},
        wrap: 'circular'

    })

.jcarouselAutoscroll({
    autostart: true,
    interval: 6000,
    scroll: '+=3',
    create: $('.latest-work-jc').bind('mouseenter', function () {
                $(this).jcarouselAutoscroll('option', 'scroll', '+=0' );
            }).bind('mouseleave', function () {
                $(this).jcarouselAutoscroll('option', 'scroll', '+=3' );
            })

});


});

bu kodla yaptım. artık uyuyabilirim:D

..

Alıntı yap