Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Elementbaukasten Coverflow-Slider

Verwendung

Zur Darstellung einer Bild-/Videosammlung mit größerem Infotext.

Vorschau

HTML

                
                  <div class="schoeck_slider schoeck_coverflow_slider schoeck_coverflow_slider_images schoeck_slider_align_controls">
  <div class="container">
    <div class="coverflow_slider_owl slider_controls_above_on_mobile owl-carousel">
      <div class="element_wrapper">
        <div class="image_wrapper play_icon_wrapper">
          <a href="/img/dummy/1920x1080.png" class="fancybox">
            <img height="325" width="578" src="/img/dummy/578x325.png"/>
          </a>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper play_icon_wrapper">
          <a href="/img/dummy/1920x1080.png" class="fancybox">
            <img height="325" width="578" src="/img/dummy/578x325.png"/>
          </a>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper play_icon_wrapper">
          <a href="/img/dummy/1920x1080.png" class="fancybox">
            <img height="325" width="578" src="/img/dummy/578x325.png"/>
          </a>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper play_icon_wrapper">
          <a href="/img/dummy/1920x1080.png" class="fancybox">
            <img height="325" width="578" src="/img/dummy/578x325.png"/>
          </a>
        </div>
        <div class="content cms_content">
          <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <div class="element_wrapper">
        <div class="image_wrapper play_icon_wrapper">
          <a href="/img/dummy/1920x1080.png" class="fancybox">
            <img height="325" width="578" src="/img/dummy/578x325.png"/>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

              @charset "UTF-8";
/* owlcarousel basic styles */
.owl-carousel .owl-item {
  background-color: #fff;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}
.owl-carousel .owl-item img {
  height: auto;
  width: 100%;
}
.owl-carousel .owl-controls .owl-nav {
  margin: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  padding: 0;
  margin: 0;
}
@media print, screen and (min-width: 768px) {
  .owl-carousel .owl-controls .owl-nav .owl-prev,
  .owl-carousel .owl-controls .owl-nav .owl-next {
    transform: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 40px;
  }
}
.owl-carousel .owl-controls .owl-nav .owl-prev:before,
.owl-carousel .owl-controls .owl-nav .owl-next:before {
  color: #fff;
  font-size: 54px;
  line-height: 54px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  transition: 0.2s color ease;
}
@media screen and (max-width: 767) {
  .owl-carousel .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel .owl-controls .owl-nav .owl-next:before {
    transition: none;
  }
}
@media screen and (min-width: 768px) {
  .owl-carousel .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel .owl-controls .owl-nav .owl-next:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover,
.owl-carousel .owl-controls .owl-nav .owl-next:hover {
  background-color: transparent;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:hover:not(.disabled):before,
.owl-carousel .owl-controls .owl-nav .owl-next:hover:not(.disabled):before {
  color: #f9b200;
}
.owl-carousel .owl-controls .owl-nav .owl-prev.disabled,
.owl-carousel .owl-controls .owl-nav .owl-next.disabled {
  cursor: auto;
}
.owl-carousel .owl-controls .owl-nav .owl-prev {
  left: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-prev:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.owl-carousel .owl-controls .owl-nav .owl-next {
  right: 0;
}
.owl-carousel .owl-controls .owl-nav .owl-next:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.owl-carousel .owl-controls .owl-dots {
  margin-top: 40px;
}
@media screen and (max-width: 991px) {
  .owl-carousel .owl-controls .owl-dots {
    margin-top: 20px;
  }
}
.owl-carousel .owl-controls .owl-dots .owl-dot {
  height: 8px;
  width: 8px;
  margin-right: 8px;
}
.owl-carousel .owl-controls .owl-dots .owl-dot:last-child {
  margin-right: 0;
}
.owl-carousel .owl-controls .owl-dots .owl-dot span {
  height: 8px;
  width: 8px;
  background-color: #b3b3b3;
  border-radius: 50%;
  margin: 0;
}
.owl-carousel .owl-controls .owl-dots .owl-dot.active span {
  background-color: #0069b4;
}

/* ie10+11 browser hack */
_:-ms-input-placeholder,
:root .schoeck_slider .owl-carousel .owl-item .owl-lazy {
  transition: none;
}

/* schoeck slider */
.schoeck_slider .element_wrapper .image_wrapper span {
  display: block;
  text-align: center;
}
.schoeck_slider .element_wrapper .image_wrapper img {
  width: auto;
  height: auto;
  max-width: 100%;
  display: inline-block;
}
.schoeck_slider .element_wrapper .image_wrapper img.lazy-srcset {
  width: 100%;
  height: auto;
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper) {
  position: relative;
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper):before {
  top: 0;
  left: 0;
  display: block;
  padding-top: 56.25%;
  /* this forces 16:9 aspect ratio */
  width: 100%;
  content: '';
}
.schoeck_slider .element_wrapper .image_wrapper:not(.play_icon_wrapper) img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* coverflow slider */
.schoeck_coverflow_slider .element_wrapper .image_wrapper {
  border-radius: 1px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  border: solid 1px #e6e6e6;
  width: 100%;
}
.schoeck_coverflow_slider .element_wrapper .image_wrapper img {
  height: auto;
  width: 100%;
  max-height: none;
  max-width: none;
  display: block;
}
.schoeck_coverflow_slider .owl-carousel .owl-item {
  background-color: transparent;
}
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item {
  transition: 0.4s transform ease, 0.4s opacity ease;
  opacity: 0;
  visibility: hidden;
}
@media print {
  .schoeck_coverflow_slider .owl-carousel.owl-center .owl-item {
    opacity: 1;
  }
}
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active .header,
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active .content {
  opacity: 1;
  transition: 0.4s opacity ease;
}
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active:not(.center) {
  transform: perspective(600px) rotateY(45deg) scale(0.7);
}
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active:not(.center) .header,
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active:not(.center) .content {
  opacity: 0;
}
@media print {
  .schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active:not(.center) .header,
  .schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active:not(.center) .content {
    opacity: 1;
  }
}
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active.center {
  z-index: 11;
  transform: translateZ(100px);
}
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active.center + .active {
  transform: perspective(600px) rotateY(-45deg) scale(0.7);
}
.schoeck_coverflow_slider .owl-carousel.owl-center .owl-item.active.center + .active + .active {
  opacity: 0;
  visibility: hidden;
}
.schoeck_coverflow_slider .owl-controls .owl-dots {
  margin-top: 20px;
}
.schoeck_coverflow_slider .owl-controls .owl-nav .owl-prev.disabled,
.schoeck_coverflow_slider .owl-controls .owl-nav .owl-next.disabled {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .schoeck_coverflow_slider .owl-controls .owl-dots {
    margin-top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
  }
  .schoeck_coverflow_slider .owl-controls .owl-nav .owl-prev,
  .schoeck_coverflow_slider .owl-controls .owl-nav .owl-next {
    top: 0;
    transform: translateY(0);
    margin-top: 0;
  }
  .schoeck_coverflow_slider .owl-controls .owl-nav .owl-prev:before,
  .schoeck_coverflow_slider .owl-controls .owl-nav .owl-next:before {
    color: #b3b3b3;
    font-weight: bold !important;
    font-size: 25px;
    line-height: 25px;
    text-shadow: none;
  }
}
.schoeck_coverflow_slider .coverflow_slider_owl + .page_content {
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .schoeck_coverflow_slider .coverflow_slider_owl + .page_content {
    margin-top: 20px;
  }
}

.schoeck_coverflow_slider_images .image_wrapper {
  border-radius: 6px;
}
.schoeck_coverflow_slider_images .owl-carousel .owl-item.active:not(.center) .image_wrapper {
  border-radius: 0;
}
.schoeck_coverflow_slider_images .content {
  margin-top: 15px;
  padding: 0 10px;
  font-family: 'CorpidCd_TT5', Arial;
  font-weight: normal;
  font-style: normal;
  color: #7c7c7b;
}

/* controls above on mobile */
@media screen and (max-width: 767px) {
  .owl-carousel.slider_controls_above_on_mobile.has_multiple_articles .owl-item .element_wrapper {
    padding-top: 65px;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-dots {
    margin-top: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    width: 100%;
    padding-left: 50px;
    padding-right: 50px;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev {
    left: 0;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next {
    right: 0;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev,
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next {
    top: 12px;
    transform: translateY(0);
    margin-top: 0;
    z-index: 10;
    opacity: 1;
  }
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-prev:before,
  .owl-carousel.slider_controls_above_on_mobile .owl-controls .owl-nav .owl-next:before {
    color: #b3b3b3;
    font-weight: bold !important;
    font-size: 25px;
    line-height: 25px;
    text-shadow: none;
  }
}

SCSS

              @import "../general/_general";

/* owlcarousel basic styles */
.owl-carousel {

  .owl-item {
    background-color:#fff;

    -webkit-backface-visibility:hidden;
    -webkit-transform:translateZ(0) scale(1.0, 1.0);

    img {
      height:auto;
      width:100%;
    }
  }

  .owl-controls {
    .owl-nav {
      margin:0;

      .owl-prev,
      .owl-next {
        @include autocenterY();
        background-color:transparent;
        padding:0;
        margin:0;

        @media print, screen and (min-width:$screen-sm-min) {
          @include transform(none);
          position:absolute;
          top:0;
          height:100%;
          width:40px;
        }

        &:before {
          color:$white;
          font-size:54px;
          line-height:54px;
          text-shadow:0 1px 10px rgba(0, 0, 0, .6);
          @include linkcolor-transition;

          @media screen and (min-width:$screen-sm-min) {
            @include autocenterXY();
          }
        }

        &:hover {
          background-color:transparent;

          &:not(.disabled) {
            &:before {
              color:$orange;
            }
          }
        }

        &.disabled {
          cursor:auto;
        }
      }

      .owl-prev {
        left:0;
        @include schoeck-icon($icon-arrow-left);
      }

      .owl-next {
        right:0;
        @include schoeck-icon($icon-arrow-right);
      }
    }
    .owl-dots {
      margin-top:40px;

      @media screen and (max-width:$screen-sm-max) {
        margin-top:20px;
      }

      .owl-dot {
        height:8px;
        width:8px;
        margin-right:8px;

        &:last-child {
          margin-right:0;
        }

        span {
          height:8px;
          width:8px;
          background-color:$grey;
          @include border-radius(50%);
          margin:0;
        }

        &.active {
          span {
            background-color:$blue;
          }
        }
      }
    }
  }
}

/* ie10+11 browser hack */
_:-ms-input-placeholder,
:root .schoeck_slider .owl-carousel .owl-item .owl-lazy {
  @include transition(none);
}

/* schoeck slider */

.schoeck_slider {
  .element_wrapper {
    .image_wrapper {
      span {
        display:block;
        text-align:center;
      }

      img {
        width:auto;
        height:auto;
        max-width:100%;
        display:inline-block;

        &.lazy-srcset {
          width:100%;
          height:auto;
        }
      }

      &:not(.play_icon_wrapper) {
        position:relative;

        &:before {
          top:0;
          left:0;
          display:block;
          padding-top:(9 / 16) * 100%; /* this forces 16:9 aspect ratio */
          width:100%;
          content:'';
        }

        img {
          @include autocenterXY();
        }
      }
    }
  }
}

/* coverflow slider */
.schoeck_coverflow_slider {
  .element_wrapper {
    .image_wrapper {
      @include border-radius(1px);
      overflow:hidden;
      background-color:#fff;
      @include box-shadow(0 2px 20px rgba(0, 0, 0, .1));
      border:solid 1px $lightgrey;
      width:100%;

      img {
        height:auto;
        width:100%;
        max-height:none;
        max-width:none;
        display:block;
      }
    }
  }

  .owl-carousel {
    .owl-item {
      background-color:transparent;
    }

    &.owl-center {
      .owl-item {
        @include transition(0.4s transform ease, 0.4s opacity ease);
        opacity:0;
        visibility:hidden;

        @media print {
          opacity:1;
        }

        &.active {
          opacity:1;
          visibility:visible;
          z-index:10;

          .header,
          .content {
            opacity:1;
            @include transition(0.4s opacity ease);
          }

          &:not(.center) {
            @include transform(perspective(600px) rotateY(45deg) scale(0.7));

            .header,
            .content {
              opacity:0;

              @media print {
                opacity:1;
              }
            }
          }

          &.center {
            z-index:11;
            @include transform(translateZ(100px));

            & + .active {
              @include transform(perspective(600px) rotateY(-45deg) scale(0.7));

              & + .active {
                opacity:0;
                visibility:hidden;
              }
            }
          }
        }
      }
    }
  }

  .owl-controls {
    .owl-dots {
      margin-top:20px;
    }
    .owl-nav {
      .owl-prev,
      .owl-next {
        &.disabled {
          display:none !important;
        }
      }
    }
  }

  @media screen and (max-width:$screen-xs-max) {
    .owl-controls {
      .owl-dots {
        margin-top:0;
        @include autocenterX();
        top:0;
      }

      .owl-nav {
        .owl-prev,
        .owl-next {
          top:0;
          @include translateY(0);
          margin-top:0;

          &:before {
            color:$grey;
            font-weight:bold !important;
            font-size:25px;
            line-height:25px;
            text-shadow:none;
          }
        }
      }
    }
  }

  .coverflow_slider_owl + .page_content {
    margin-top:40px;

    @media screen and (max-width:$screen-xs-max) {
      margin-top:20px;
    }
  }
}

.schoeck_coverflow_slider_images {
  .image_wrapper {
    @include border-radius(6px);
  }

  .owl-carousel {
    .owl-item {
      &.active {
        &:not(.center) {
          .image_wrapper {
            @include border-radius(0);
          }
        }
      }
    }
  }

  .content {
    margin-top:15px;
    padding:0 10px;
    @include corpid-cd-regular;
    color:$darkgrey;
  }
}

/* controls above on mobile */
.owl-carousel.slider_controls_above_on_mobile {
  @media screen and (max-width:$screen-xs-max) {
    &.has_multiple_articles {
      .owl-item {
        .element_wrapper {
          padding-top:65px;
        }
      }
    }

    .owl-controls {
      .owl-dots {
        margin-top:0;
        @include autocenterX();
        top:20px;
        width:100%;
        padding-left:50px;
        padding-right:50px;
      }

      .owl-nav {
        .owl-prev {
          left:0;
        }
        .owl-next {
          right:0;
        }

        .owl-prev,
        .owl-next {
          top:12px;
          @include translateY(0);
          margin-top:0;
          z-index:10;
          opacity:1;

          &:before {
            color:$grey;
            font-weight:bold !important;
            font-size:25px;
            line-height:25px;
            text-shadow:none;
          }
        }
      }
    }
  }
}

JavaScript

                jQuery(document).ready(function(){
  // isMobile handling
  var initIsMobile=function(){
    var ths=this;
    ths.isMobileView=false;
    var $screen_xs_min=0,
      $screen_sm_min=768,
      $screen_md_min=992,
      $screen_lg_min=1200,
      $screen_xl_min=1400,
      $screen_xs_max=($screen_sm_min-1),
      $screen_sm_max=($screen_md_min-1),
      $screen_md_max=($screen_lg_min-1),
      $screen_lg_max=($screen_xl_min-1);

    enquire.register("screen and (max-width: "+$screen_xs_max+"px)", {
      match:function(){
        ths.isMobileView=true;
        jQuery(window).trigger('av.ismobileview.updated');
      },
      unmatch:function(){
        ths.isMobileView=false;
        jQuery(window).trigger('av.ismobileview.updated');
      }
    });

    ths.isTabletView=false;
    enquire.register("screen and (max-width: "+$screen_sm_max+"px)", {
      match:function(){
        ths.isTabletView=true;
        jQuery(window).trigger('av.istabletview.updated');
      },
      unmatch:function(){
        ths.isTabletView=false;
        jQuery(window).trigger('av.istabletview.updated');
      }
    });
  };
  initIsMobile();
  //----------------------------------------------------------------------------

  // function for adjusting control position for sliders
  var initSliderControlPositioner=function(){
    // adjust arrow positions
    var adjustArrowPosition=function($activeItem_){
      // using .image_wrapper without "img" on purpose here as the image is positioned absolute inside it and would yield wrong results if its not 16:9
      var $img=$activeItem_.find('.image img:visible, .image_wrapper:visible, .vector_wrapper .svg_wrapper:visible'),
        $owl=$activeItem_.parents('.owl-carousel');

      // reset position and return on mobile or if there is no image
      if(isMobileView || $img.length == 0)
      {
        $owl.find('.owl-next, .owl-prev').css({
          top:'',
          height:''
        });
        return;
      }

      var imgHeight=$img.actual('outerHeight');

      if(imgHeight<50) // not correctly loaded yet (cant be this small)
      {
        return;
      }

      $owl.find('.owl-next, .owl-prev').css({
        height:imgHeight
      }).addClass('initialized');

      // setTimemout with 1ms delay forces proper queing of addClass so "aligned" gets set when "initialized" is on already and not in once
      setTimeout(function(){
        $owl.find('.owl-next, .owl-prev').addClass('aligned');
      }, 100);
    };

    var $elements=jQuery('.schoeck_slider_align_controls');
    if(typeof $specificElements !== "undefined")
    {
      $elements=$specificElements;
    }

    $elements.each(function(){
      var $owl=jQuery(this)
      lazyOwl=$owl.find('.owl-lazy').length>0;

      var selector='changed.owl.carousel resized.owl.carousel initialize.owl.carousel initialized.owl.carousel reposition.controls.av.owl.carousel';

      if($owl.hasClass('schoeck_slider_align_controls_static'))
      {
        selector='resized.owl.carousel initialize.owl.carousel initialized.owl.carousel';
      }

      $owl.on(selector, function(event){
        var itemIndex=0;

        if(event.item && event.item.index != null)
        {
          itemIndex=event.item.index;
        }
        else
        {
          var currentSelector='.active';
          if($owl.find('.owl-item.center').length>0)
          {
            currentSelector='.active.center';
          }

          itemIndex=$owl.find('.owl-item').index($owl.find('.owl-item').filter(currentSelector));
        }

        // protection
        if(itemIndex<0)
        {
          itemIndex=0;
        }

        var $activeItem=$owl.find('.owl-item').eq(itemIndex);

        if(lazyOwl)
        {
          adjustArrowPosition($activeItem);
        }
        else
        {
          $activeItem.waitForImages(function(){
            adjustArrowPosition($activeItem);
          });
        }
      });
    });
  }
  initSliderControlPositioner();
  //----------------------------------------------------------------------------

  // coverflow slider
  jQuery('.coverflow_slider_owl').each(function(){
    var $owl=jQuery(this),
      articleCount=$owl.find('.element_wrapper').length,
      hasMultipleArticles=(articleCount>1);

    if(hasMultipleArticles)
    {
      $owl.addClass('has_multiple_articles');
    }

    $owl.waitForImages(function(){
      $owl.owlCarousel({
        nav:(hasMultipleArticles),
        navText:['', ''],
        items:1,
        margin:15,
        dots:(hasMultipleArticles),
        loop:(hasMultipleArticles),
        navRewind:(hasMultipleArticles),
        mouseDrag:false,
        touchDrag:(hasMultipleArticles),
        autoHeight:true,
        center:true,
        onResized:function(){
          $owl.data('owlCarousel')._plugins.autoHeight.update();
        },
        onInitialized:function(){
          // click on inactive items shall make owlcarousel goto the clicked item
          var $items=$owl.find('.owl-item');

          $items.on('click', function(e){
            var $item=jQuery(this);

            if($item.hasClass('active') && $item.hasClass('center'))
            {
              return;
            }

            if($item.prev('.owl-item.center').length) // clicked item is right of center
            {
              $owl.trigger('next.owl.carousel');
            }
            if($item.next('.owl-item.center').length) // clicked item is left of center
            {
              $owl.trigger('prev.owl.carousel');
            }

            e.preventDefault();
            e.stopPropagation();
          });
        },
        responsive:{
          768:{
            items:3,
            margin:-300,
            loop:(articleCount>2),
            navRewind:(articleCount>2)
          }
        }
      });

      // fixing navRevind "disabled" class rendering for responsive use (as it doesnt clear the disabled class correctly
      $owl.on('refresh.owl.carousel', function(){
        $owl.find('.owl-nav .disabled').removeClass('disabled');
      }).on('change.owl.carousel', function(e){
        if(e.property.name == 'position')
        {
          $owl.find('.owl-nav .disabled').removeClass('disabled');
        }
      });
    });
  });
});

Abhängigkeiten

www.owlcarousel2.github.io
www.github.com/alexanderdickson/waitForImages