<source id="3oodw" ><sup id="3oodw" ></sup></source>

      1. <s id="3oodw" ><th id="3oodw" ><small id="3oodw" ></small></th></s>
        <i id="3oodw" ><optgroup id="3oodw" ></optgroup></i>

            <input id="3oodw" ><bdo id="3oodw" ><cite id="3oodw" ></cite></bdo></input>
            <delect id="3oodw" ><ruby id="3oodw" ></ruby></delect>

            <em id="3oodw" ><progress id="3oodw" ></progress></em><input id="3oodw" ></input>
            <strike id="3oodw" ></strike>

            Flexslider Slides while Ken Burns

            Flexslider Slides while Ken Burns

            Blog Categories: 
             | Digital Frontiers Media

            A client of mine recently asked me to add the "Ken Burns" pan-and-zoom effect to the slideshow that was already built on their Drupal site using . I didn't want to rebuild it using a different slideshow library that supported the effect out of the box and I wanted something that would produce a nice set of pans and zooms and durations that would be random and different each time the slides were presented without going beyond the slide bounds or leaving gaps or whitespace. I came up with this javascript client-side Drupal behavior that could be added directy to the theme to add the new effect without changing anything else about the build.

            It should be pretty much drop-and-go for you if you use Flexslider on your Drupal site and know how to had Drupal javascript behaviors to your theme. It assumes the container for your slideshow uses the class "slides" as it uses jquery to target the individual slide list items with ".slides li". To customize it, you can change the value of the following variables:

            1. effectIntensity - enter as percent, e.g. 30 = 30%
            2. minEffectDuration - enter as seconds, e.g. 5 = 5 seconds
            3. maxEffectDuration - enter as seconds, e.g. 10 = 10 seconds

            The example code below defaults to a 30% effectIntensity and an effect duration of 5-10 seconds (my flexslider slide duration was 10 seconds so I set the values within these bounds).

            You can see an example of this code running on the 火红彩票苹果下载 page slideshow at .

            I hope you find it useful for adding a little extra dynamic to your static image slideshows!

            Code follows:

              Drupal.behaviors.flexsliderKenBurns = {
                attach: function (context, settings) {
                  var $div = $(".slides li");
                  var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                      if (mutation.attributeName === "class") {
                        var attributeValue = $(mutation.target).prop(mutation.attributeName);
                        if (attributeValue == 'flex-active-slide') {
                          var effectIntensity = 30; // enter as percent, e.g. 30 = 30%;
                          var minEffectDuration = 5; // enter as seconds, e.g. 5 = 5 seconds;
                          var maxEffectDuration = 10; // enter as seconds, e.g. 10 = 10 seconds;
                          var slideScale = (Math.random() * effectIntensity/100) + 1;
                          var slideScaleRel = (slideScale - 1) / 4;
                          $(mutation.target).find('img').css({
                              transitionDuration:  (Math.random() * (maxEffectDuration - minEffectDuration) * 1000) + (minEffectDuration * 1000) + 'ms',
                              transform: 'scale3d(' + slideScale + ', ' + slideScale + ', 1) translate3d(' + $(mutation.target).width() * slideScaleRel * (((Math.random() > 0.5) * -2) + 1) + 'px, ' + $(mutation.target).height() * slideScaleRel * (((Math.random() > 0.5) * -2) + 1) + 'px, 0px)'
                          });
                        }
                      }
                    });
                  });
                  $div.each(function() {
                    $this = $(this);
                    observer.observe($this[0], {
                      attributes: true
                    });
                  });
                }
              };
            Home page Disclaimer: This website's materials and pictures are sourced from Internet articles. This website does not bear any claims and legal liabilities caused by content information. The copyright of all works belongs to the original author, and has nothing to do with this previous field. If users accidentally infringe your rights and interests, please contact us and we will delete it!

            <option id="lrq7b" ><sup id="lrq7b" ></sup></option>
            <noscript id="lrq7b" ><nobr id="lrq7b" ><label id="lrq7b" ></label></nobr></noscript>
            1. <em id="lrq7b" ></em>
              <div id="lrq7b" ><optgroup id="lrq7b" ></optgroup></div>
              <dfn id="lrq7b" ></dfn>

                <u id="lrq7b" ></u>