JAVASCRIPT   13

lf-ad.js

Guest on 10th May 2021 05:06:16 PM

  1. /*
  2.  
  3.  #######################
  4.  #####  ######      ####
  5.  #####  ######  ########
  6.  #####  ######    ######
  7.  #####  ######  ########
  8.  #####      ##  ########
  9.  #######################
  10.  by: Tom Walter aka Little Fragments
  11.  last modified: Wed Apr 22 2020 13:25:27 GMT+0200 (CEST)
  12.  
  13. */
  14. //sets basic variables for use in other things
  15.  
  16. //set variables
  17. var blMobile = false; //are you on mobile
  18. var blScrollbar = false; //is there a scrollbar
  19.  
  20. //jquery loaded -------------------------------------------------------------------------------------
  21. $(document).ready(function () {
  22.   //check for mobile
  23.   if ('ontouchstart' in window || navigator.msMaxTouchPoints) {
  24.     //used in css and stuff
  25.     $('body').addClass('body--mobile');
  26.     blMobile = true;
  27.   }
  28.   //check for scrollbar
  29.   if (viewport().width != $(window).width()) {
  30.     $('body').addClass('body--scrollbar');
  31.     blScrollbar = true;
  32.   }
  33.   //check for blend modes
  34.   if ('CSS' in window && 'supports' in window.CSS) {
  35.     var support = window.CSS.supports('mix-blend-mode', 'soft-light');
  36.     support = support ? 'body--mix-blend-mode' : 'body--no-mix-blend-mode';
  37.     $('body').addClass(support);
  38.   }
  39.  
  40.   //output name for devvers
  41.   console.log(
  42.     '%cSite by',
  43.     'color: #000; font-size: 20px; font-family: "Arial"; font-weight: bold; text-transform: uppercase;'
  44.   );
  45.   console.log(
  46.     '%cLittle Fragments',
  47.     'color: #000; font-size: 32px; font-family: "Arial"; font-weight: bold; text-transform: uppercase;'
  48.   );
  49. });
  50.  
  51. /**
  52.  * jQuery Plugin to obtain touch gestures from iPhone, iPod Touch and iPad, should also work with Android mobile phones (not tested yet!)
  53.  * Common usage: wipe images (left and right to show the previous or next image)
  54.  *
  55.  * @author Andreas Waltl, netCU Internetagentur (http://www.netcu.de)
  56.  * @version 1.1.1 (9th December 2010) - fix bug (older IE's had problems)
  57.  * @version 1.1 (1st September 2010) - support wipe up and wipe down
  58.  * @version 1.0 (15th July 2010)
  59.  */
  60. (function($) {
  61.    $.fn.touchwipe = function(settings) {
  62.      var config = {
  63.             min_move_x: 20,
  64.             min_move_y: 20,
  65.                   wipeLeft: function() { },
  66.                   wipeRight: function() { },
  67.                   wipeUp: function() { },
  68.                   wipeDown: function() { },
  69.                   preventDefaultEvents: true
  70.        };
  71.      
  72.      if (settings) $.extend(config, settings);
  73.  
  74.      this.each(function() {
  75.        var startX;
  76.        var startY;
  77.              var isMoving = false;
  78.  
  79.        function cancelTouch() {
  80.              this.removeEventListener('touchmove', onTouchMove);
  81.              startX = null;
  82.              isMoving = false;
  83.        }   
  84.        
  85.        function onTouchMove(e) {
  86.              if(config.preventDefaultEvents) {
  87.                    e.preventDefault();
  88.              }
  89.              if(isMoving) {
  90.                    var x = e.touches[0].pageX;
  91.                    var y = e.touches[0].pageY;
  92.                    var dx = startX - x;
  93.                    var dy = startY - y;
  94.                    if(Math.abs(dx) >= config.min_move_x) {
  95.                         cancelTouch();
  96.                         if(dx > 0) {
  97.                               config.wipeLeft();
  98.                         }
  99.                         else {
  100.                               config.wipeRight();
  101.                         }
  102.                    }
  103.                    else if(Math.abs(dy) >= config.min_move_y) {
  104.                               cancelTouch();
  105.                               if(dy > 0) {
  106.                                     config.wipeDown();
  107.                               }
  108.                               else {
  109.                                     config.wipeUp();
  110.                               }
  111.                          }
  112.              }
  113.        }
  114.        
  115.        function onTouchStart(e)
  116.        {
  117.              if (e.touches.length == 1) {
  118.                    startX = e.touches[0].pageX;
  119.                    startY = e.touches[0].pageY;
  120.                    isMoving = true;
  121.                    this.addEventListener('touchmove', onTouchMove, false);
  122.              }
  123.        }           
  124.        if ('ontouchstart' in document.documentElement) {
  125.              this.addEventListener('touchstart', onTouchStart, false);
  126.        }
  127.      });
  128.  
  129.      return this;
  130.    };
  131.  
  132.  })(jQuery);
  133.  
  134. //do these things only once
  135. //even if you are using a history.js navigation
  136.  
  137. //set variables
  138. var blNavOpen = false;
  139. var $transitionDefault = 400;
  140. var imageTimer;
  141. var textTimer;
  142. var imageTotal = 15;
  143. var currentImage = 1;
  144. var currentLayer = 2;
  145. var arTexts = [
  146.   'Naaz for Vogue NL - New Talent',
  147.   'Joaquin',
  148.   'Givenchy. Vogue NL - December Wishlist',
  149.   'Aiysha Siddiqui',
  150.   'Thula',
  151.   'Imara Limon for Vogue NL - New Talent',
  152.   'Marieke Sherjon',
  153.   'Dior. Vogue NL - The Edit',
  154.   'Marlou Fernanda [aka Nunu]',
  155.   'Aiysha Siddiqui',
  156.   'Thula',
  157.   'Silke van Daal',
  158.   'Sabine Getty. Vogue NL - December Wishlist',
  159.   'Aiysha Siddiqui',
  160.   'Marieke Sherjon',
  161. ];
  162.  
  163. //jquery loaded ---------------------------------------------------------------------------
  164. $(document).ready(function () {
  165.   if (typeof images !== 'undefined') {
  166.     imageTotal = images.length;
  167.  
  168.     arTexts = [];
  169.     for (var i = 0; i < images.length; i++) {
  170.       arTexts.push(images[i].text);
  171.     }
  172.   }
  173.  
  174.   once();
  175. });
  176.  
  177. //once function ---------------------------------------------------------------------------
  178. function once() {
  179.   // buttons
  180.   $('body').on('click', '.arrows__side--prev', function () {
  181.     prevImage();
  182.   });
  183.  
  184.   $('body').on('click', '.arrows__side--next', function () {
  185.     nextImage();
  186.   });
  187.  
  188.   // swipe on touch
  189.   $('.image-holder').touchwipe({
  190.     wipeLeft: nextImage,
  191.     wipeRight: prevImage,
  192.     // wipeUp: function() { alert("up"); },
  193.     // wipeDown: function() { alert("down"); },
  194.     min_move_x: 20,
  195.     // min_move_y: 20,
  196.     preventDefaultEvents: true,
  197.   });
  198.  
  199.   $('body').keyup(function (e) {
  200.     // console.log('e.keyCode', e.keyCode);
  201.  
  202.     if (e.keyCode == 37) {
  203.       prevImage();
  204.     }
  205.  
  206.     if (e.keyCode == 39) {
  207.       nextImage();
  208.     }
  209.   });
  210.  
  211.   $('img').load(loadedImg);
  212.  
  213.   $('.caption').addClass('caption--active');
  214.   $('.counter').addClass('counter--active');
  215.   switchImage();
  216. }
  217.  
  218. function prevImage() {
  219.   currentImage--;
  220.   if (currentImage == 0) {
  221.     currentImage = imageTotal;
  222.   }
  223.  
  224.   switchImage();
  225. }
  226.  
  227. function nextImage() {
  228.   currentImage++;
  229.   if (currentImage > imageTotal) {
  230.     currentImage = 1;
  231.   }
  232.  
  233.   switchImage();
  234. }
  235.  
  236. function switchImage() {
  237.   // console.log('switchImage', 'currentImage', currentImage);
  238.  
  239.   clearTimeout(imageTimer);
  240.  
  241.   // set image
  242.   var src = '';
  243.   var srcset = '';
  244.   if (typeof images !== 'undefined') {
  245.     // cms linked
  246.     src = images[currentImage - 1].image.url;
  247.     var img = images[currentImage - 1].image.sizes;
  248.     srcset = img.medium_large + ' ' + img['medium_large-width'] + 'w';
  249.     srcset += ', ' + img.large + ' ' + img['large-width'] + 'w';
  250.     srcset += ', ' + img.xl + ' ' + img['xl-width'] + 'w';
  251.   } else {
  252.     // front end
  253.     src = $url + 'images/' + currentImage + '.jpg?v=' + $assetsVersion;
  254.   }
  255.  
  256.   $el = $('#image' + currentLayer).find('img');
  257.  
  258.   if ($el.attr('src') == src) {
  259.     loadedImg();
  260.   } else {
  261.     $el.attr('src', src);
  262.     if (srcset != '') $el.attr('srcset', srcset);
  263.   }
  264. }
  265.  
  266. function loadedImg() {
  267.   // console.log('loadedImg');
  268.  
  269.   // set text
  270.   var curText = currentImage - 1;
  271.   $('.caption').text(arTexts[curText]);
  272.   $('.counter').text(currentImage + '/' + imageTotal);
  273.  
  274.   // fade in image
  275.   if (currentLayer == 2) {
  276.     $('#image2').addClass('image-holder--active');
  277.     $('#image1').removeClass('image-holder--active');
  278.  
  279.     currentLayer = 1;
  280.   } else {
  281.     $('#image1').addClass('image-holder--active');
  282.     $('#image2').removeClass('image-holder--active');
  283.  
  284.     currentLayer = 2;
  285.   }
  286.  
  287.   imageTimer = setTimeout(nextImage, 4000);
  288. }
  289.  
  290. // do this whenever you load a page
  291. // so also when loading a new history.js page
  292. // often occurs in <main> or changing navigations
  293.  
  294. //set variables
  295.  
  296. //jquery loaded -------------------------------------------------------------------------------------
  297. $(document).ready(function () {
  298.   setPage();
  299. });
  300.  
  301. //page loaded function ------------------------------------------------------------------------------
  302. function setPage() {
  303.   //sets all the pages
  304.   //console.log('setPage');
  305. }
  306.  
  307. //do this when loading everything
  308. //so when using history.js, after loading all the images
  309.  
  310. //set variables
  311.  
  312. //loaded all ---------------------------------------------------------------------------------
  313. $(window).load(function () {
  314.   //do after loading a page
  315.   loadedPage();
  316. });
  317.  
  318. //page loaded function ------------------------------------------------------------------------------
  319. function loadedPage() {
  320.   //sets all the pages after loading
  321.   //console.log('loadedPage');
  322. }
  323.  
  324. //variables -------------------------------------------------------------------------------
  325.  
  326. //jquery loaded ---------------------------------------------------------------------------
  327. $(document).ready(function () {
  328.   setResize();
  329. });
  330.  
  331. //resize listeners ------------------------------------------------------------------------
  332. $(window).on('resize', setResize);
  333.  
  334. //resize function -------------------------------------------------------------------------
  335. function setResize() {
  336.   //do resizing actions
  337.   //console.log('setResize');
  338. }
  339.  
  340. //helper functions ------------------------------------------------------------------------
  341. //used to get the viewport width including the scrollbar
  342. //this is needed to get the same width as the mediaqueries in css
  343. function viewport() {
  344.   var e = window,
  345.     a = 'inner';
  346.   if (!('innerWidth' in window)) {
  347.     a = 'client';
  348.     e = document.documentElement || document.body;
  349.   }
  350.   return { width: e[a + 'Width'], height: e[a + 'Height'] };
  351. }
  352.  
  353. //variables ------------------------------------------------------------------------
  354.  
  355. //jquery loaded
  356. $(document).ready(function () {
  357.   setScroll();
  358. });
  359.  
  360. //scroll listeners ----------------------------------------------------------------
  361. $(window).on('resize', setScroll);
  362. $(document).scroll(setScroll);
  363.  
  364. // update scroll on ios chrome for parallax
  365. var ivScroll;
  366. var evt = document.createEvent('Event');
  367. evt.initEvent('scroll', true, true);
  368.  
  369. window.addEventListener('scroll', function () {
  370.   //console.log('update scroll');
  371.   setScroll();
  372. });
  373. var dispatchScroll = function () {
  374.   window.dispatchEvent(evt);
  375. };
  376. var activateOnScroll = function () {
  377.   ivScroll = setInterval(dispatchScroll, 50);
  378. };
  379. var deactivateOnScroll = function () {
  380.   clearInterval(ivScroll);
  381. };
  382. if ('ontouchstart' in window) {
  383.   window.addEventListener('touchstart', activateOnScroll);
  384.   window.addEventListener('touchmove', dispatchScroll);
  385.   window.addEventListener('touchend', deactivateOnScroll);
  386. }
  387.  
  388. //scroll function ------------------------------------------------------------------
  389. function setScroll() {
  390.   //do scrolling actions
  391.   //console.log('setScroll');
  392.  
  393.   var scrollTop = $(window).scrollTop();
  394.  
  395.   switch ($pageType) {
  396.   }
  397. }

Raw Paste


Login or Register to edit or fork this paste. It's free.