Tomáš Daněk

Integrace Flex Slider knihovny umožňující vytvářet responzivní slideshow reagující na "doteky" na mobilních zařízeních.

Instalace a nastavení

1. Rozbalte modul Flex Slider 7.x-2.0-alpha3 do adresáře sites/all/modules/.
2. Rozbalte obsah knihovny FlexSlider do adresáře sites/all/libraries/flexslider/ tak, aby cesta byla sites/all/libraries/flexslider/jquery.flexslider.js
   • z bezpečnostních důvodů smažte adresář demo
3. V admin/modules (Moduly) modul povolte požadované moduly např.:
   • FlexSlider
   • FlexSlider Fields
   • FlexSlider Views Style
4. V admin/config/media/flexslider () je možné upravit výchozí nastavení.
5. Tip: Nepoužívejte formát Views a formáter Pole společně ve stejném Views.

Další moduly:

• Jssor Slider – responzivní, reagující na "doteky"
• FlexSlider Views Slideshow
• FlexSlider Entityreference
• Picture
• FitVids
• FlexSlider Field Collection
• Adaptive Image Styles
• Jssor Slider

Pods:

[if gallery]
<div id="slider" class="flexslider">
  <ul class="slides">
  [each gallery]
   <li [once]class="first"[/once]>
    {@gallery._img.large}
   </li>
  [/each]
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
  [each gallery]
   <li [once]class="first"[/once]>
    {@gallery._img.thumbnail}
   </li>
  [/each]
  </ul>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script>
  // No jQuery Conflict
  var $ = jQuery.noConflict();

  // CSS
  $('head').append('<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css">');

  /**
   * Flexslider
   *
   * https://www.woothemes.com/flexslider/#tabs-flexslider-info-tabber
   * http://flexslider.woothemes.com/dynamic-carousel-min-max.html
   */
  (function() {
      // Store the slider in a local variable
      var $window = $(window), flexslider = { vars:{} };

      // Tiny helper function to add breakpoints
      function getGridSize() {
    return (window.innerWidth < 600) ? 3 :
              (window.innerWidth < 900) ? 5 : 7;
      }

      /**
       * Window load
       *
       * http://stackoverflow.com/questions/8396407/jquery-what-are-differences-b...
       */ 
      $window.load(function() {

      // The slider being synced must be initialized first
    $('#carousel').flexslider({
           animation: "slide",
           controlNav: false,
     prevText: "<span class='visually-hidden'>Previous</span>",
     nextText: "<span class='visually-hidden'>Next</span>",
           //animationSpeed: 400,
           animationLoop: false,
           slideshow: false,
           itemWidth: 150,
           itemMargin: 5,
           minItems: getGridSize(), // use function to pull in initial value
           maxItems: getGridSize(), // use function to pull in initial value
           asNavFor: '#slider',
    });  

    $('#slider').flexslider({
           animation: "slide",
           controlNav: false,
     prevText: "<span class='visually-hidden'>Previous</span>",
     nextText: "<span class='visually-hidden'>Next</span>",
           animationLoop: false,
           slideshow: false,
     smoothHeight: true,
           sync: "#carousel",
    });

   }); // End: Window load

   // check grid size on resize event
   $window.resize(function() {
    var gridSize = getGridSize();
    flexslider.vars.minItems = gridSize;
    flexslider.vars.maxItems = gridSize;
   });

  }()); // End: Flexslider

</script>
[else]

[/if]