Uncaught TypeError using hammer.js


Joined
Mar 25, 2021
Messages
9
Reaction score
0
Hey, I am working on an old site that was using hammer.js v1.0.5 (https://hammerjs.github.io/) and jQuery 1.8.3. I am currently trying to upgrade hammer to the newest version (v2.0.8 > https://hammerjs.github.io/dist/hammer.min.js) and jQuery 1.12.4 w/ Migrate and am getting an Uncaught TypeError that I am having a tough time sorting out.

Code:
Uncaught TypeError: gallery.hammer is not a function
    initCarousel http://dev.test:8888/wp-content/themes/mytheme/assets/scripts/main.src.js:272
    jQuery 2
    initCarousel http://dev.test:8888/wp-content/themes/mytheme/assets/scripts/main.src.js:130
    <anonymous> http://dev.test:8888/wp-content/themes/mytheme/assets/scripts/main.src.js:15
    jQuery 8
main.src.js:272:11
    initCarousel http://dev.test:8888/wp-content/themes/mytheme/assets/scripts/main.src.js:272
    jQuery 2
    initCarousel http://dev.test:8888/wp-content/themes/mytheme/assets/scripts/main.src.js:130
    <anonymous> http://dev.test:8888/wp-content/themes/mytheme/assets/scripts/main.src.js:15
    jQuery 8

Line 15

JavaScript:
jQuery(function(){
    initCarousel();
});

Line 130

JavaScript:
jQuery('.cycle-gallery').each(function(){

Line 272

JavaScript:
gallery.hammer({

The entire function (gallery.hammer towards the bottom)

JavaScript:
function initCarousel() {
    var page = jQuery('body');
    var win = jQuery(window);
    jQuery('.cycle-gallery').each(function(){
        var gallery = jQuery(this);
        var slideShowAPI = gallery.find('.slideshow').data('FadeGallery');
        var mask = gallery.find('.gallery-holder .mask');
        var slides = gallery.find('.gallery-holder .slide');
        var slidesLen = slides.length;
        var activeClass = 'active';
        var index = 0;
        var animSpeed = 500;
        var autoRotation = page.hasClass('inner') ? false : true;
        var switchTime = 10000;
        var btnPrev = gallery.find('.btn-prev2');
        var btnNext = gallery.find('.btn-next2');
        var nextSlide, prevSlide, currSlide, animation, timer;
       
        function getProportion(data) {
            // calculate element coords to fit in mask
            var ratio = data.ratio || (data.elementWidth / data.elementHeight);
            var slideWidth = data.maskWidth, slideHeight = slideWidth / ratio;
            if(slideHeight < data.maskHeight) {
                slideHeight = data.maskHeight;
                slideWidth = slideHeight * ratio;
            }
            return {
                width: slideWidth,
                height: slideHeight,
                right: gallery.width() > mask.width() ? 0 : 'auto',
                top: (data.maskHeight - slideHeight) / 2,
                left: gallery.width() > mask.width() ? 'auto' : (data.maskWidth - slideWidth) / 2
            }
        }
        function refreshClasses(){
            slides.removeClass(activeClass);
            currSlide = slides.eq(index);
            nextSlide = slides.eq(index+1);
            if(!nextSlide.length) nextSlide = slides.eq(0);
            prevSlide = slides.eq(index-1);
            if(!prevSlide.length) prevSlide = slides.eq(slidesLen - 1);
            currSlide.addClass(activeClass);
            slides.each(function(){
                jQuery(this).unbind('click').click(function(){
                    if(!jQuery(this).hasClass(activeClass) && !animation) btnNext.trigger('click')
                });
            });
            if(slideShowAPI) slideShowAPI.numSlide(index);
        }
        function refreshSlides(){
            slides.css({ width: mask.width(), left: mask.width() });
            slides.eq(index).css({
                width: gallery.width() > mask.width() ? gallery.width() - mask.width() : mask.width(),
                left: - (gallery.width() - mask.width())
            });
            prevSlide.css({
                width: gallery.width() > mask.width() ? gallery.width() - mask.width() : mask.width(),
                left: - (gallery.width() > mask.width() ? (gallery.width() - mask.width())*2 : mask.width())
            });
            nextSlide.css({
                width: mask.width(),
                left: gallery.width() > mask.width() ? 0 : mask.width()
            });
            if(autoRotation){
                clearTimeout(timer);
                timer = setTimeout(function(){
                    if(!animation) btnNext.trigger('click')
                }, switchTime);
            }
        }
        btnPrev.click(function(e){
            e.preventDefault();
            if(!animation){
                index--;
                if(index < 0) index = slidesLen - 1;
                currSlide.stop().animate({
                    width: mask.width(),
                    left: gallery.width() > mask.width() ? 0 : mask.width()
                },{ duration: animSpeed });
                nextSlide.stop().animate({
                    width: mask.width(),
                    left: mask.width()
                },{ duration: animSpeed });
                prevSlide.stop().animate({
                    width: gallery.width() > mask.width() ? gallery.width() - mask.width() : mask.width(),
                    left: - (gallery.width() > mask.width() ? gallery.width() - mask.width() : 0)
                },{ duration: animSpeed });
                setTimeout(function(){
                    animation = false;
                    refreshClasses();
                    refreshSlides();
                }, animSpeed);
            }
        });
        btnNext.click(function(e){
            e.preventDefault();
            if(!animation){
                index++;
                if(index > slidesLen - 1) index = 0;
                refreshClasses();
                slides.eq(index).stop().animate({
                    width: gallery.width() > mask.width() ? gallery.width() - mask.width() : mask.width(),
                    left: - (gallery.width() > mask.width() ? gallery.width() - mask.width() : 0)
                },{ duration: animSpeed });
                nextSlide.stop().animate({
                    width: mask.width(),
                    left: gallery.width() > mask.width() ? 0 : mask.width()
                },{ duration: animSpeed });
                prevSlide.stop().animate({
                    width: gallery.width() > mask.width() ? gallery.width() - mask.width() : mask.width(),
                    left: - (gallery.width() > mask.width() ? (gallery.width() - mask.width())*2 : mask.width())
                },{ duration: animSpeed });
                setTimeout(function(){
                    animation = false;
                    refreshSlides();
                }, animSpeed);
            }
        });
        refreshClasses();
        refreshSlides();
        win.bind('resize orientationchange', function(){
            refreshSlides();
        });
       
        slides.each(function() {
            var slide = jQuery(this);
            var image = slide.find('img');
            var iRatio = image.width() / image.height();

           
            function resizeImage() {
                if(iRatio) {
                    // calculate dimensions
                    var dimensions = getProportion({
                        ratio: iRatio,
                        maskWidth: gallery.width() > mask.width() ? gallery.width() - mask.width() : mask.width(),
                        maskHeight: slide.height()
                    });
                   
                    image.css(dimensions);
                }
            }
            win.bind('load resize orientationchange', resizeImage);
        });
       
        gallery.hammer({
            drag_block_horizontal: true,
            drag_min_distance: 1
        }).on('release dragleft dragright swipeleft swiperight', function(ev){
            switch(ev.type) {
                case 'dragright':
                case 'dragleft':
                    ev.gesture.preventDefault();
                    break;
                case 'swipeleft':
                    btnNext.trigger('click');
                    ev.gesture.stopDetect();
                    break;
                case 'swiperight':
                    btnPrev.trigger('click');
                    ev.gesture.stopDetect();
                    break;
                case 'release':
                    break;
            }
        });
    });
}
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top