Skip to content

Instantly share code, notes, and snippets.

@cshold
Created June 9, 2014 16:06
Show Gist options
  • Save cshold/361e30febeaa377e6269 to your computer and use it in GitHub Desktop.
Save cshold/361e30febeaa377e6269 to your computer and use it in GitHub Desktop.
Timber Tutorial | Final JS File
/* Simple jQuery Equal Heights @version 1.5.1. Copyright (c) 2013 Matt Banks. Dual licensed under the MIT and GPL licenses. */
!function(a){a.fn.equalHeights=function(){var b=0,c=a(this);return c.each(function(){var c=a(this).innerHeight();c>b&&(b=c)}),c.css("height",b)},a("[data-equal]").each(function(){var b=a(this),c=b.data("equal");b.find(c).equalHeights()})}(jQuery);
window.timber = window.timber || {};
timber.cache = {
// General
html: $('html'),
body: $('body'),
equalHeight: $('.equal-height'),
breadcrumbs: $('.breadcrumb'),
// Navigation
menuToggle: $('.menu-toggle'),
// Home Page
carousel: $('.flexslider'),
// Product Page
mainImage: $('#productPhotoImg'),
thumbImages: $('#productThumbs').find('a.product-photo-thumb'),
newImage: null,
shareButtons: $('.social-sharing'),
// Collection Pages
collectionFilters: $('#collectionFilters'),
toggleFilterBtn: $('#toggleFilters')
}
timber.init = function () {
timber.cache.html.removeClass('no-js').addClass('js');
// Run on load
timber.toggleMenu();
timber.flexslider();
timber.productImageSwitch();
timber.equalHeights();
timber.toggleFilters();
timber.socialSharing();
}
timber.toggleMenu = function () {
timber.cache.menuToggle.on('click', function() {
timber.cache.body.toggleClass('show-nav');
});
}
timber.flexslider = function () {
if ( timber.cache.carousel.length ) {
timber.cache.carousel.flexslider({
animation: 'slide',
slideshowSpeed: 5500,
animationSpeed: 500,
pauseOnHover: true,
keyboard: false
});
}
}
timber.productImageSwitch = function () {
if ( !timber.cache.thumbImages.length ) {
return;
}
// Switch the main image with one of the thumbnails
// Note: this does not change the variant selected, just the image
timber.cache.thumbImages.on('click', function(e) {
e.preventDefault();
timber.cache.newImage = $(this).attr('href');
timber.cache.mainImage.attr({ src: timber.cache.newImage });
});
}
timber.socialSharing = function () {
var permalink = timber.cache.shareButtons.data('permalink'),
shareButtons = timber.cache.shareButtons.find('a'),
socialCounts = timber.cache.shareButtons.find('span.share-count');
{% if settings.social_sharing_products or settings.social_sharing_blog %}
// Get share stats from respective APIs
var fbLink = $('.share-facebook'),
twitLink = $('.share-twitter'),
pinLink = $('.share-pinterest'),
googleLink = $('.share-google'),
fbShares, twitShares, pinShares, googleShares;
if ( fbLink.length ) {
$.getJSON('//graph.facebook.com/?id=' + permalink + '&callback=?', function(data) {
fbShares = data.shares;
if (!fbShares) {
fbShares = 0;
}
fbLink.find('.share-count').text(fbShares).addClass('is-loaded');
});
};
if ( twitLink.length ) {
$.getJSON('//cdn.api.twitter.com/1/urls/count.json?url=' + permalink + '&callback=?', function(data) {
twitShares = data.count;
twitLink.find('.share-count').text(twitShares).addClass('is-loaded');
});
};
if ( pinLink.length ) {
$.getJSON('//api.pinterest.com/v1/urls/count.json?url=' + permalink + '&callback=?', function(data) {
pinShares = data.count;
pinLink.find('.share-count').text(pinShares).addClass('is-loaded');
});
};
if ( googleLink.length ) {
// Can't currently get Google+ count with JS
googleLink.find('.share-count').addClass('is-loaded');
};
{% endif %}
{% if settings.social_sharing_products or settings.social_sharing_blog %}
// Share popups
shareButtons.on('click', function(e) {
e.preventDefault();
var el = $(this),
popup = el.attr('class'),
link = el.attr('href'),
w = 700,
h = 400;
// Set popup sizes
switch (popup) {
case 'share-twitter':
h = 300;
break;
case 'share-fancy':
w = 480;
h = 720;
break;
case 'share-google':
w = 500;
break;
}
window.open(link, popup, 'width=' + w + ', height=' + h);
});
{% endif %}
}
timber.equalHeights = function () {
if ( timber.cache.equalHeight.length ) {
// Short timeout to let fonts load
setTimeout(function() {
timber.cache.equalHeight.equalHeights();
}, 200);
}
}
timber.toggleFilters = function () {
if ( !timber.cache.collectionFilters.length ) {
return;
}
timber.cache.toggleFilterBtn.on('click', function() {
timber.cache.toggleFilterBtn.toggleClass('is-active');
timber.cache.collectionFilters.slideToggle(200);
// Scroll to top of filters if user is down the page a bit
if ( $(window).scrollTop() > timber.cache.breadcrumbs.offset().top ) {
$('html, body').animate({
scrollTop: timber.cache.breadcrumbs.offset().top
});
}
});
}
// Initialize Timber's JS on docready
$(function() {
window.timber.init();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment