title: Royalslider and Picturefill.js
body: <p>I'm creating a website which has the <a href="http://dimsemenov.com/plugins/royal-slider/" rel="nofollow">Royal Slider HTML version</a>. I want to use <a href="https://github.com/scottjehl/picturefill" rel="nofollow">picturefill</a> to load the image optimized for the current resolution viewed. But I have problems getting it to work. It works while I serve the images via a normal WP_Query.</p>
  
  <p>I've read this <a href="http://help.dimsemenov.com/discussions/suggestions/198-royalslider-picturefill" rel="nofollow">thread</a>, but that did not help me, anybody an idea?</p>
  
  <p>Thanks, /Paul</p>
  
  <pre><code>&lt;div id="featuredAdv" class="royalSliderAdv rsMinW"&gt;
  
      &lt;?php 
  
          $args_featured_adv = array(
              'posts_per_page' =&gt; -1,
              'orderby' =&gt; 'rand',
              'post_type' =&gt; 'advertenties',
              'meta_key' =&gt; 'advertentiepositie',
              'meta_value' =&gt; 'Featured'
          );
  
          $adv_featured = new WP_Query( $args_featured_adv );
  
          if( $adv_featured-&gt;have_posts() ): while ( $adv_featured-&gt;have_posts() ) : $adv_featured-&gt;the_post();
  
      ?&gt;
  
      &lt;a href="&lt;?php the_field('link'); ?&gt;" target="_blank" onClick="return recordOutboundLink(this, ['&lt;?php the_title(); ?&gt;', '&lt;?php the_field('link'); ?&gt;']);"&gt;
  
          &lt;div class="rsContent"&gt;
  
                  &lt;?php
  
                      $attachment_id_ft = get_field('afbeelding');
                      $small_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-small' ); // returns an array
                      $default_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-default' ); // returns an array
                      $large_ft = wp_get_attachment_image_src( $attachment_id_ft, 'adv-b-small-large' ); // returns an array
  
                  ?&gt;
  
                  &lt;span data-picture data-alt="&lt;?php the_title_attribute( array( 'before' =&gt; 'Photoq.nl: ', 'after' =&gt; '' ) ); ?&gt;"&gt;
                      &lt;span data-src="&lt;?php echo $default_ft[0]; ?&gt;"&gt;&lt;/span&gt;
                      &lt;span data-src="&lt;?php echo $small_ft[0]; ?&gt;" data-media="(min-width: 400px)"&gt;&lt;/span&gt;
                      &lt;span data-src="&lt;?php echo $default_ft[0]; ?&gt;" data-media="(min-width: 768px)"&gt;&lt;/span&gt;
                      &lt;span data-src="&lt;?php echo $large_ft[0]; ?&gt;" data-media="(min-width: 1200px)"&gt;&lt;/span&gt;
  
                      &lt;!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --&gt;
                      &lt;noscript&gt;
                          &lt;img src="&lt;?php echo $default_ft[0]; ?&gt;" alt=""&gt;
                      &lt;/noscript&gt;
                  &lt;/span&gt;
  
          &lt;/div&gt;
  
      &lt;/a&gt;
  
      &lt;?php endwhile; endif; wp_reset_query(); ?&gt;
  
  &lt;/div&gt; &lt;!-- end #featuredAdv --&gt;
  
  &lt;script&gt;
      jQuery(document).ready(function($) {
          $('#featuredAdv').royalSlider({
              arrowsNav: false,
              loop: false,
              controlsInside: false,
              imageScaleMode: 'none',
              imageScalePadding: 0,
              arrowsNavAutoHide: false,
              autoScaleSlider: true,
              autoScaleSliderWidth: 270,
              autoScaleSliderHeight: 572,
              controlNavigation: 'bullets',
              numImagesToPreload: 1,
              thumbsFitInViewport: false,
              navigateByClick: true,
              startSlideId: 0,
              autoPlay: false,
              transitionType: 'move',
              globalCaption: true
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>edit: 28-06 09:40</strong></p>
  
  <p>Got in contact with developer... so he gave some tips. One of them was to make sure picturefill initializes before the slider. With that he means, at least I think, that picturefill.js needs to be loaded before the royalslider files. </p>
  
  <p>Still no luck though. Oh en made a little change in the code due:</p>
  
  <pre><code>&lt;div class="rsIMG"&gt;
  </code></pre>
  
  <p>does not follow the slider syntax.</p>