1
我正在創建一個網站，其中有Royal Slider HTML version。我想使用picturefill加載爲當前分辨率查看而優化的圖像。但是我有問題讓它工作。它通過正常的WP_Query爲圖像提供服務。Royalslider和Picturefill.js
我讀過這thread，但這並沒有幫助我，任何人的想法？
謝謝你，/保羅
<div id="featuredAdv" class="royalSliderAdv rsMinW">
<?php
$args_featured_adv = array(
'posts_per_page' => -1,
'orderby' => 'rand',
'post_type' => 'advertenties',
'meta_key' => 'advertentiepositie',
'meta_value' => 'Featured'
);
$adv_featured = new WP_Query($args_featured_adv);
if($adv_featured->have_posts()): while ($adv_featured->have_posts()) : $adv_featured->the_post();
?>
<a href="<?php the_field('link'); ?>" target="_blank" onClick="return recordOutboundLink(this, ['<?php the_title(); ?>', '<?php the_field('link'); ?>']);">
<div class="rsContent">
<?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
?>
<span data-picture data-alt="<?php the_title_attribute(array('before' => 'Photoq.nl: ', 'after' => '')); ?>">
<span data-src="<?php echo $default_ft[0]; ?>"></span>
<span data-src="<?php echo $small_ft[0]; ?>" data-media="(min-width: 400px)"></span>
<span data-src="<?php echo $default_ft[0]; ?>" data-media="(min-width: 768px)"></span>
<span data-src="<?php echo $large_ft[0]; ?>" data-media="(min-width: 1200px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="<?php echo $default_ft[0]; ?>" alt="">
</noscript>
</span>
</div>
</a>
<?php endwhile; endif; wp_reset_query(); ?>
</div> <!-- end #featuredAdv -->
<script>
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
});
});
</script>
編輯：28-06 09:40
了與開發者聯繫......所以他給了一些提示。其中之一是確保圖片填充在滑塊之前初始化。這意味着，至少我認爲，picturefill.js需要在royalslider文件之前加載。
雖然沒有運氣。哦恩在代碼中作了一些修改：
<div class="rsIMG">
不遵循滑塊語法。