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.
Line 15
Line 130
Line 272
The entire function (gallery.hammer towards the bottom)
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 8Line 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;
}
});
});
}
