| /* |
| Story by HTML5 UP |
| html5up.net | @ajlkn |
| Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) |
| */ |
| |
| (function($) { |
| |
| skel.breakpoints({ |
| xlarge: '(max-width: 1680px)', |
| large: '(max-width: 1280px)', |
| medium: '(max-width: 980px)', |
| small: '(max-width: 736px)', |
| xsmall: '(max-width: 480px)', |
| xxsmall: '(max-width: 360px)' |
| }); |
| |
| $(function() { |
| |
| var $window = $(window), |
| $body = $('body'), |
| $wrapper = $('#wrapper'); |
| |
| // Disable animations/transitions until the page has loaded. |
| $body.addClass('is-loading'); |
| |
| $window.on('load', function() { |
| window.setTimeout(function() { |
| $body.removeClass('is-loading'); |
| }, 100); |
| }); |
| |
| // Fix: Placeholder polyfill. |
| $('form').placeholder(); |
| |
| // Prioritize "important" elements on medium. |
| skel.on('+medium -medium', function() { |
| $.prioritize( |
| '.important\\28 medium\\29', |
| skel.breakpoint('medium').active |
| ); |
| }); |
| |
| // Browser fixes. |
| |
| // IE: Flexbox min-height bug. |
| if (skel.vars.browser == 'ie') |
| (function() { |
| |
| var flexboxFixTimeoutId; |
| |
| $window.on('resize.flexbox-fix', function() { |
| |
| var $x = $('.fullscreen'); |
| |
| clearTimeout(flexboxFixTimeoutId); |
| |
| flexboxFixTimeoutId = setTimeout(function() { |
| |
| if ($x.prop('scrollHeight') > $window.height()) |
| $x.css('height', 'auto'); |
| else |
| $x.css('height', '100vh'); |
| |
| }, 250); |
| |
| }).triggerHandler('resize.flexbox-fix'); |
| |
| })(); |
| |
| // Object fit workaround. |
| if (!skel.canUse('object-fit')) |
| (function() { |
| |
| $('.banner .image, .spotlight .image').each(function() { |
| |
| var $this = $(this), |
| $img = $this.children('img'), |
| positionClass = $this.parent().attr('class').match(/image-position-([a-z]+)/); |
| |
| // Set image. |
| $this |
| .css('background-image', 'url("' + $img.attr('src') + '")') |
| .css('background-repeat', 'no-repeat') |
| .css('background-size', 'cover'); |
| |
| // Set position. |
| switch (positionClass.length > 1 ? positionClass[1] : '') { |
| |
| case 'left': |
| $this.css('background-position', 'left'); |
| break; |
| |
| case 'right': |
| $this.css('background-position', 'right'); |
| break; |
| |
| default: |
| case 'center': |
| $this.css('background-position', 'center'); |
| break; |
| |
| } |
| |
| // Hide original. |
| $img.css('opacity', '0'); |
| |
| }); |
| |
| })(); |
| |
| // Smooth scroll. |
| $('.smooth-scroll').scrolly(); |
| $('.smooth-scroll-middle').scrolly({ anchor: 'middle' }); |
| |
| // Wrapper. |
| $wrapper.children() |
| .scrollex({ |
| top: '30vh', |
| bottom: '30vh', |
| initialize: function() { |
| $(this).addClass('is-inactive'); |
| }, |
| terminate: function() { |
| $(this).removeClass('is-inactive'); |
| }, |
| enter: function() { |
| $(this).removeClass('is-inactive'); |
| }, |
| leave: function() { |
| |
| var $this = $(this); |
| |
| if ($this.hasClass('onscroll-bidirectional')) |
| $this.addClass('is-inactive'); |
| |
| } |
| }); |
| |
| // Items. |
| $('.items') |
| .scrollex({ |
| top: '30vh', |
| bottom: '30vh', |
| delay: 50, |
| initialize: function() { |
| $(this).addClass('is-inactive'); |
| }, |
| terminate: function() { |
| $(this).removeClass('is-inactive'); |
| }, |
| enter: function() { |
| $(this).removeClass('is-inactive'); |
| }, |
| leave: function() { |
| |
| var $this = $(this); |
| |
| if ($this.hasClass('onscroll-bidirectional')) |
| $this.addClass('is-inactive'); |
| |
| } |
| }) |
| .children() |
| .wrapInner('<div class="inner"></div>'); |
| |
| // Gallery. |
| $('.gallery') |
| .wrapInner('<div class="inner"></div>') |
| .prepend(skel.vars.mobile ? '' : '<div class="forward"></div><div class="backward"></div>') |
| .scrollex({ |
| top: '30vh', |
| bottom: '30vh', |
| delay: 50, |
| initialize: function() { |
| $(this).addClass('is-inactive'); |
| }, |
| terminate: function() { |
| $(this).removeClass('is-inactive'); |
| }, |
| enter: function() { |
| $(this).removeClass('is-inactive'); |
| }, |
| leave: function() { |
| |
| var $this = $(this); |
| |
| if ($this.hasClass('onscroll-bidirectional')) |
| $this.addClass('is-inactive'); |
| |
| } |
| }) |
| .children('.inner') |
| //.css('overflow', 'hidden') |
| .css('overflow-y', skel.vars.mobile ? 'visible' : 'hidden') |
| .css('overflow-x', skel.vars.mobile ? 'scroll' : 'hidden') |
| .scrollLeft(0); |
| |
| // Style #1. |
| // ... |
| |
| // Style #2. |
| $('.gallery') |
| .on('wheel', '.inner', function(event) { |
| |
| var $this = $(this), |
| delta = (event.originalEvent.deltaX * 10); |
| |
| // Cap delta. |
| if (delta > 0) |
| delta = Math.min(25, delta); |
| else if (delta < 0) |
| delta = Math.max(-25, delta); |
| |
| // Scroll. |
| $this.scrollLeft( $this.scrollLeft() + delta ); |
| |
| }) |
| .on('mouseenter', '.forward, .backward', function(event) { |
| |
| var $this = $(this), |
| $inner = $this.siblings('.inner'), |
| direction = ($this.hasClass('forward') ? 1 : -1); |
| |
| // Clear move interval. |
| clearInterval(this._gallery_moveIntervalId); |
| |
| // Start interval. |
| this._gallery_moveIntervalId = setInterval(function() { |
| $inner.scrollLeft( $inner.scrollLeft() + (5 * direction) ); |
| }, 10); |
| |
| }) |
| .on('mouseleave', '.forward, .backward', function(event) { |
| |
| // Clear move interval. |
| clearInterval(this._gallery_moveIntervalId); |
| |
| }); |
| |
| // Lightbox. |
| $('.gallery.lightbox') |
| .on('click', 'a', function(event) { |
| |
| var $a = $(this), |
| $gallery = $a.parents('.gallery'), |
| $modal = $gallery.children('.modal'), |
| $modalImg = $modal.find('img'), |
| href = $a.attr('href'); |
| |
| // Not an image? Bail. |
| if (!href.match(/\.(jpg|gif|png|mp4)$/)) |
| return; |
| |
| // Prevent default. |
| event.preventDefault(); |
| event.stopPropagation(); |
| |
| // Locked? Bail. |
| if ($modal[0]._locked) |
| return; |
| |
| // Lock. |
| $modal[0]._locked = true; |
| |
| // Set src. |
| $modalImg.attr('src', href); |
| |
| // Set visible. |
| $modal.addClass('visible'); |
| |
| // Focus. |
| $modal.focus(); |
| |
| // Delay. |
| setTimeout(function() { |
| |
| // Unlock. |
| $modal[0]._locked = false; |
| |
| }, 600); |
| |
| }) |
| .on('click', '.modal', function(event) { |
| |
| var $modal = $(this), |
| $modalImg = $modal.find('img'); |
| |
| // Locked? Bail. |
| if ($modal[0]._locked) |
| return; |
| |
| // Already hidden? Bail. |
| if (!$modal.hasClass('visible')) |
| return; |
| |
| // Lock. |
| $modal[0]._locked = true; |
| |
| // Clear visible, loaded. |
| $modal |
| .removeClass('loaded') |
| |
| // Delay. |
| setTimeout(function() { |
| |
| $modal |
| .removeClass('visible') |
| |
| setTimeout(function() { |
| |
| // Clear src. |
| $modalImg.attr('src', ''); |
| |
| // Unlock. |
| $modal[0]._locked = false; |
| |
| // Focus. |
| $body.focus(); |
| |
| }, 475); |
| |
| }, 125); |
| |
| }) |
| .on('keypress', '.modal', function(event) { |
| |
| var $modal = $(this); |
| |
| // Escape? Hide modal. |
| if (event.keyCode == 27) |
| $modal.trigger('click'); |
| |
| }) |
| .prepend('<div class="modal" tabIndex="-1"><div class="inner"><img src="" /></div></div>') |
| .find('img') |
| .on('load', function(event) { |
| |
| var $modalImg = $(this), |
| $modal = $modalImg.parents('.modal'); |
| |
| setTimeout(function() { |
| |
| // No longer visible? Bail. |
| if (!$modal.hasClass('visible')) |
| return; |
| |
| // Set loaded. |
| $modal.addClass('loaded'); |
| |
| }, 275); |
| |
| }); |
| |
| }); |
| |
| })(jQuery); |